SwiftUI中Text("").toolbar导致内容区顶部留白问题修复咨询

问题根源 #

你之前用Text("")作为toolbar的载体，哪怕是空字符串，SwiftUI的Text组件默认会保留行高和内边距，这就是顶部留白的原因。而且把带toolbar的Text单独放在ContentView最上方，也会让这个Text的布局空间挤占内容区域，导致顶部空出一块。

解决方法 #

方法一：直接给根View加Toolbar（推荐） #

不需要单独写ToolbarView，把toolbar修饰符直接作用在ContentView的根容器上，这样toolbar属于窗口标题栏，完全不会影响内容布局：

修改后的ContentView代码：

struct ContentView: View {  
    var body: some View {
        GeometryReader { geometry in
            HStack {
                Group {
                    Text( "For Content" )
                }
                .frame( maxWidth: .infinity, maxHeight: .infinity )
                .background(Color.white)

                Group {
                    Text( "My panel" )
                }
                .frame( width: 300 )
                .background( .black )
                .animation(.easeInOut( duration: 0.5 ))
                .transition(.move(edge: .trailing))
            }
        }
        // 直接在这里加toolbar
        .toolbar {
            Button( "Hi!", systemImage: "rectangle" ) {}
        }
    }
}

方法二：替换Text为无空间载体（如果需要保留ToolbarView） #

如果必须单独封装ToolbarView，用Color.clear替代Text("")，并设置它的高度为0，这样既满足toolbar需要依附于View的要求，又不会占据任何空间：

修改后的ToolbarView代码：

struct ToolbarView: View {
    var body: some View {
        Color.clear
            .frame(height: 0) // 完全消除载体的布局空间
            .toolbar {
                Button( "Hi!", systemImage: "rectangle" ) {}
            }
    }
}

这样修改后，顶部的留白就会消失，toolbar依然正常显示在窗口标题栏，同时你的内容布局也能保持原有样式。

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