带有图像和文本的 SwiftUI 按钮无法按预期工作

Question

我成功创建了一个包含图像和文本的按钮：

当我将鼠标悬停在按钮上时，它会按预期工作。但是，我无法减少半径。我本以为解决这个问题可能很简单。然而，我在网上搜索并询问ChatGPT如何做到这一点，但我无法管理。这是我到目前为止的代码：

            Button(action: {
                domainManager.bcDomain.setCase1()
            }) {
                VStack(spacing: 8) { // Add spacing between image and text
                    Image("schematic_cantilever")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 150, height: 100)

                    Text("Case 1")
                        .font(.headline)
                        .foregroundColor(.primary) // Adaptive text color
                }
                .padding(20)
            }

Answer 1

尝试使用

ZStack

和

RoundedRectangle

来获得圆角的简单方法 您可以调整的按钮。

示例代码：

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("---> action") // <--- for testing
        }) {
            ZStack {
                RoundedRectangle(cornerRadius: 40)  // <--- here, adjust as required
                VStack(spacing: 8) { // Add spacing between image and text
                    Image(systemName: "globe")  // <--- for testing
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 150, height: 100)
                        .foregroundColor(.red)
                    
                    Text("Case 1")
                        .font(.headline)
                        .foregroundColor(.primary) // Adaptive text color
                }.padding(20)
            }
        }
        .frame(width: 222, height: 111) // <--- for size
    }
}