SwiftUI List视图背景色修改及单元格适配问题求助

Hey there! Let's work through your two List-related issues step by step:

1. How to Modify List Background Color in SwiftUI #

You’ve got two solid options here—one using SwiftUI’s native tools (best for newer iOS versions) and another leveraging UIKit interop:

Native SwiftUI Approach (iOS 16+) #

Add .scrollContentBackground(.hidden) to your List to hide its default white background. This lets your ZStack’s gray background show through seamlessly:

List(teamResults) { team in
    TeamListCellView(teamResult: team)
}
.navigationBarTitle(Text("My team"),displayMode: .inline)
.scrollContentBackground(.hidden) // Hide List's default background

UIKit Interop Approach (iOS 15 & Below) #

Your existing UITableView.appearance() setup works, but make sure you also clear the table view cell’s default background to avoid white gaps:

.onAppear(perform: {
    self.getTeamData()
    UITableView.appearance().backgroundColor = .gray
    UITableView.appearance().separatorStyle = .none
    UITableViewCell.appearance().backgroundColor = .clear // Add this line
})

Resetting these values in onDisappear (like you already did) is smart to avoid affecting other parts of your app.

2. Fixing Cell Background Color & Non-Full-Width Cells #

The white cell background and full-width layout issues come from small misconfigurations in your cell setup. Let’s adjust your TeamListCellView:

Updated TeamListCellView Code #

struct TeamListCellView: View {
    var teamResult: TeamResult
    var body: some View {
        NavigationLink(destination: TeamDetail(teamResult1: teamResult)) {
            HStack { // Wrap content to align elements cleanly
                Image(uiImage: teamResult.teamImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width:70, height: 70)
                    .cornerRadius(35)
                VStack(alignment: .leading) {
                    Text(teamResult.groupName)
                    Text(teamResult.groupIntro)
                        .font(.subheadline)
                        .foregroundColor(Color.gray)
                }
            }
            .frame(width:200,height: 100)
            .background(Color.green)
            .cornerRadius(10)
        }
        .listRowBackground(Color.clear) // Let List's background show through
        .listRowInsets(EdgeInsets(top: 8, leading: 20, bottom: 8, trailing: 20)) // Add horizontal padding for non-full-width
    }
}

Key Changes Explained #

• .listRowBackground(Color.clear): Replaces your gray setting to eliminate the default white cell background—this lets your custom green cell background and the List’s gray background work together.
• .listRowInsets: Adds horizontal padding so your cell doesn’t stretch the full width of the List. Tweak the leading/trailing values to adjust how much space you want on either side.
• Wrapping content in an HStack: Ensures your image and text align properly without unexpected spacing.

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