Remove/change 部分 header SwiftUI 列表中的背景颜色

Question

在 SwiftUI 中使用简单的 List，我如何 change/remove 部分 header

的标准背景颜色

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

在 beta 4 中，不推荐使用 relativeWidth。更新代码以反映这一点。

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

import SwiftUI

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

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

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

struct FillAll: View {
    let color: Color
    
    var body: some View {
        GeometryReader { proxy in
            self.color.frame(width: proxy.size.width * 1.3).fixedSize()
        }
    }
}

Answer 2

另一种方法是设置 header 的框架：

        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 3

我尝试使用上面的自定义 header 代码，不幸的是它无法在 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 4

在您决定 clear 您的 List header 背景颜色之前，建议的解决方案一直有效。

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

1.This 解决方案会影响您应用中的所有列表部分：（或将其移动到您的 AppDelegate class）

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.With 您可以为应用中的每个列表自定义 List header 背景颜色：

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 5

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

（可选）如果您不想粘headers.

.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
    }
}.listStyle(GroupedListStyle()) // Leave off for sticky headers

Answer 6

我能够通过使用自定义修饰符使 header 变得清晰（在我的例子中变成白色）。我需要使用 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 7

您必须在 header 部分的视图中使用结合了 .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()

Remove/change 部分 header SwiftUI 列表中的背景颜色

Remove/change section header background color in SwiftUI List

swiftui