在 SwiftUI 的列表行中添加形状

Question

我正在尝试创建一个列表视图，其中的行如下所示：

但是，我无法将 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)
        }
    }
}

Answer 1

SwiftUI 中的一些视图填满了所有可用的 space。这些视图是形状、颜色、spacers、分隔线和 GeometryReader.

您的 Circle 是一个形状，它的行为类似于 Spacer（就填充 space 而言）。

如果您将 Circle 替换为圆的图片它将起作用：

ForEach(people, id: \.self) { person in
    HStack {
        Image(systemName: "circle.fill")
            .imageScale(.large)
        Spacer()
        VStack {
            Text("\(person)")
        }
    }
}

Answer 2

实际上在这种情况下你不需要形状本身，而只是作为一个遮罩来在视觉上以圆形呈现文本。

所以解决方案可以像下面这样

HStack {
    Text(person.prefix(2).uppercased()).bold()
        .foregroundColor(.white)
        .padding()
        .background(Color.red)
        .mask(Circle())          // << shaping text !!

    Spacer()
    VStack {
        Text("\(person)")
    }
}

Answer 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 的列表行中添加形状

Adding shapes in List row of SwiftUI

ios

swiftui

swiftui-list