iOS17+ iPad端透明List搭配ContextMenu显示故障求助

需要实现一个透明背景的List（适配特定背景需求），且每个列表项需添加ContextMenu，适配iOS17及以上版本。当前遇到的问题是：当列表项高度超过List高度，且设置了.listRowBackground(Color.clear)修饰符时，iPad端出现显示故障（滚动列表时内容出现异常视觉错乱）。该故障无法在预览或模拟器中复现，暂不确定iPhone端是否存在。

复现代码 #

import SwiftUI

struct ContentView: View {
    var message = Array(0 ..< 200).map { _ in "SOME SOME SOME SOME" }.joined(separator: "\n")
    var body: some View {
        List {
            Text(message)
                .contextMenu {
                    Button {
                        // Some action
                    } label: {
                        Text("Some Action")
                    }
                }
                .listRowBackground(Color.clear)
        }
    }
}

已尝试的解决方法 #

• 使用Color.white.opacity(0.01)替代Color.clear
• 尝试自定义ContextMenu预览，但即使是简单Text，预览尺寸也完全错误

可行解决方案 #

方案1：用UIColor.clear包装的Color替代原生Color.clear

iOS17 iPad端中，直接使用Color.clear会触发List行背景的渲染逻辑异常，改用Color(UIColor.clear)可以保持完全透明的同时规避该问题：

import SwiftUI

struct ContentView: View {
    var message = Array(0 ..< 200).map { _ in "SOME SOME SOME SOME" }.joined(separator: "\n")
    var body: some View {
        List {
            Text(message)
                .contextMenu {
                    Button {
                        // Some action
                    } label: {
                        Text("Some Action")
                    }
                }
                .listRowBackground(Color(UIColor.clear))
        }
    }
}

方案2：使用.scrollContentBackground(.hidden)隐藏List默认背景

如果需求是整个List背景透明，推荐使用iOS16+新增的官方API，直接隐藏List的滚动内容背景，无需单独设置行背景，兼容性更好：

import SwiftUI

struct ContentView: View {
    var message = Array(0 ..< 200).map { _ in "SOME SOME SOME SOME" }.joined(separator: "\n")
    var body: some View {
        List {
            Text(message)
                .contextMenu {
                    Button {
                        // Some action
                    } label: {
                        Text("Some Action")
                    }
                }
        }
        .scrollContentBackground(.hidden)
    }
}

方案说明 #

• 方案1适用于仅需单独行背景透明的场景，精准修复Color.clear的渲染bug；
• 方案2是Apple官方推荐的隐藏List背景方式，更适配多场景，能从根源避免行背景相关的异常。

内容的提问来源于stack exchange，提问作者Alessio Zap Boerio