swiftui - 列出未居中的行

问题描述

我正在列表中显示一些行（实际上，此处发布的示例中有 2 个并行列表），来自标记为的自定义行视图EventRow。
为了避免在 iPad 等大型设备上出现不良 UI，我将 EventRow 的宽度限制为 200。
如何让 EventRows 在大型设备上的列表中居中？
我尝试.center在列表的 ForEach 方法中对 EventRows 应用对齐，也尝试在列表上执行相同操作，但似乎没有任何效果。

作为替代解决方案，有没有办法设置 MAX Spacer width ？我知道您可以设置 minLength，但似乎不能设置 MAX...

这是 iPad Pro 11 sim 的屏幕截图：

我的 EventRow 文件的代码如下：


import SwiftUI

struct EventRow: View {

    var body: some View {
        VStack{
            HStack {
                Text("Text one")
                Spacer()
                Text("Text two")
            }
            HStack {
                Spacer()
                Image(systemName: "flame")
                    .font(.body)
                Spacer()
            } // END of second HStack
                .padding(.top, -14)
        } //END of Vstack
        .frame(maxWidth: 200) // To limit width on larger devices
        .listRowBackground(LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .top, endPoint: .bottom))
    }
}

struct EventRow_Previews: PreviewProvider {
    static var previews: some View {
       EventRow().previewLayout(.fixed(width: 300, height: 60))

    }
}

我的 ContentView ：


struct ContentView: View {

    struct listsSetup: ViewModifier {
      func body(content: Content) -> some View {
        return content
        .frame(maxHeight: UIScreen.main.bounds.size.height/3)
        .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.blue, lineWidth: 1))
            .padding([.top, .bottom])
        }
    }
    @State private var selected : Int = 0

    var body: some View {

        VStack {
                HStack {
                    VStack { // 1 list Vstack
                        VStack {
                        Text("List 1")
                            .padding(.top)
                        List {
                            EventRow()
                            EventRow()
                        } // END of 1st List
                        }
                            .modifier(listsSetup())
                    } // END of 1st list VStack

                    VStack { // 2nd Vstack
                        VStack {
                        Text("List 2")
                            .padding(.top)
                        List {
                            EventRow()
                            EventRow()
                        } // END of Landings List
                        }
                        .modifier(listsSetup())
                    } // End of 2nd List VStack
                } // End of 1st & 2nd lists HStack
                    .padding(.top)
                Spacer()


            Picker("", selection: $selected){
                Text("0").tag(0)
                Text("1").tag(1)
            }.pickerStyle(SegmentedPickerStyle())

            Text("\(selected)")
        } // END of VStack
    } // END of body

}

同样，任何帮助将不胜感激。

标签： swiftui

只需将其嵌入另一个容器中，如下所示（使用 Xcode 11.4 测试）

    VStack {
        VStack{
            HStack {
                Text("Text one")
                Spacer()
                Text("Text two")
            }
            HStack {
                Spacer()
                Image(systemName: "flame")
                    .font(.body)
                Spacer()
            } // END of second HStack
                .padding(.top, -14)
        } //END of Vstack
        .frame(maxWidth: 200) // To limit width on larger devices
    }.frame(maxWidth: .infinity)   // << here !!

swiftui - 列出未居中的行

问题描述

解决方案

推荐阅读