如何避免SwiftUI List的Section标题继承列表阴影效果？

问题描述 #

在SwiftUI中使用List组件，为每行添加阴影实现3D视觉效果时，行样式表现正常，但Section的标题文本意外继承了列表的阴影，尝试多种方法均无法去除该阴影。

已尝试的方案 #

• 将List放入.compositeGroup()后再应用阴影——无效果
• 将SectionHeader的.textCase()设为.none——移除了文本格式，但未去除阴影
• 为Section标题创建自定义View并设置独立样式——仍继承阴影
• 为行视图本身添加阴影——行内所有文本出现阴影，但行视图本身无阴影；使用compositeGroup后效果一致，但Section文本阴影消失
• 在行类中为元素所在的HStack添加阴影——效果同上
• 移除Section改用Text视图——仍继承阴影
• 参考相关线程将.listStyle设为PlainListStyle或DefaultListStyle——无效果，仅改变行宽

最小复现代码 #

struct MinReproduceExample: View {
  var body: some View {
    List {
        Section(header: MinReproCell(text: "Section Title")) {
            MinReproCell(text: "Cell text")
            //causes shadow on cell text
            //does not create red shadow on cell view itself
                .shadow(color:.red, radius: 5, x:-3, y:3)

        }
    }
    .background(.clear)
    //Must be here to make cell view shadow red.
    //Also causes Section title to be red
    //does not cause cell text to have red shadow
    .shadow(color:.red, radius: 5, x:-3, y:3)
    //scrollContent required to be clear to show shadows of views
    .scrollContentBackground(.hidden)
  }
}

struct MinReproCell: View {
  var text: String
  var body: some View {
      Text(text).foregroundStyle(.black)
  }
}

struct MinReproSection:View {
  var text: String
  var body: some View {
      Text(text)
        .foregroundStyle(.black)
        .font(Font.system(size: 20, weight: .bold))
        .textCase(.none) // has no effect on section text shadow
  }
}

解决思路与方案 #

问题根源在于给整个List添加了阴影，Section标题作为List的子视图自然会继承这个阴影效果。正确的做法是只为列表的行容器添加阴影，而非整个List，同时显式清除Section标题的阴影继承。

具体实现方式 #

方案一：用容器包裹行内容并单独加阴影

struct FixedExample: View {
    var body: some View {
        List {
            Section(header: MinReproSection(text: "Section Title")
                        // 强制清除Section标题的阴影
                        .shadow(color: .clear)) {
                // 用圆角矩形作为行容器，仅对容器应用阴影
                RoundedRectangle(cornerRadius: 8)
                    .fill(.white)
                    .shadow(color: .red, radius: 5, x: -3, y: 3)
                    .overlay(
                        MinReproCell(text: "Cell text")
                    )
                    .frame(height: 50)
            }
        }
        .background(.clear)
        .scrollContentBackground(.hidden)
    }
}

// 保持原有子视图定义不变
struct MinReproCell: View {
  var text: String
  var body: some View {
      Text(text).foregroundStyle(.black)
  }
}

struct MinReproSection:View {
  var text: String
  var body: some View {
      Text(text)
        .foregroundStyle(.black)
        .font(Font.system(size: 20, weight: .bold))
        .textCase(.none)
  }
}

方案二：直接给行背景加阴影（更简洁）

struct FixedExample: View {
    var body: some View {
        List {
            Section(header: MinReproSection(text: "Section Title")
                        .shadow(color: .clear)) {
                MinReproCell(text: "Cell text")
                    .frame(maxWidth: .infinity, maxHeight: 50)
                    .background(.white)
                    // 仅对行背景应用阴影
                    .shadow(color: .red, radius: 5, x: -3, y: 3)
            }
        }
        .background(.clear)
        .scrollContentBackground(.hidden)
    }
}

核心逻辑：

1. 阴影只作用在行的背景元素上，避免影响文本内容
2. 给Section头部显式设置.shadow(color: .clear)，抵消List传递的阴影效果

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