iOS16.4中fullScreenCover底部Toolbar添加分割线及背景色的方法

问题描述 #

在iOS 16.4里，用fullScreenCover打开视图并添加顶部、底部Toolbar时，顶部Toolbar会自动生成水平分割线，但底部Toolbar没有这个效果，甚至没法通过添加overlay来手动创建分割线。需要实现给底部Toolbar加上和顶部类似的水平分割线。

补充问题 #

如果实在加不了分割线，该怎么设置底部Toolbar的背景色？之前尝试加overlay或其他元素时都报错了。

现有代码片段 #

.fullScreenCover(isPresented: $showAttachment) {
    NavigationStack {
        CustomView
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .confirmationAction) {
                    Button {
                        self.showAttachment = false
                        self.showAttachmentHeader = false
                    } label: {
                        Text(Strings.done).font(.body.bold())
                    }
                }

                ToolbarItemGroup(placement: .bottomBar) {
                    // TODO: Add a button to "share image"
                    Spacer()
                    VStack(alignment: .center) {
                        Text("6 Attachments")
                            .font(Font.custom("SF Pro Text", size: 12))
                            .multilineTextAlignment(.center)
                            .foregroundColor(.black)

                        Text("1 of 6")
                            .font(Font.custom("SF Pro Text", size: 11))
                            .kerning(0.066)
                            .multilineTextAlignment(.center)
                            .foregroundColor(Color(red: 0.24, green: 0.24, blue: 0.26).opacity(0.6))
                    }
                    Spacer()
                }
            }
            .toolbarBackground(Color.lightGray, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar(.visible, for: .navigationBar)
            .toolbarBackground(Color.lightGray, for: .bottomBar)
            .toolbarBackground(.visible, for: .bottomBar)
            .toolbar(.visible, for: .bottomBar)
    }
}

解决方案 #

方法一：添加底部Toolbar分割线 #

iOS 16.4里底部Toolbar默认没有分割线，可直接在ToolbarItemGroup里添加顶部边框来模拟系统顶部Toolbar的分割线效果，修改后的ToolbarItemGroup代码如下：

ToolbarItemGroup(placement: .bottomBar) {
    // 顶部分割线，匹配系统默认样式
    Rectangle()
        .frame(height: 0.5)
        .foregroundColor(Color(UIColor.systemGray4))
        .ignoresSafeArea(edges: .horizontal)
    
    // 原有内容
    Spacer()
    VStack(alignment: .center) {
        Text("6 Attachments")
            .font(Font.custom("SF Pro Text", size: 12))
            .multilineTextAlignment(.center)
            .foregroundColor(.black)

        Text("1 of 6")
            .font(Font.custom("SF Pro Text", size: 11))
            .kerning(0.066)
            .multilineTextAlignment(.center)
            .foregroundColor(Color(red: 0.24, green: 0.24, blue: 0.26).opacity(0.6))
    }
    Spacer()
}

用Rectangle创建高度0.5的线条，颜色选系统默认分割线的systemGray4，再通过ignoresSafeArea让线条横向铺满屏幕，效果和顶部Toolbar的分割线一致。

方法二：设置底部Toolbar背景色 #

如果添加分割线遇到问题，可通过给ToolbarItemGroup嵌套背景容器来确保背景色生效，同时保留原有toolbarBackground设置：

ToolbarItemGroup(placement: .bottomBar) {
    VStack {
        // 原有内容
        Spacer()
        VStack(alignment: .center) {
            Text("6 Attachments")
                .font(Font.custom("SF Pro Text", size: 12))
                .multilineTextAlignment(.center)
                .foregroundColor(.black)

            Text("1 of 6")
                .font(Font.custom("SF Pro Text", size: 11))
                .kerning(0.066)
                .multilineTextAlignment(.center)
                .foregroundColor(Color(red: 0.24, green: 0.24, blue: 0.26).opacity(0.6))
        }
        Spacer()
    }
    .frame(maxWidth: .infinity)
    .background(Color.lightGray)
}

这样背景色会完全覆盖底部Toolbar区域，避免出现透明或不生效的问题。

注意事项 #

• 确认CustomView没有设置额外的safeAreaInset或其他布局修饰符干扰Toolbar布局
• iOS 16+中ToolbarItemGroup布局优先级较高，直接加分割线时用VStack包裹内容和分割线即可避免布局冲突

内容的提问来源于stack exchange，提问作者tech_human