如何让SwiftUI中NavigationLink列表行完全透明？

核心问题分析 #

List中的NavigationLink本质封装在UIKit层的UITableViewCell中，即便设置了listRowBackground(.clear)，UIKit层面的cell默认背景、以及NavigationLink自带的可点击区域背景仍会遮挡下方渐变。以下是两种可靠解决方案，均不会引发编译问题：

方案1：纯SwiftUI实现（无需依赖SwiftUIIntrospect） #

通过修改NavigationLink的按钮样式、确保行内所有元素背景透明，彻底移除遮挡：

import SwiftUI

let gradientBg = LinearGradient(
    colors: [.teal, .blue],
    startPoint: .top, endPoint: .bottom
)

struct TestView: View {
    @State private var valuesList: [String] = ["Testing1", "Testing2", "Testing3"]
    
    var body: some View {
        ZStack {
            gradientBg
                .ignoresSafeArea()
            
            VStack {
                NavigationStack {
                    List {
                        ForEach(valuesList, id: \.self) { value in
                            NavigationLink(value: value) {
                                RowView(name: value)
                            }
                            .buttonStyle(.plain) // 关键：移除NavigationLink默认可点击背景
                            .listRowBackground(Color.clear)
                            .listRowSeparator(.hidden)
                        }
                    }
                    .scrollContentBackground(.hidden)
                    .navigationDestination(for: String.self) { selectedSong in
                        VersionsView()
                    }
                }
            }
            .padding()
        }
    }
}

struct RowView: View {
    var name: String
    
    var body: some View {
        ZStack {
            Rectangle()
                .fill(.red)
                .frame(width: 300, height: 75)
                .clipShape(RoundedRectangle(cornerRadius: 20))
                .frame(maxWidth: .infinity)
            
            Text(name)
                .font(.title)
        }
        .background(Color.clear) // 确保RowView本身背景透明
    }
}

// 补充VersionsView定义避免编译错误
struct VersionsView: View {
    var body: some View {
        Text("Versions View")
    }
}

关键修改点： #

• 给NavigationLink添加.buttonStyle(.plain)：移除其默认的可点击区域背景（含选中高亮效果）
• 给RowView添加.background(Color.clear)：避免行内元素自带背景遮挡
• 保留.listRowBackground(Color.clear)和.scrollContentBackground(.hidden)：清除List的行背景和整体背景

方案2：结合SwiftUIIntrospect针对UIKit层处理（适合复杂场景） #

如果纯SwiftUI方案仍有残留背景，可通过SwiftUIIntrospect直接修改UITableViewCell的背景属性，彻底清除UIKit层面的遮挡：

import SwiftUI
import SwiftUIIntrospect

let gradientBg = LinearGradient(
    colors: [.teal, .blue],
    startPoint: .top, endPoint: .bottom
)

struct TestView: View {
    @State private var valuesList: [String] = ["Testing1", "Testing2", "Testing3"]
    
    var body: some View {
        ZStack {
            gradientBg
                .ignoresSafeArea()
            
            VStack {
                NavigationStack {
                    List {
                        ForEach(valuesList, id: \.self) { value in
                            NavigationLink(value: value) {
                                RowView(name: value)
                            }
                            .listRowBackground(Color.clear)
                            .listRowSeparator(.hidden)
                        }
                    }
                    .scrollContentBackground(.hidden)
                    .navigationDestination(for: String.self) { selectedSong in
                        VersionsView()
                    }
                    // 针对UITableView的Cell设置透明背景
                    .introspect(.tableView, on: .iOS(.v16, .v17, .v18)) { tableView in
                        tableView.backgroundColor = .clear
                        // 批量设置已显示cell背景透明
                        tableView.visibleCells.forEach { cell in
                            cell.backgroundColor = .clear
                            cell.selectedBackgroundView = UIView() // 移除选中高亮背景
                        }
                        // 注册默认透明cell，避免滚动加载新cell时恢复背景
                        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "TransparentCell")
                    }
                }
                .introspect(.navigationStack, on: .iOS(.v16, .v17, .v18)) {
                    $0.viewControllers.forEach { controller in
                        controller.view.backgroundColor = .clear
                    }
                }
            }
            .padding()
        }
    }
}

// RowView和VersionsView定义同方案1

关键修改点： #

• 通过.introspect(.tableView)直接设置UITableView背景透明
• 遍历visibleCells设置backgroundColor = .clear，并移除选中时的高亮视图
• 注册默认透明cell，解决滚动加载新cell时的背景恢复问题

常见问题说明 #

1. 为什么之前的方法无效？
   • listRowBackground(.clear)仅修改SwiftUI层面行背景，无法触及UIKit的UITableViewCell默认背景
   • NavigationLink自带的可点击区域背景需要通过.buttonStyle(.plain)移除
2. 编译耗时问题？
   • 上述方案仅在introspect闭包中做简单属性修改，不会引发编译性能问题
3. 如何自定义选中高亮？
   • 方案1中.buttonStyle(.plain)会移除默认高亮，若需自定义，可在RowView中添加@State变量结合onTapGesture实现

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