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

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

根据苹果公司的报道：

此视图将灵活的首选尺寸返回其父版式。

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

Answer 2

您需要使用function ButtonGroup ( { prop1, prop2, callBack1, callBack2 } ) { return (<div></div>) }修饰符

添加下一个代码

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

填充修饰符将使您在边缘有一些空间。

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

Answer 3

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

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

整个Button代码如下所示：

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 4

我找到了一种解决方法：

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 5

这是一个纯粹的SwiftUI解决方案，您需要在其中填充父级的宽度，但将高度限制为任意的宽高比（例如，您想要方形图像）：

            ZStack {
                Image("myImage")
                    .resizable()
                    .scaledToFill()
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                    .clipped()
            }
            .aspectRatio(1.0, contentMode: .fill)

只需将1.0替换为所需的纵横比即可。

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

swiftUI如何使视图的宽度等于超级视图

5 个答案: