代码之家 › 专栏 › 技术社区 › intransigent_rocker

如何使SwiftUI工具栏背景完全展开以忽略安全区域?

swiftui swift

intransigent_rocker · 技术社区 · 6 月前

我试图在SwiftUI中创建一个底部工具栏,背景颜色完全扩展到屏幕边缘,完全忽略安全区域。然而,我经常遇到工具栏底部或两侧有空白的问题。

在下面的例子中 ignoresSafeArea(edges: .all) 似乎没有将黑色完全扩展到底部或侧面。我也添加了一张图片作为视觉示例:

理想情况下,我希望工具栏的黑色背景完全覆盖屏幕底部,完全忽略安全区域,并为不同的设备动态调整,而不会引入空白或不成比例的大小。

如何在SwiftUI中实现此效果?如果对我的实施有任何建议或改进,我们将不胜感激!

示例代码:

import SwiftUI

// Primary view for app
struct ContentView: View {

    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                let metrics = Metrics(geometry: geometry)
                ZStack{
                    AppColors.background.ignoresSafeArea()
                }

                VStack(spacing: metrics.verticalSpacing * 2) {
                    VStack(spacing: metrics.verticalSpacing * 2) {
                        SpacesView()
                        .frame(height: metrics.tileSize)

                        LettersView()
                            .frame(height: metrics.tileSize)
                    }
                    .padding(.horizontal, metrics.horizontalPadding)
                    .padding(.top, metrics.verticalSpacing * 3)

                    VStack {
                        if gameFinished {
                            GameFinishedView()
                        } else {
                            CurrentScoreView()
                        }
                    }
                    .padding(.horizontal, metrics.horizontalPadding)
                }
                .padding(.vertical, metrics.verticalSpacing * 2)
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    TopBar()
                }
                // Bottom tool bar integrated here
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
                            BottomBar()
                        }
                }
            }
        }
    }
}

// Bottom tool bar
struct BottomBar: View {

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // Black toolbar background to fully ignore safe areas
                Color.black
                    .ignoresSafeArea(edges: .all)

                // Toolbar content
                HStack {
                    SubmitButton()
                }
                .padding(.horizontal, 16)
                .padding(.vertical, 10)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
    }
}

1 回复 | 直到 6 月前

Sweeper 6 月前

你应该使用 toolbarBackground 设置工具栏的颜色。

.toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
        BottomBar()
    }
}
.toolbarBackgroundVisibility(.visible, for: .bottomBar)
.toolbarBackground(.black, for: .bottomBar)

在iOS 18之前, toolbarBackgroundVisibility (令人困惑地)也被称为 工具栏背景 ,所以你会写 .toolbarBackground(.visible, for: .bottomBar) .

这意味着你不需要所有这些 GeometryReader , ZStack , Color.black ,以及其他事物 BottomBar . 底部酒吧 可以是三个按钮——你甚至不需要 HStack .

var body: some View {
    YellowButton()
    Spacer()
    SubmitButton()
    Spacer()
    BlueButton()
}

如果您的目标是iOS 16之前的版本,请考虑使用 safeAreaInset 而不是 toolbar .

GeometryReader { geo in
    // ...
}
.safeAreaInset(edge: .bottom) {
    BottomBar() // in this case BottomBar does need the Color.black and other things that makes it fill the whole width
}