如何在 HStack 中创建元素宽度相等的 VStack？-解网

问：

这是我为全宽父级创建等宽度元素的代码：HStackView

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        Color(UIColor.white.withAlphaComponent(0.1))
            .cornerRadius(5)
            .padding(2)
            .frame(minWidth: 0, maxWidth: .infinity)
            .frame(minHeight: 0, maxHeight: .infinity)
    }
}
.frame(minWidth: 0, maxWidth: .infinity)
.frame(height: 70)

效果是：

但是现在我需要在顶部的每个文本中添加中心文本，因此我只需将视图替换为视图，然后："T"ViewColorVStack

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        VStack(alignment: .center) {
            Text("T")
        }
        .background(Color(UIColor.white.withAlphaComponent(0.1)))
        .cornerRadius(5)
        .padding(2)
        .frame(minWidth: 0, maxWidth: .infinity)
        .frame(minHeight: 0, maxHeight: .infinity)
    }
}
.frame(minWidth: 0, maxWidth: .infinity)
.frame(height: 70)

效果是错误的。为什么？

如何保持矩形视图的大小，就像没有一样？"T""T"

iOS Swift SwiftUI

HStack(alignment: .center, spacing: 0) {
    ForEach(0...6, id: \.self) { _ in
        VStack(alignment: .center) {
            Text("T")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(UIColor.white.withAlphaComponent(0.1)))
        .cornerRadius(5)
        .padding(2)
        .scaledToFill()
    }
}
.frame(maxWidth: .infinity, idealHeight: 70)
.scaledToFill()

正如@timbre所指出的那样，设置的位置确实会有所不同.frame()

0赞 Rob 11/16/2023 #2

我可能会建议观看 WWDC 2019 使用 SwiftUI 构建自定义视图，因为这个视频（尤其是前半部分）概述了基本的布局过程，说明了文本字段如何仅请求它们需要的空间。

但在这种情况下，正如音色所说，顺序很重要。只需先设置视图：frameVStack


struct ContentView: View {
    var body: some View {
        HStack(alignment: .center, spacing: 0) {
            ForEach(0...6, id: \.self) { _ in
                VStack(alignment: .center) {
                    Text("T")
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .frame(minHeight: 0, maxHeight: .infinity)
                .background(Color.white.opacity(0.1))       // we don’t need UIColor
                .cornerRadius(5)
                .padding(2)
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity)
        .frame(height: 70) 
    }
}

0赞 Gautier 11/16/2023 #3

在这里，您想使用覆盖层来实现您要实现的目标：

        HStack(alignment: .center, spacing: 0) {
            ForEach(0...6, id: \.self) { _ in
                Color.red.opacity(0.1)
                    .overlay {
                        Text("T")
                    }
                    .cornerRadius(5)
                    .padding(2)
            }
        }
        .frame(height: 70)

您不需要修饰符，因为默认情况下已经占用了所有可用空间。如果您不希望背景中有任何颜色，请将其设置为。.frame(minWidth: 0, maxWidth: .infinity)Color.clear

如何在 HStack 中创建元素宽度相等的 VStack？

How to create VStack within HStack with equal element widths?

评论

评论