SwiftUI List中移除按钮白色边距或设置边距背景色的方法

问题描述 #

我有一个包含3个Section的List，第一和第三个Section用于展示数据行，中间添加了一个按钮。但按钮周围出现了白色边距，希望移除这些边距，或者将边距区域设置为按钮的蓝色背景色。

原代码：

import SwiftUI
import Foundation

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    Section(header: Text("Section A")) {
                        Text("Section A")
                    }
                    
                    Button { } label: {
                        HStack {
                            Spacer()
                            Image(systemName: "calendar.badge.plus").font(.body.bold()).foregroundColor(Color.blue).padding(.trailing, 5.0)
                            Text("Add to Calendar").font(.body.bold()).foregroundColor(Color.blue)
                            Spacer()
                        }
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                    }
                    .frame(width: UIScreen.main.bounds.width - 60.0, height: 44.0)
                    .background(Color.blue.opacity(0.5))
                    .cornerRadius(10.0)
                    .contentShape(Rectangle())
                    
                    Section(header: Text("Section C")) {
                        Text("Section C")
                    }
                }
            }
        }
    }
}

解决方案 #

方法1：移除行内边距并统一背景色 #

给按钮添加listRowInsets清除List行的默认内边距，同时用listRowBackground将行背景设为按钮的蓝色半透明色，让边距区域与按钮背景融为一体：

Button { } label: {
    HStack {
        Spacer()
        Image(systemName: "calendar.badge.plus")
            .font(.body.bold())
            .foregroundColor(.blue)
            .padding(.trailing, 5.0)
        Text("Add to Calendar")
            .font(.body.bold())
            .foregroundColor(.blue)
        Spacer()
    }
    .frame(maxWidth: .infinity)
    .contentShape(Rectangle())
}
.frame(height: 44.0)
.background(Color.blue.opacity(0.5))
.cornerRadius(10.0)
.contentShape(Rectangle())
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
.listRowBackground(Color.blue.opacity(0.5))

方法2：将按钮包裹在自定义Section中 #

把按钮放进独立Section，隐藏Section头部并清除内边距、分隔线，让按钮与上下Section无缝衔接：

Section(header: EmptyView()) {
    Button { } label: {
        HStack {
            Spacer()
            Image(systemName: "calendar.badge.plus")
                .font(.body.bold())
                .foregroundColor(.blue)
                .padding(.trailing, 5.0)
            Text("Add to Calendar")
                .font(.body.bold())
                .foregroundColor(.blue)
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .contentShape(Rectangle())
    }
    .frame(height: 44.0)
    .background(Color.blue.opacity(0.5))
    .cornerRadius(10.0)
    .contentShape(Rectangle())
}
.listSectionSeparator(.hidden)
.listSectionSpacing(0)
.listRowInsets(EdgeInsets())

方法3：全局调整List样式 #

如果希望整个List的行都取消默认边距，可以给List添加plain样式并统一设置行内边距（会影响所有Section的行）：

List {
    // 原Section和按钮代码
}
.listStyle(.plain)
.listRowInsets(EdgeInsets())

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