首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在SwiftUI列表行中拥有相同的比例?

在SwiftUI中,要实现在列表行中拥有相同的比例,可以使用GeometryReaderframe来设置行的大小。

首先,创建一个列表视图,并在每一行中使用GeometryReader来获取行的大小信息。然后,使用frame来设置行的大小,使其与列表视图的宽度相等,并根据需要设置高度。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0..<10) { index in
                GeometryReader { geometry in
                    Text("Row \(index)")
                        .frame(width: geometry.size.width, height: geometry.size.width/2) // 设置行的大小,宽度与列表视图相等,高度为宽度的一半
                }
                .listRowInsets(EdgeInsets()) // 去除行之间的间距
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在这个示例中,我们创建了一个包含10行的列表视图。每一行使用GeometryReader获取行的大小,并使用frame设置行的大小,使其宽度与列表视图相等,高度为宽度的一半。通过listRowInsets方法,我们去除了行之间的间距,以保持相同的比例。

这样,每一行都会拥有相同的比例,无论列表视图的大小如何变化。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

希望这个答案能够满足您的需求。如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

优化在 SwiftUI List 显示大数据集响应效率

本文将通过一个优化列表视图案例,展现在 SwiftUI 查找问题、解决问题思路,其中也会对 SwiftUI 视图显式标识、@FetchRequest 动态设置、List 运作机制等内容有所涉及...标识( Identity )是 SwiftUI 在程序多次更新识别相同或不同元素手段,是 SwiftUI 理解你 app 关键。...虽然我们已经找到了导致进入列表视图卡顿原因,但如何在不影响效率情况下通过 scrollTo 来实现到列表端点滚动呢?...解决方案一 从 iOS 15 开始,SwiftUI 为 List 添加了更多定制选项,尤其是解除了对列表分割线设置屏蔽且添加了官方实现。...我们将通过 SwiftUI-Introspect[7] 来实现在 List 滚动到列表两端。

9.2K20

Ask Apple 2022 与 SwiftUI 有关问答(下)

快速检索数组元素Q:为什么没有简单方法将 TABLE 选择映射到提供表内容数组元素上?似乎唯一方法是在数组搜索匹配 id 值,这对于大表来说似乎效率很低。...Swiftcord[12] 代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...在 SwiftUI 4 ,可以使用 .scrollContentBackground(.hidden) 隐藏列表默认背景searchableQ:是否有办法在.searchable() 修饰器以编程方式设置搜索字段焦点...macOS APIQ:对于运行 Monterey Mac,能否如何在 SwiftUI 实现下面需求建议:打开一个窗口在该窗口中初始化数据找到所有打开窗口确定一个窗口是否打开从不在该窗口视图中关闭一个窗口...然而,两个内容相同视图之间交换并不能使视图顺利地产生动画,因为两者文本也被动画化了。我正在使用仅禁用 TextField 替代方法,但有没有办法引导动画以使用文档方法?

14.8K30
  • Ask Apple 2022 与 SwiftUI 有关问答(上)

    是否有任何建议用来检测列表选择,类似于 “NavigationLink”,但不导航到另一个视图(例如,显示 Sheet 或从列表中选择一个选项 )?...阅读 SwiftUI 动画机制[8] 一文,了解更多有关动画内容。自适应高度 SheetQ:如何在 iOS16 呈现与动态内容高度相匹配 Sheet?...对于非惰性视图( LazyVStack ),一旦 hosting controller 视图被初始化,onAppear 将被调用。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增三种宽度风格( Compressed、Condensed、Expanded...A:实现近似行为方法是在菜单中使用命令来提供相同操作。通常情况下,应该有列表让人们知道有哪些键盘快捷键可用。但是,如果这不适合你使用情况,我们会对这方面的增强请求反馈感兴趣。

    12.3K20

    何在SwiftUI实现interactiveDismissDisabled

    何在SwiftUI实现interactiveDismissDisabled 想获得更好阅读体验,可以访问我博客www.fatbobman.com[1] 本文中我们将探讨如何实现一个SwiftUI...3.0新增功能——interactiveDismissDisabled增强版;如何创建更SwiftUI功能扩展。...去年9月,我在文章【在SwiftUI制作可以控制取消手势Sheet】[3]中介绍了健康笔记2.0[4]版本Sheet控制实现方法。...这种实现是我所喜欢,也给了我很大启发。 在WWDC 2021 观后感[6]一文,我们已经探讨过SwiftUI3.0将会影响非常多第三方开发者编写SwiftUI扩展思路和实现方式。...尽管interactiveDismissDisabled实现很优雅,但仍未完成健康笔记[7]需要第二个功能:在用户使用手势取消Sheet时可以获得通知,进而拥有更多控制能力。

    3.9K40

    SwiftUI - 百代码变十,Swift再创辉煌

    而对于开发者来说,新发布 SwiftUI 可能是最吸引人特性,在 苹果公司软件工程高级副总裁Craig Federighi演示,我们可以轻松地把一百前端代码缩减到十几行。...初体验:左边加大括号21,右边出现一些类似SB东西,布局UI,设置属性貌似都可以完成 // SwiftUI 特点是什么 // SwiftUI 使用声明式语法,所以我们可以简单地声明用户界面的样式。...这种声明式方式甚至允许使用复杂功能,动画(animation)。只需要几行代码,即可添加动画在任何控件上,并且可以使用易于调用特效。...例如,编写需要包含文本字段项目列表时,开发者可以用代码描述每个字段对齐方式、字体和颜色。代码也比以前更简单,更易于阅读。 ? 这种声明式风格非常适用于像动画这样复杂元素。...// 拥有更直观新设计工具 // Xcode 11 包含更直观新设计工具,可让开发者通过拖拽方式使用 SwiftUI 构建界面,在这过程可以直接设置控件相关属性。

    3K40

    SwiftUI - 百代码变十,Swift再创辉煌

    而对于开发者来说,新发布 SwiftUI 可能是最吸引人特性,在 苹果公司软件工程高级副总裁Craig Federighi演示,我们可以轻松地把一百前端代码缩减到十几行。...下面来一张牛逼哄哄SwiftUI效果图,给大家打打牙祭 [1240] 初体验:左边加大括号21,右边出现一些类似SB东西,布局UI,设置属性貌似都可以完成 SwiftUI 特点是什么 SwiftUI...这种声明式方式甚至允许使用复杂功能,动画(animation)。只需要几行代码,即可添加动画在任何控件上,并且可以使用易于调用特效。...例如,编写需要包含文本字段项目列表时,开发者可以用代码描述每个字段对齐方式、字体和颜色。代码也比以前更简单,更易于阅读。 [1240] 这种声明式风格非常适用于像动画这样复杂元素。...拥有更直观新设计工具 Xcode 11 包含更直观新设计工具,可让开发者通过拖拽方式使用 SwiftUI 构建界面,在这过程可以直接设置控件相关属性。

    2.3K30

    SwiftUI数据流之State&Binding

    SwiftUI,以单一数据源(single source of truth)为核心,构建了数据驱动状态更新机制。...@State检测是值类型 值类型仅有独立拥有者,而class类型可以多个指向一个;对于两个SwiftUI View而言,即使发送给他们两个相同struct对象,事实上他们每个View都得到了一份独立...,为了简化内容说明核心问题,只有两行内容,父视图是ProductsView,其中嵌套着子视图FilterView和列表元素,为了能够使得FilterView对showFavorited修改能够传递回父视图...source of truth),所以列表展示内容会不断根据条件进行过滤 可变和不可变 首先来使用下面示例探讨一个问题 struct StateMutableView: View { @State...self,那么SwiftUI前面示例body属性可否添加呢?

    4.1K30

    高级 SwiftUI 动画 — Part 1:Paths

    这些都是被官方文档完全忽略主题,在SwiftUI 帖子和文章也几乎没有提及。不过,它们还是为我们提供了创建一些相当不错动画工具。...每当视图上可动画参数发生变化时,SwiftUI 就会从旧值到新值制作动画。一些可动画参数包括大小(size)、偏移(offset)、颜色(color)、比例(scale)等。...动画是如何工作 在所有SwiftUI动画背后,有一个名为 Animatable 协议。我们将在后面讨论细节,但主要是,它拥有一个计算属性,其类型遵守 VectorArithmetic 协议。...同一个文件Example4,有一个更复杂路径。它基本上是相同形状,但增加了一条连接每个顶点线。...它将打开改变我们视图和动画新方法大门。与 Paths 一样,SwiftUI 没有关于如何在两个不同变换矩阵之间转换内置知识。GeometryEffect将有助于我们这样做。

    3.8K20

    SwiftUI TextField进阶——格式与校验

    本文为【SwiftUI 进阶】系列文章一篇,在本文中,我将介绍如何在TextField实现如下功能: •屏蔽无效字符•判断录入内容是否满足特定条件•对录入文本实时格式化显示 textfieldDemo1...如何在TextField实现格式化显示 现有格式化方法 在SwiftUI 3.0,TextField新增了使用新老两种Formatter构造方法。...如何在TextField屏蔽无效字符 现有屏蔽字符方法 在SwiftUI,可以通过设置仅使用特定键盘类型来实现一定程度上录入限制。...如何在TextField检查内容是否符合指定条件 相较上述两个目标,在SwiftUI检查TextField内容是否符合指定条件是相当方便。...不利于判断用户是否录入新信息(更多信息可参阅如何在SwiftUI创建一个实时响应Form[10])。方案二允许不提供初始值,支持可选值。

    8.2K20

    AVKit框架详细解析(四) —— 基于AVKit 和 AVFoundation框架视频流App构建

    首先,导航到 VideoFeedView.swift 并在 SwiftUI 导入正下方添加以下导入: import AVKit 看看下面这个,你会看到你已经有了一个列表和一个视频数组。...这就是应用程序如何用数据填充现有列表方式。 视频本身来自嵌入在应用程序包 JSON 文件。 如果您好奇,您可以查看 Video.swift 以了解它们是如何获取。...UIView 只是 CALayer 包装器。 它提供触摸处理和辅助功能,但不是子类。 相反,它拥有并管理底层图层属性。 一个绝妙技巧是,您实际上可以指定您希望视图子类拥有的图层类型。...现在,是时候将您视频剪辑列表添加到播放器,以便它可以开始播放它们。...好处是你知道如何在 SwiftUI 和 UIKit 之间建立桥梁。

    7K10

    SwiftUI 与 Core Data —— 数据定义

    在今后文章我们将尝试用新思路来创建一个 SwiftUI + Core Data app,看看能否避免并改善之前一些问题。本文将首先探讨如何定义数据。...遗憾是,托管对象对于以值类型为主 SwiftUI 来说并不算友好,因此,不少开发者都会在视图中将托管对象实例转换成一个结构体实例以方便接下来操作( 如何在 Xcode 下预览含有 Core Data...对于 SwiftUI 来说,托管对象具备两个非常显著特点:懒加载托管对象所谓托管是指:该对象被托管上下文所创建并持有。仅在需要时候,才从数据库( 或缓存 )中加载所需数据。...面向协议编程面向协议编程是贯穿 Swift 语言基本思想,也是其主要特点之一。通过让不同类型遵守相同协议,开发者便可以从具体类型解放出来。...我们将介绍如何在视图从 Core Data 获取数据操作这一过程实现与托管环境解耦,创建一个可以接受 Mock 数据自定义 FetchRequest 类型。

    2.4K40

    SwiftUI 实现视图居中若干种方法

    SwiftUI ,有很多手段可以达成此目的。本文将介绍其中一些方法,并对每种方法背后实现原理、适用场景以及注意事项做以说明。...().fill(.clear)在使用 SwiftUI 进行开发过程,Color、Rectangle 等经常被用来实现对容器等分操作。...请阅读 SwiftUI 專欄 #4 Color 不只是顏色[3] ,掌握有关 Color 更多内容对齐指南上节,我们通过填充物让 Text 实现了左右居中。...我为本文这种通过多种方法来解决一个问题方式添加了【小题大作】标签,目前使用该便签文章还有:在 Core Data 查询和使用 count 若干方法[6]、在 SwiftUI 视图中打开 URL...每周也会对当周博客上新文章以及在 Twitter 上发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅下方 邮件列表[10],可以及时获得每周 Tips 汇总。

    6.8K40

    肘子 Swift 周报 #046| 无警告编译并非 Swift 6 初衷

    前一期内容|全部周报列表 近期推荐 如何在 Xcode 中使用 EditorConfig 文件 ( How to use EditorConfig files in Xcode )[3] Pol Piella...作为书籍 macOS by Tutorials[7] 作者,Reichelt 尤其展示了很多在 WWDC 2023 和 WWDC 2024 为 macOS 引入 SwiftUI 新功能。...作者认为,经过多年发展,SwiftUI 逐渐统一了 Apple 各个平台代码,实现了跨平台代码高度共享,但开发者在开发过程仍需考虑不同平台特性,以确保应用用户体验与平台设计理念相一致。...他们详细演示了从设置项目到实现与浏览器交互整个过程,包括如何在 Xcode 配置 WebAssembly、使用 JavaScriptKit 库操作 DOM 以及利用 Swift Observation...通过这种方法,开发者可以用熟悉 Swift 代码在浏览器构建应用,并与 iOS 平台共享相同模型和业务逻辑。

    10310

    SwiftUI水平条形图

    SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...在Numbers 等应用程序,水平条形图被定义为独立图表类型,而不是垂直条形图。除了条形差异外,x轴和y轴格式也需要不同。...Bar Chart with multiple data sets in SwiftUI SwiftUI 水平条形图 将条形图转换为水平 水平条形图不仅仅是在垂直条形图上配置,有一些元素是可以重复使用...,只是Bars被放置在一个垂直堆栈,而不是水平堆栈。...scaleFactor)) - (fullChartWidth/2.0) - 1) } } } } } X轴显示水平条形图上比例和数值

    4.8K20

    架构之路 (五) —— VIPER架构模式(一)

    开始 首先看下主要内容: 在本教程,您将了解如何在SwiftUI和Combine中使用VIPER体系结构模式,同时构建一个允许用户创建公路旅行iOS应用程序,来自翻译。...如果您现在构建并运行,您将不会看到任何有趣东西。 然而,在本教程结束时,您将拥有一个功能齐全道路旅行计划应用程序。 ---- What is VIPER?...路由器Router处理屏幕之间导航。这与SwiftUI不同,在SwiftUI,视图显示任何新视图。...在本例,主要entity是Trip,它包含一个路点Waypoints列表,路点是旅程各个站点。 这个应用程序包含一个DataModel类,它包含一个旅行列表。...第一个只是interactor路点列表一个副本。第二个使用mapInfoProvider来计算所有路径点总距离。第三种方法使用相同数据provider来获得路点之间方向。

    17.5K10

    SwiftUI + Core Data App 内存占用优化之旅

    图片 从 Instruments 分析来看,随着列表滚动,内存占用持续增加。 图片 相信任何开发者都无法容忍这种内存占用情况出现。下文中,我们将对这段代码进行逐步优化,以达到最终可用程度。...SwiftUI 惰性视图容器拥有对符合 DynamicViewContent 协议内容( 通过 ForEach 生成内容 )进行优化能力。...从当今移动开发角度来说,缓存好像存在意义不大,但考虑到 Core Data 前身主要用来处理金融类数据业务,在此种场景缓存可以带来相当可观收益。...由于缓存机制存在,当我们通过 Core Data 从数据库获取某个数据时( 例如图片 ),缓存中会有一份副本。...数据多份拷贝 当图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示时,实际上在内存至少保存了三份拷贝: 缓存 托管对象上下文( 托管对象被填充后 ) 显示该图片 SwiftUI

    2.4K40

    SwiftUI + Core Data App 内存占用优化之旅

    无优化滚动至底截屏 从 Instruments 分析来看,随着列表滚动,内存占用持续增加。 无优化效果 相信任何开发者都无法容忍这种内存占用情况出现。...SwiftUI 惰性视图容器拥有对符合 DynamicViewContent 协议内容( 通过 ForEach 生成内容 )进行优化能力。...从当今移动开发角度来说,缓存好像存在意义不大,但考虑到 Core Data 前身主要用来处理金融类数据业务,在此种场景缓存可以带来相当可观收益。...由于缓存机制存在,当我们通过 Core Data 从数据库获取某个数据时( 例如图片 ),缓存中会有一份副本。...数据多份拷贝 当图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示时,实际上在内存至少保存了三份拷贝: 缓存 托管对象上下文( 托管对象被填充后 ) 显示该图片 SwiftUI

    1.3K10

    肘子 Swift 周报 | Swift,超越苹果生态!

    Adaptive Text Color in SwiftUI based on Background[16] Pedro Rojas[17] 在开发过程,开发者时常遭遇这样一个问题:相同颜色文字在不同背景色上可能难以辨认...文章不仅阐述了这一概念实现过程,还附带了一个完整演示,展现了如何在 SwiftUI 环境下应用这一技术。...在转向 AppKit 过程,他探讨了一些鲜为人知 AppKit 组件, NSTableHeaderCell 等,并通过 NSViewRepresentable构建了 SwiftUI 与 AppKit...文章,作者强调他目的并非是要比较 SwiftUI 与 AppKit 性能优劣,或者质疑 SwiftUI 在 macOS 上应用适用性。...实际上,该应用复杂模板编辑器几乎完全使用 SwiftUI 开发,且表现出色。这一点彰显了 SwiftUI 在实际应用强大潜力和灵活性。

    14610

    用 Table 在 SwiftUI 下创建表格

    欢迎大家在 Discord 频道[2] 中进行更多地交流 Table 是 SwiftUI 3.0 为 macOS 平台提供表格控件,开发者通过它可以快捷地创建可交互列表格。...在 WWDC 2022 ,Table 被拓展到 iPadOS 平台,让其拥有了更大施展空间。本文将介绍 Table 用法、分析 Table 特点以及如何在其他平台上实现类似的功能。...,更习惯于将数据元素以( Row )形式进行展示( 在一显示数据不同属性内容 ) 在 Table 数据是懒加载视图( TableColumn ) onAppear 和 onDisappear...无论单元格内容实际高度需求有多大,Table 始终将保持系统给定默认高。...,SwiftUI 会扩展更多样式到 iPadOS 平台 选择 在 Table 启用选择与 List 方式十分类似: struct TableDemo: View { @State var

    4.1K30
    领券