在SwiftUI中,按钮(Button)是一种常见的UI元素,用于响应用户的点击事件。通过使用.bordered
修饰符,可以为按钮添加边框样式。要使样式为.bordered
的按钮扩展为全宽,需要对按钮的布局进行设置。
GeometryReader
或HStack
等布局容器来控制按钮的宽度。以下是一个示例代码,展示如何使样式为.bordered
的SwiftUI按钮扩展为全宽:
import SwiftUI
struct ContentView: View {
var body: some View {
GeometryReader { geometry in
VStack {
Button(action: {
print("Button tapped!")
}) {
Text("Submit")
.font(.headline)
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(8)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color.black, lineWidth: 1)
.opacity(0.5)
)
}
.frame(width: geometry.size.width) // 设置按钮宽度为全宽
.buttonStyle(BorderedProminentButtonStyle())
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
GeometryReader
:通过GeometryReader
获取视图的尺寸信息,从而设置按钮的全宽。.frame(width:)
修饰符将按钮的宽度设置为屏幕的全宽。.buttonStyle()
修饰符应用自定义的按钮样式,确保按钮具有.bordered
样式。通过以上步骤,可以轻松实现样式为.bordered
的全宽按钮。