Skip to content

SwiftUI之设置HStack子视图高度相等

要使SwiftUI中的HStack子视图高度相等,可以使用.frame(maxHeight: .infinity)和.fixedSize(horizontal: false, vertical: true)修饰符的组合。这两个修饰符可以使HStack的高度等于最高的子视图,同时所有子视图都占据可能的最大高度。

swift
struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("Hello,")
                Text("world")
                Text("!")
            }
            .frame(maxHeight: .infinity)
            .background(Color.pink)

            Text("Hi, 🌎!")
            .frame(maxHeight: .infinity)
            .background(Color.yellow)
        }
        .fixedSize(horizontal: false, vertical: true)
        .background(Color.orange)
        .font(.system(size: 36).bold())
    }
}
struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("Hello,")
                Text("world")
                Text("!")
            }
            .frame(maxHeight: .infinity)
            .background(Color.pink)

            Text("Hi, 🌎!")
            .frame(maxHeight: .infinity)
            .background(Color.yellow)
        }
        .fixedSize(horizontal: false, vertical: true)
        .background(Color.orange)
        .font(.system(size: 36).bold())
    }
}

通过设置子视图的最大高度为.infinity,然后使用.fixedSize修饰符,您可以实现HStack子视图高度相等的效果。

关于fixedSize理解参考: SwiftUI 布局 —— 尺寸( 上 ) | 肘子的 Swift 记事本