Question

在SwiftUI中使用简单的List，如何更改/删除节标题的标准背景颜色

struct ContentView : View {
    var body: some View {
        List {
            ForEach(0...3) { section in
                Section(header: Text("Section")) {
                    ForEach(0...3) { row in
                        Text("Row")
                    }
                }
            }
        }
    }
}

Answer 1

无需更改所有列表的外观或做任何奇怪的事情，只需：

将.listStyle(GroupedListStyle())放在您的List上。 注意：，这一步至关重要。
将部分上的listRowInsets设置为0。
将Section.backgroundColor设置为clear以删除默认颜色，或您要为其着色的任何颜色。

示例：

List {
    Section(header: HStack {
        Text("Header")
            .font(.headline)
            .foregroundColor(.white)
            .padding()

            Spacer()
    }
    .background(Color.blue)
    .listRowInsets(EdgeInsets(
        top: 0,
        leading: 0,
        bottom: 0,
        trailing: 0))
    ) {
        // your list items
    }
}

Answer 2

我尝试使用上面的自定义标头代码，但不幸的是无法使其在beta 6中运行。这导致我使用了ViewModifier：

public struct sectionHeader: ViewModifier{
var backgroundColor:Color
var foregroundColor:Color
public func body(content: Content) -> some View {
    content
    .padding(20)
    .frame(width: UIScreen.main.bounds.width, height: 28,alignment:
    .leading)
    .background(backgroundColor)
    .foregroundColor(foregroundColor)
}}

可以将以下内容添加到列表中的各个部分：

struct ContentView: View {
@ObservedObject var service = someService()
var body: some View {
    NavigationView {
        List{
            ForEach(someService.sections) {section in
                Section(header: Text(section.title).modifier(sectionHeader(backgroundColor: Color(.systemBlue), foregroundColor: Color(.white)))){

希望对别人有帮助！

Answer 3

通过使用自定义修饰符，我可以使标题清晰（在我的情况下为白色）。我需要使用listStyle（）修饰符，而以上所有内容都不适合我。

希望它对其他人有帮助！

List {
    Section(header: HStack {
        Text("Header Text")
            .font(.headline)
            .padding()

            Spacer()
    }
    ) {
ForEach(0...3) { row in
                        Text("Row")
                    }
    }
}.listStyle(GroupedListStyle()).listSeparatorStyle()

public struct ListSeparatorStyleModifier: ViewModifier {
    public func body(content: Content) -> some View {
        content.onAppear {
            UITableView.appearance().separatorStyle = .singleLine
            UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            UITableViewHeaderFooterView.appearance().tintColor = .clear
            UITableView.appearance().backgroundColor = .clear // tableview background
            UITableViewCell.appearance().backgroundColor = .clear

        }
    }
}

extension View {
    public func listSeparatorStyle() -> some View {
        modifier(ListSeparatorStyleModifier())
    }
}

Answer 4

不幸的是，没有快速的参数可以设置背景颜色。但是，您仍然可以这样做：

struct ContentView : View {
    var body: some View {
        List {
            ForEach(0...3) { section in
                Section(header: CustomeHeader(name: "Section Name", color: Color.yellow)) {
                    ForEach(0...3) { row in
                        Text("Row")
                    }
                }
            }
        }
    }
}

struct CustomeHeader: View {
    let name: String
    let color: Color

    var body: some View {
        VStack {
            Spacer()
            HStack {
                Text(name)
                Spacer()
            }
            Spacer()
        }.padding(0).background(color.relativeWidth(1.3))
    }
}

Answer 5

建议的解决方案一直有效，直到您决定clear标题背景List。

List标头自定义颜色的更好解决方案：

1。此解决方案会影响您应用中的所有“列表”部分：（或将其移至AppDelegate类中）

struct ContentView: View {

init() {
      UITableViewHeaderFooterView.appearance().tintColor = UIColor.clear
    }

var body: some View {
    List {
        ForEach(0 ..< 3) { section in
            Section(header:
                    Text("Section")
            ) {
                ForEach(0 ..< 3) { row in
                    Text("Row")
                }
            }
        }
     }
  }
}

2。使用此解决方案，您可以为应用中的每个列表自定义List标题背景颜色：

struct ContentView: View {
init() {
    UITableViewHeaderFooterView.appearance().tintColor = UIColor.clear
}

var body: some View {
    List {
        ForEach(0 ..< 3) { section in
            Section(header:
                HStack {
                    Text("Section")
                    Spacer()
                }
                .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                .background(Color.blue)

            ) {
                ForEach(0 ..< 3) { row in
                    Text("Row")
                }
            }
        }
     }
  }
}

Answer 6

另一种方法可以通过设置标题的框架来实现：

        VStack {
            List {
                ForEach(0...3) { section in
                    Section(header:
                        Text("Section")
                            .frame(minWidth: 0, maxWidth: .infinity,alignment:.leading)
                            .background(Color.blue.relativeWidth(2))
                    ) {
                        ForEach(0...3) { row in
                            Text("Row")
                        }
                    }
                }
            }
        }

Answer 7

您必须在标题部分的视图上使用与 .listRowInsets 结合的矩形

Section(header: headerSectionView) {
    Text("MySection")
}


private var headerSectionView: some View {
    Rectangle()
        .fill(Color.blue) // will make a blue header background
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        .overlay(
            Text("My Section Title")
                .padding(.horizontal), // You need this to add back the padding
            alignment: .leading
        )
}

Answer 8

我找到了更好的解决方案

UITableViewHeaderFooterView.appearance().backgroundView = .init()

在SwiftUI列表中删除/更改节标题背景颜色

8 个答案: