SwiftUI 在按钮下方添加文本答案

【问题标题】：SwiftUI add Text belwo an ButtonSwiftUI 在按钮下方添加文本
【发布时间】：2021-12-10 21:50:20
【问题描述】：

所以我正在构建我的第一个应用程序，我试图在按钮下方获取一些文本，但它仍然应该是按钮的一部分。所以这就是我得到的：

       `Button{
            print("tapped")
        } label: {
            
            Image("Wand")
                .resizable()
                .frame(width: 100, height: 100)
        }
        .font(.title3)
        .background(Color.gray)
        .foregroundColor(.black)
        .cornerRadius(20)`

这看起来像这样： Button

但我想要这样： Button2

我尝试将“VStack”放入标签中，但文本停留在灰色按钮中

【问题讨论】：

使用带有 VStack 的自定义标签样式。示例在这里stackoverflow.com/a/69687031/12299030。
听起来你想要一个VStack 和一个onTapGesture 和一个RoundedRectangle 和一个Image overlay 在顶部，一个Text 在底部`。

标签： ios swift iphone swiftui

【解决方案1】：

我觉得对你有帮助

public struct VerticalLabelStyle: LabelStyle {
    public let spacing: CGFloat
    
    public init(spacing: CGFloat = 8) {
        self.spacing = spacing
    }
    
    public func makeBody(configuration: Configuration) -> some View {
        VStack(alignment: .center, spacing: spacing) {
            configuration.icon
            configuration.title
        }
    }
}


public struct ContentView: View {
    @State private var text: String = ""

    public var body: some View {
        Label {
            Text(text)
        } icon: {
            Image(systemName: "gamecontroller.fill")
                .resizable()
                .frame(width: 44, height: 44, alignment: .center)
        }
        .frame(width: 100, height: 100)
        .labelStyle(VerticalLabelStyle())
        .onTapGesture(perform: onTap)

    }
    
    func onTap() {
        text = "tapped"
    }
}

如果有什么问题，欢迎提问

【讨论】：

为什么不使用 Button 以 Label 作为正文？
是的，我认为我们可以使用具有Label 作为主体的Button。但我首先提到的图像和文字是Label，我提供了这个解决方案）

【解决方案2】：

您对 VStack 的想法是正确的方法。你只需要记住在哪里放置你的修饰符。在您的情况下，您将它们放在按钮级别。这意味着它们将应用于整个标签，这就是您的文本位于灰色背景内的原因。只需更新修改器在 VStack 中的位置。这是一个简短的例子：

    Button {
        // Your button action
    } label: {
        VStack {
            RoundedRectangle(cornerRadius: 25)
                .frame(width: 100, height: 100)
                .padding()
                .background(Color.black) // new position of background modifier that is only applied on your Image (here a rectangle)
            Text("Foo")
                .font(.title3)
                .foregroundColor(.black)
            // These modifiers could stay on button level, but I moved them here to explicitly show where they applied
        }
    }

请记住，您可以将任何视图放在按钮的标签内，在这种情况下，文本是按钮的一部分，如果用户点击它就会触发操作。如果您只希望 Image 是点击操作，请将您的按钮包装在 VStack 中，该 VStack 仅包含 Image 和 Text 作为 Stack 的第二部分，如下所示：

    VStack {
        Button {
            // Your button action
        } label: {
            VStack {
                RoundedRectangle(cornerRadius: 25)
                    .frame(width: 100, height: 100)
                    .padding()
                    .background(Color.black)
            }
        }
        Text("Foo")
            .font(.title3)
            .foregroundColor(.black)
    }

【讨论】：