SwiftUI中如何在列表下方无缝放置悬浮‘+’按钮？

可行方案：自定义列表行并移除多余分隔线/间距 #

要实现目标待办应用的效果——让"+"按钮无缝贴合列表最后一项，无间隙也无生硬边缘，这里提供两种可靠的实现方式：

方式一：将按钮作为列表的最后一行，调整默认样式

直接把"+"按钮加入列表内容中，通过修改列表的分隔线、行背景和整体样式来消除生硬感：

var body: some View {
    List {
        ForEach(items, id: \.self) { item in
            HStack {
                Image(systemName: "circle") // 复选框占位
                Text(item)
            }
        }
        .onDelete(perform: deleteItem)
        
        // 把按钮作为列表的最后一行
        Button(action: addItem) {
            HStack {
                Image(systemName: "plus")
                    .foregroundColor(.black)
                // 可选：添加文字，根据设计需求调整
                // Text("添加新任务")
            }
        }
        .listRowBackground(Color.clear)
        .listRowSeparator(.hidden) // 隐藏按钮行的分隔线
    }
    .listStyle(.plain) // 使用plain样式减少默认间距
    .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)) // 统一所有行的内边距
}

方式二：用LazyVStack替代List，完全自定义布局

如果List的默认样式限制太多，用LazyVStack配合ScrollView可以完全控制每个元素的间距和边缘：

var body: some View {
    ScrollView {
        LazyVStack(spacing: 0) { // 行间距设为0，实现无缝衔接
            ForEach(items, id: \.self) { item in
                HStack {
                    Image(systemName: "circle")
                    Text(item)
                }
                .padding(.vertical, 12)
                .padding(.horizontal, 16)
                .border(.gray.opacity(0.2), edge: .bottom) // 自定义底部分隔线，和设计匹配
            }
            
            Button(action: addItem) {
                HStack {
                    Image(systemName: "plus")
                        .foregroundColor(.black)
                }
                .padding(.vertical, 12)
                .padding(.horizontal, 16)
            }
        }
    }
}

之前方案的问题解析 #

1. VStack嵌套List+按钮：List本身带有默认的底部内边距/安全区适配，导致按钮和列表最后一项之间出现生硬的边缘断开。
2. Section包裹按钮：Section默认自带上下间距和标题区域，必然会产生多余空白，和列表项间距过大。
3. 错误使用Section footer：你把List放在Section内部，footer会被Section的样式干扰，再加上List本身的底部边缘，导致按钮位置完全不符合预期。

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