如何在 SwiftUI 中使视图宽度等于 superview

Question

我有Button

struct ContentView : View {
    var body: some View {
        HStack {
            Button(action: {}) {
                Text("MyButton")
                    .color(.white)
                    .font(Font.system(size: 17))
            }
            .frame(height: 56)
            .background(Color.red, cornerRadius: 0)
        }
    }
}

但我想将它固定到 supreview 的边缘（拖到 superview 的尾随和前导）。像这样：

HStack对我没有帮助，而且很期待。固定 frame 或宽度等于 UIScree.size 不是灵活的解决方案。

Answer 1

我找到了一个解决方案：

var body: some View {
    Button(action: {}) {
            HStack {
                Spacer()
                Text("MyButton")
                    .color(.white)
                    .font(Font.system(size: 17))
                Spacer()
            }
            .frame(height: 56)
            .background(Color.red, cornerRadius: 0)
        }.padding(20)
}

但我不确定它是否是最好的。可能有人会找到更优雅的解决方案/

Answer 2

您可以使用 GeometryReader：https://developer.apple.com/documentation/swiftui/geometryreader

根据 Apple 的说法：

This view returns a flexible preferred size to its parent layout.

这是一个灵活的解决方案，因为它会根据父布局的变化而变化。

Answer 3

您需要使用.frame(minWidth: 0, maxWidth: .infinity)修饰符

添加下一个代码

        Button(action: tap) {
            Text("Button")
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.red)
        }
        .padding([.leading, .trailing], 20)

填充修饰符将允许您在边缘形成一些 space。

请记住修饰符的顺序很重要。因为修饰符实际上是包装视图的函数（它们不会更改视图的属性）

Answer 4

只需在您的代码中添加以下内容，即可使按钮从边延伸到边。（如果需要，您也可以添加填充）

.frame(minWidth: 0, maxWidth: .infinity)

整个按钮代码如下所示：

struct ContentView : View {
    var body: some View {
        HStack {
            Button(action: {}) {
                Text("MyButton")
                    .color(.white)
                    .font(Font.system(size: 17))
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding(.top, 8)
            .padding(.bottom, 8)
            .background(Color.red, cornerRadius: 0)
        }
    }
}

Answer 5

这是一个纯 SwiftUI 解决方案，您想要填充父级的宽度但将高度限制为任意纵横比（假设您想要方形图像）：

        Image("myImage")
            .resizable()
            .scaledToFill()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .aspectRatio(16.0 / 9.0, contentMode: .fit)

只需将 16.0 / 9.0 替换为您想要的任何纵横比即可。

我花了大约一天的时间来解决这个问题，因为我不想使用 GeometryReader 或 UIScreen.main.bounds（这不是跨平台的）

编辑：找到更简单的方法。

如何在 SwiftUI 中使视图宽度等于 superview

How to make width of view equal to superview in SwiftUI

ios13

swiftui