ForEach 循环中的 VStack 不考虑 WatchOS 中的对齐参数

VStack inside ForEach loop not respecting alignment parameter in WatchOS

我在 ScrollView 内的 ForEach 循环内有一个 VStack 和对齐 .leading,并且不遵守对齐参数。如果我在 ForEach 循环之外有一个 VStack,则正在使用对齐参数并且视图显示正确。

    ScrollView{
        // THIS DISPLAYS CORRECTLY
        VStack(alignment: .leading){
            Text("namename")
                .font(.headline)
                .lineLimit(1)
            Text("namename  name")
                .font(.subheadline)
                .lineLimit(1)
        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.gray.opacity(0.20))
        .cornerRadius(5)
        .padding(.bottom)

        ForEach(self.list_of_names, id: \.self) { item in
            // THIS DOES NOT DISPLAY CORRECTLY
            VStack(alignment: .leading){
                Text(item)
                    .font(.headline)
                    .lineLimit(1)
                Text(item + " name")
                    .font(.subheadline)
                    .lineLimit(1)
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.gray.opacity(0.20))
            .cornerRadius(5)
            .padding(.bottom)
        }

    }
    .padding()

第一行对齐正确,在 ForEach 循环外,同时其他行在循环内。蓝线代表我在 ForEach 循环

中突出显示每个 VStack

ForEach 循环中创建的 VStack 似乎符合对齐参数。将文本与前沿对齐仅适用于 VStack 中较短的项目。

在顶部的 VStack 中,顶部的 "namename" 仅向左那么远,因为下面的 "namename name" 距离 ScrollView 的中心要宽得多。所以顶部的 VStack 不是完全实现你想要的 ScrollView 对齐的正确方法。

您要查找的内容:

保留 VStack 的对齐参数。

将对齐参数添加到 VStack 的框架。

.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

我有点晚了,但我通常使用的另一种解决方案是将值包装在 HStack 中并添加一个 Spacer。像这样会达到预期的效果:

var body: some View {
    ScrollView {
        ForEach(self.list_of_names, id: \.self) { item in
            HStack {
                VStack(alignment: .leading) {
                    Text(item)
                        .font(.headline)
                        .lineLimit(1)
                    Text(item + " name")
                        .font(.subheadline)
                        .lineLimit(1)
                }
                Spacer()
            }
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.gray.opacity(0.20))
            .cornerRadius(5)
            .padding(.bottom)
        }

    }
    .padding()
}