滚动视图对齐

Question

我有以下内容：

            VStack(alignment: .leading) {

                ScrollView(.vertical, showsIndicators: false) {

                    VStack(alignment: .leading, spacing: 30) {
                        ForEach(0 ..< meals.count) { count in
                            HStack(alignment: .center,spacing: 120){
                                VStack{
                                    Text("\(count + 1) ")
                                    .foregroundColor(Color.black)
                                    .padding(.horizontal, 8)
                                    .padding(.vertical, 5)
                                    .background(
                                        Capsule()
                                            .fill(Color.black)
                                            .opacity(0.20)
                                    )
                                }

                                VStack{
                                    Text("\(self.meals[count]) ")
                                    .foregroundColor(Color.black)
                                }

                                VStack{
                                    Image(systemName: "pencil")
                                    .foregroundColor(Color.black)
                                    .font(.system(size: 20))
                                    .background(Color.yellow)
                                }

                            }
                        }
                    }
                    .frame(width: UIScreen.main.bounds.width) // set a fixed width
//                        .background(Color.green)
                }
                .frame(height: 185)
                .frame(maxWidth: 400)
                .padding(.top, -200)
            }

如何使铅笔图标保持在右侧？我尝试将alignment: .trailing放在上面，但不起作用。

我看到了一个带有几何图形的示例，但是滚动视图变得很奇怪，因此我需要它。另外，如何确保各个设备之间的项目宽度保持相同？

Answer 1

使用Spacer()而不是硬编码间距，就像弹簧推子视图放在一边。

注意：您只需要一个子视图就不需要VStack，因此为简单起见可以将其删除。

这是结果行：

HStack { // .center is by default, so also remove
    Text("\(count + 1) ")
        .foregroundColor(Color.black)
        .padding(.horizontal, 8)
        .padding(.vertical, 5)
        .background(
            Capsule()
                .fill(Color.black)
                .opacity(0.20)
        )

    Spacer()           // << here !!

    Text("\(self.meals[count]) ")
        .foregroundColor(Color.black)

    Spacer()           // << here !!

    Image(systemName: "pencil")
        .foregroundColor(Color.black)
        .font(.system(size: 20))
        .background(Color.yellow)
}