SwiftUI去掉List样式为GroupStyle顶部的空白

最新推荐文章于 2024-07-04 11:40:31 发布

humiaor

最新推荐文章于 2024-07-04 11:40:31 发布

阅读量379

点赞数 1

文章标签： swiftui list GroupStyle 去掉空白

本文链接：https://blog.csdn.net/humiaor/article/details/134831642

版权

当我们使用GroupedListStyle创建列表List时，如果我提供一个没有标题的分组部分时，该分组部分上方有空白空间。

struct Test: View {
    var body: some View {
        List{
            Section {
                Text("第一组第一行")
                Text("第一组第二行")
            }
            Section(header: Text("第二组")) {
                Text("第二组第一行")
                Text("第二组第二行")
            }
        }.listStyle(.grouped)
        .navigationBarTitle("List", displayMode: NavigationBarItem.TitleDisplayMode.inline)
    }
}

那么如何才能消除空白段呢？

1,给Section.header设置个无色的颜色并且高度设为0,还有行边距初始化

2,给List设置环境变量:defaultMinListHeaderHeight,它的值设置为0.1

具体代码如下:

struct Test: View {
    var body: some View {
        List{
            Section(header:Color.clear.frame(height: 0).listRowInsets(.init())) {//第一点
                Text("第一组第一行")
                Text("第一组第二行")
            }
            Section(header: Text("第二组")) {
                Text("第二组第一行")
                Text("第二组第二行")
            }
        }.listStyle(.grouped)
        .environment(\.defaultMinListHeaderHeight, 0.1)//第二点
        .navigationBarTitle("List", displayMode: NavigationBarItem.TitleDisplayMode.inline)
    }
}

运行效果如下：

同时我们发现Section的footer也有一段空白,消除方法一样,给footer也设置同样的属性

struct Test: View {
    var body: some View {
        List{
            Section(header:Color.clear.frame(height: 0).listRowInsets(.init()),
                    footer: Color.clear.frame(height: 0).listRowInsets(.init())) {//第一点
                Text("第一组第一行")
                Text("第一组第二行")
            }
            Section(header: Text("第二组")) {
                Text("第二组第一行")
                Text("第二组第二行")
            }
        }.listStyle(.grouped)
        .environment(\.defaultMinListHeaderHeight, 0.1)//第二点
        .navigationBarTitle("List", displayMode: NavigationBarItem.TitleDisplayMode.inline)
    }
}

运行效果如下: