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

我有

按钮

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)
        }
    }
}

但我想把它固定到superview的边缘（从后面到superview的尾部和前导）。像这样：

HStack

帮不上我的忙，它在期待。 固定的

框架

或宽度等于

UIScree。尺寸

不是灵活的解决方案。

我找到了一个解决方案：

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)
}

---

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

您可以使用

GeometryReader

：

苹果表示：

此视图将灵活的首选大小返回到其父布局

---

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

您需要使用

.frame（minWidth:0，maxWidth:.infinity）

修改器

添加下一个代码

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

“填充”修改器将允许您在边上留出一些空间

---

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

简单地在代码中添加以下内容将使按钮从边延伸到边。（如果需要，也可以添加填充）

整个按钮代码如下所示：

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)
        }
    }
}

---

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

只要用你想要的纵横比替换16.0/9.0即可

我花了大约一天的时间试图弄明白这一点，因为我不想使用GeometryReader或UIScreen.main.bounds（这不是跨平台的）

---

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

.infinity

是件好事，谢谢！但不可能将某些仪表设置为superview。但是如果将.frame（minWidth:0，maxWidth:.infinity）设置为

Text

，并将

padding（）

添加到

按钮

，它就会工作！如何为按钮添加特定高度？比如说，如果我必须将按钮的高度设置为43px，我该怎么做呢？一个小小的补充是，如果你想在两侧填充，现在你可以使用

.padding（.horizontal，20）

，而不需要单独提及左侧和右侧。为什么minWidth:0？当我删除它时，我发现我的视图比父视图大。我不理解这里的逻辑，我可以确认这可以将按钮设置为整个宽度的文件，但是我似乎不能为按钮的任何大小添加填充。这里的一个问题是按钮可在其可见边界之外点击。这意味着用户可以错误地点击按钮，即使他们点击的是空白。

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)
        }
    }
}

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