使 VStack 中的 Text 占据 VStack 的整个宽度答案

【问题标题】：Make Text inside VStack take the whole width of the VStack使 VStack 中的 Text 占据 VStack 的整个宽度
【发布时间】：2020-09-04 03:32:19
【问题描述】：

我正在尝试制作两个位于 VStack 内的 Text 以占据父级（VStack）的整个宽度。

我完全没有想法。

这就是我所拥有的：

var body: some View {
        VStack(alignment: .center, spacing: 0) {

            Image("image")
                .resizable()
                .scaledToFill()
                .frame(height: 190)
                .clipped()

            VStack(alignment: .leading, spacing: 8) {
                Text(title)
                    .font(.title)
                    .background(Color.red)
                    .fixedSize(horizontal: false, vertical: true)

                Text(subtitle)
                    .font(.subheadline)
                    .background(Color.yellow)
                    .fixedSize(horizontal: false, vertical: true)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)
                .padding(.top, 24)
                .padding(.horizontal, 24)


            Button(buttonTitle) { print("Something") }
                .frame(maxWidth: .infinity, minHeight: 56)
                .background(Color.red)
                .foregroundColor(.white)
                .cornerRadius(56/2)
                .padding(.top, 32)
                .padding(.horizontal, 24)
                .padding(.bottom, 20.0)

        }.background(Color.blue)
            .cornerRadius(38)
            .frame(minWidth: 0, maxWidth: UIScreen.main.bounds.size.width - 48)
}

这就是它的外观：

我希望红色和黄色标签占据绿色 VStack 的整个宽度。

我怎样才能做到这一点？！

【问题讨论】：

标签： swift swiftui vstack

【解决方案1】：

删除两个文本上的 .fixedSize
改为添加 .frame(minWidth: 0, maxWidth: .infinity)
在 SwiftUI 中，事物的顺序也很重要，因此您需要将 .background 添加到 .frame 之后

最终结果是：

            Text("title")
                .font(.title)
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.red)

改为使其左对齐：

HStack {
     Text("title")
        .font(.title)
                    
        Spacer(minLength: 0)
}
.background(Color.red)

【讨论】：

它可以工作，但我失去了文本的对齐方式。我希望它左对齐，如果我实施您的更改，文本将居中。我完全迷路了。谢谢！！
我将左对齐代码添加到我的答案中。 Lmk 如果这行得通！

【解决方案2】：

这是可能的解决方案

        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.title)
                .frame(maxWidth: .infinity)    // << here 
                .background(Color.red)
                .fixedSize(horizontal: false, vertical: true)

            Text(subtitle)
                .font(.subheadline)
                .frame(maxWidth: .infinity)    // << here
                .background(Color.yellow)
                .fixedSize(horizontal: false, vertical: true)
        }
        .frame(maxWidth: .infinity)   // << here

【讨论】：