在SwiftUI中使VStack充满屏幕的宽度

小编典典

在SwiftUI中使VStack充满屏幕的宽度

swift

给定此代码：

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title)

            Text("Content")
                .lineLimit(nil)
                .font(.body)

            Spacer()
        }
        .background(Color.red)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

导致这种交互：

VStack即使标签/文本组件不需要整个宽度，如何填充屏幕的宽度？

我发现的一个窍门是在结构中插入一个空 HStack，如下所示：

VStack(alignment: .leading) {
    HStack {
        Spacer()
    }
    Text("Title")
        .font(.title)

    Text("Content")
        .lineLimit(nil)
        .font(.body)

    Spacer()
}

产生所需的设计：

有没有更好的办法？

阅读 1778

2020-07-07

共1个答案

小编典典

尝试将.frame修饰符与以下选项一起使用：

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)



    struct ContentView : View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
            .background(Color.red)
        }
    }

这被描述为是一个灵活的框架（请参阅文档），它将伸展以填充整个屏幕，并且当它有多余的空间时，它将使其内容居中。

2020-07-07