在 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 行中添加形状的主要内容,如果未能解决你的问题,请参考以下文章

在列表行中制作等宽的 SwiftUI 视图

如何在 SwiftUI 中以形状显示文本?

SwiftUI - 列表行中的多个按钮

如何修改拖放预览SwiftUI的背景颜色和形状?

如何使用 SwiftUI 中的图像修复 NavigationView 列表行中增加的高度"

解决SwiftUI复合形状(Shape)透明发生重叠的问题