ForEach 循环中的 VStack 不尊重 WatchOS 中的对齐参数

Posted 2023-02-24

【中文标题】ForEach 循环中的 VStack 不尊重 WatchOS 中的对齐参数

【英文标题】：VStack inside ForEach loop not respecting alignment parameter in WatchOS

【发布时间】：2019-10-11 19:14:21

【问题描述】：

我有一个VStack，在ForEach 循环内有一个.leading，在ScrollView 内有一个对齐参数没有得到遵守。如果我在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

【参考方案1】：

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

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

您在寻找什么：

为 VStack 保留对齐参数。

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

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

【参考方案2】：

我有点晚了，但我通常使用的另一个解决方案是将值包装在 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()