使样式为.bordered的SwiftUI按钮扩展为全宽

基础概念

在SwiftUI中，按钮（Button）是一种常见的UI元素，用于响应用户的点击事件。通过使用.bordered修饰符，可以为按钮添加边框样式。要使样式为.bordered的按钮扩展为全宽，需要对按钮的布局进行设置。

类型

视图修饰符：通过使用SwiftUI的视图修饰符，可以对按钮进行样式和布局的调整。
布局容器：使用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()
    }
}