在 SwiftUI 的 List 行中添加形状
Posted
技术标签:
【中文标题】在 SwiftUI 的 List 行中添加形状【英文标题】:Adding shapes in List row of SwiftUI 【发布时间】:2020-07-03 14:40:57 【问题描述】:我正在尝试创建一个列表视图,其中行如下所示:
但是,我无法将 Circle
对齐在前端。尝试在VStack
中使用Spacer()
、HStack
,但它不起作用。这是我的代码及其输出。
struct PeopleView: View
let people = ["Adam", "James"]
var body: some View
NavigationView
List
ForEach(people, id: \.self) person in
HStack
Circle()
VStack
Text("\(person)")
.navigationBarTitle("People", displayMode: .inline)
【问题讨论】:
【参考方案1】:实际上,在这种情况下您不需要形状本身,而只是作为一个蒙版以在圆形中直观地呈现文本。
所以解决方案可以如下所示
HStack
Text(person.prefix(2).uppercased()).bold()
.foregroundColor(.white)
.padding()
.background(Color.red)
.mask(Circle()) // << shaping text !!
Spacer()
VStack
Text("\(person)")
【讨论】:
【参考方案2】:SwiftUI 中的某些视图会填满所有可用空间。此类视图包括形状、颜色、分隔符、分隔符和GeometryReader
。
您的Circle
是一个形状,它的行为类似于Spacer
(在填充空间方面)。
如果您将Circle
替换为圆形的图像,它将起作用:
ForEach(people, id: \.self) person in
HStack
Image(systemName: "circle.fill")
.imageScale(.large)
Spacer()
VStack
Text("\(person)")
【讨论】:
【参考方案3】:发生这种情况是因为您没有为 Circle
形状提供固定(或相对)框架,因此 Circle
占用了最大可用宽度。
如果你添加frame(width:height:)
,一切都应该正常工作:
struct PeopleView: View
let people = ["Adam", "James"]
var body: some View
NavigationView
List
ForEach(people, id: \.self) person in
HStack
Circle()
.frame(width: 50, height: 50)
VStack
Text("\(person)")
.navigationBarTitle("People", displayMode: .inline)
【讨论】:
以上是关于在 SwiftUI 的 List 行中添加形状的主要内容,如果未能解决你的问题,请参考以下文章