在 SwiftUI 的列表行中添加形状

Question

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

但是，我无法对齐Circle前导侧的 。尝试使用Spacer(),HStack内VStack，它只是不起作用。这是我的代码及其输出。

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

实际上，在这种情况下，您不需要形状本身，而只是作为一个蒙版以在圆形中直观地呈现文本。

所以解决方案可以如下

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

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