如何在 SwiftUI 中为 Text 提供按钮外观？

Question

我正在尝试构建一个具有 Buttons 而不是 links 的 NavigationStack。

虽然我知道如何使Text看起来像Button，但我不确定如何在按下Button时使其外观发生变化。

下面的代码使用两个 @State 变量，以便我可以减小假 Button's 的大小。但是，对于所有不同的 .onTapX 排列，当按下按钮时，我找不到正确的排列来修改 @State 变量。

谢谢你

import SwiftUI

struct MainMenuWithStack: View {
    
    @State var butW : CGFloat = 150
    @State var butH : CGFloat = 75
    @State var curTG = "--"
    var body: some View {
        
        NavigationStack{
            
            VStack(spacing: 5) {
                
                NavigationLink(destination: HomePage()){
                    Text("Home")
                        .foregroundStyle(.white)
                        .font(.title)
                        .frame(width: butW, height: butH)
                        .background(.blue)
                        .cornerRadius(10)
                }
            }
        }
    }
}


#Preview {
    MainMenuWithStack()
}

Answer 1

修饰符

.buttonStyle

可以应用于

NavigationLink

，其方式与应用于

Button

相同。

以下内容与您示例中的样式非常接近：

NavigationStack{
    VStack(spacing: 5) {
        NavigationLink(destination: HomePage()) {
            Text("Home")
                .font(.title)
                .padding()
        }
    }
    .buttonStyle(.borderedProminent)
}

如果您想将所有样式封装在一个地方，您还可以实现自己的自定义

ButtonStyle

。这使得按下按钮时可以通过检查属性值

ButtonStyleConfiguration.isPressed

来应用不同的样式。