[SwiftUI]：TabBar 后面不透明

Question

我刚刚开始学习 SwiftUI，我有一个问题：为什么我的 TabBar 在滚动时不透明？

这是我的代码：

var body: some View {
    VStack {
        ZStack(alignment: .bottomTrailing) {
            ScrollViewReader { scroll in
                // my bubbles here
            }
            .padding(.bottom, 70)
            .scrollDismissesKeyboard(.interactively)
        
            ZStack {
                HStack {
                    TextField("Type your message", text: $newMessage)
                        .padding(9)
                        .background(
                            RoundedRectangle(cornerRadius: 19)
                                .foregroundColor(Color(.systemGray6))
                        )
                }
                .padding()
            }
        }
    }
}

谢谢您，祝您有美好的一天！

Answer 1

要拥有半透明选项卡栏，您必须将文本字段和发送按钮放在

ToolbarItem

中，如下所示：

var body: some View {
    ScrollView {
        ForEach(0..<100) {_ in
            Capsule().fill(Color.blue)
                .frame(height: 50)
                .frame(maxWidth: .infinity)
                .padding(.horizontal)
        }
    }
    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            HStack {
                TextField("Type your message", text: .constant(""))
                    .textFieldStyle(.roundedBorder)
                Button("Send", action: {})
            }
        }
    }
}

这会给您工具栏和选项卡栏上的模糊背景：