如何在SwiftUI中复现Telegram聊天文件夹布局并减小导航栏间距

你遇到的导航栏与文件夹列表间距过大的问题，是SwiftUI的容器默认边距规则导致的，按照以下步骤修改即可：

• 首先将包裹topMenu和Form的VStack设置spacing: 0，消除两个组件之间的系统默认间距
• 给Form添加.sectionHeaderTopPadding(0)修饰符（适配iOS 15+），移除列表顶部默认的额外留白
• 可自行调整topMenu的上下内边距，匹配Telegram对应栏位的高度

修改后的核心代码示例：

var body: some View {
    NavigationView {
        // 新增spacing: 0消除组件间默认间距
        VStack(spacing: 0) {
            topMenu
                // 可自行调整上下padding值适配目标高度
                .padding(.vertical, 8)
            Form {
                if showMainView {
                    ForEach(allItems, id: \.self) { itms in
                        Text(itms)
                    }
                }
                if showFirstView {
                    ForEach(allItems.filter({ $0.first == "F" || $0.first == "G" }), id: \.self) { itms in
                        Text(itms)
                    }
                    
                }
                if showSecondView {
                    Text("This folder is still empty!")
                }
            }
            // 移除列表顶部默认留白
            .sectionHeaderTopPadding(0)
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                HStack {
                    Text("My List")
                    Spacer()
                }
                .padding(.leading)
            }
        }
        .navigationBarItems(trailing: showMainView == true ? editButton : nil)
    }
}

如果需要适配iOS 15以下的版本，可以把.sectionHeaderTopPadding(0)替换为.padding(.top, -16)，数值可根据实际显示效果微调。

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