SwiftUI 将视图与 Stack 相结合

Question

我正在尝试使用 ZStack 中的文本和图像创建这样的设计，但我当前的实现根本不显示文本，我不知道为什么

           ZStack {
                Text("15")
                    .frame(alignment: .topTrailing)
                    .cornerRadius(10)
                Image(systemName: agree ? "hand.thumbsup" : "hand.thumbsdown")
                    .frame(width: 40, height: 40)
                    .foregroundColor(agree ? .green : .red)
                    .background(.gray)
                    .cornerRadius(8)
            }

Answer 1

在 ZStack 中，视图堆叠在 Z 轴上，第一个定义的视图位于堆栈的“底部”。因此，您的文本当前被图像覆盖，图像位于堆栈的较高位置。我已经解决了这个问题并添加了一个偏移量以将文本移动到右上角，这在您的代码中也不起作用。

struct ContentView: View {
    @State private var agree = true
    
    var body: some View {
        ZStack(alignment: .topTrailing) {
            Image(systemName: agree ? "hand.thumbsup" : "hand.thumbsdown")
                .frame(width: 60, height: 60)
                .foregroundColor(agree ? .green : .red)
                .background(.gray)
                .cornerRadius(8)
            Text("15")
                .foregroundColor(Color.green)
                .padding(6)
                .background(
                    Circle()
                        .strokeBorder(Color.green, lineWidth: 2)
                        .background(Circle().foregroundColor(.white))
                )
                .offset(x: 10, y: -10)
        }
    }
}

SwiftUI 将视图与 Stack 相结合

SwiftUI combine views with Stack

ios

swift

swiftui

zstack