ios - SwiftUI-HStack NavigationLink“按钮”分别向两个元素添加按钮样式？

Question

我正在构建我的第一个应用程序，并且在HStack中遇到.buttonStyle的不清楚的问题。
这是我的.buttonStyle代码:

struct GradientBackgroundStyle: ButtonStyle {

func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .foregroundColor(Color.white)
        .font(.title)
        .padding()
        .frame(width: 300)
        .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing))
        .cornerRadius(15.0)
        .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
}

}
这是我体内的代码:

var body: some View {
    NavigationView {
        VStack(spacing: 15.0) {
            Divider()
            HStack() {
                NavigationLink(destination: TestView()) {
                    Text("1")
                }.buttonStyle(GradientBackgroundStyle())
        }
        HStack {
            NavigationLink(destination: TestView()) {
                Text("2")
            }.buttonStyle(GradientBackgroundStyle())
        }
        HStack {
            NavigationLink(destination: TestView()) {
                Image(systemName: "star.fill")
                Text("Tasks")
            }.buttonStyle(GradientBackgroundStyle())
        }
        Spacer()
    }
        
    .navigationBarTitle(
            Text("Title"))

我期望第三个NavigationLink发生的事情是这样的:
Image+text one button
但是我得到的是:
Image+text seperated
我尝试摆弄，但似乎无法弄清楚是什么原因造成的。在此先感谢您的帮助!

Answer 1

您将需要一个同时包含图像和文本的HStack。

      HStack {
          NavigationLink(destination: TestView()) {
            HStack {
              Image(systemName: "star.fill")
              Text("Tasks")
            }
          }.buttonStyle(GradientBackgroundStyle())
      }