如何用TimelineView实现可复用的SwiftUI列表行背景色自动更新Modifier？

核心思路 #

要实现仅调用一次TimelineView获取当前小时并在多Section和视图中复用，关键是将小时状态提升到父视图层级，而非在Modifier内部创建TimelineView（这会导致作用域隔离问题）。

步骤1：父视图中统一管理小时状态 #

在包含List的父视图里，用TimelineView获取并维护当前小时的状态变量，让所有Section的列表行都能共享这个值：

struct YourParentView: View {
    @State private var currentHour: Int = Calendar.current.component(.hour, from: Date())
    
    var body: some View {
        TimelineView(.animation) { context in
            // 时间更新时同步刷新小时值
            let now = context.date
            currentHour = Calendar.current.component(.hour, from: now)
            
            List {
                Section(header: Text("Ear")
                    .modifier(SectionHeaderModifer())) {
                    ForEach(Ear.indices, id: \.self) { index in
                        VStack {
                            VStack() {
                                Spacer()
                                Text(Ear[index].name)
                                    .modifier(NameModifier())
                            }
                            HStack {
                                Text(String(format: "$%.2f", Ear[index].value))
                                    .modifier(ValueModifier())
                            
                                Text(Ear[index].code)
                                    .modifier(CodeModifier())
                            }
                            .frame(width:270)
                        }
                        .modifier(RowFormatModifier())
                        // 复用共享的currentHour设置背景
                        .listRowBackground(Color("\(currentHour)").opacity(0.9))
                        .listRowSeparator(.hidden)
                    }
                }
                
                Section(header: Text("Nose")
                    .font(.title)
                    .fontWeight(.thin)) {
                    ForEach(Nose.indices, id: \.self) { index in
                        VStack {
                            VStack() {
                                Spacer()
                                Text(Nose[index].name)
                                    .modifier(NameModifier())
                            }
                            HStack {
                                Text(String(format: "$%.2f", Nose[index].value))
                                    .modifier(ValueModifier())
                            
                                Text(Nose[index].code)
                                    .modifier(CodeModifier())
                            }
                            .frame(width:270)
                        }
                        .frame(width: 330, height:95, alignment: .center)
                        .modifier(RowFormatModifier())
                        // 同样使用共享的currentHour
                        .listRowBackground(Color("\(currentHour)").opacity(0.9))
                        .listRowSeparator(.hidden)
                    }
                }
            }
        }
    }
}

步骤2：（可选）封装背景色逻辑为Modifier #

如果想避免重复代码，可以把背景色逻辑封装成带参数的Modifier，接收外部传入的小时值：

struct HourBasedRowBackground: ViewModifier {
    let hour: Int
    
    func body(content: Content) -> some View {
        content
            .listRowBackground(Color("\(hour)").opacity(0.9))
            .listRowSeparator(.hidden)
    }
}

// 扩展View，简化调用
extension View {
    func hourBasedRowBackground(hour: Int) -> some View {
        self.modifier(HourBasedRowBackground(hour: hour))
    }
}

之后在列表行中直接替换原有的背景设置代码：

.hourBasedRowBackground(hour: currentHour)

原代码错误原因 #

你之前的Modifier写法中，hour是TimelineView闭包内的局部变量，闭包外的.listRowBackground无法访问该变量；同时TimelineView的作用是包裹需要实时更新的视图，不能单独用来获取值后脱离它使用，必须将状态变量放在其作用域内或提升到父视图层级。

额外注意事项 #

• 确保资源目录中的颜色名称与小时数字完全匹配（如小时18对应颜色资源"18"），否则Color("\(hour)")会加载失败。
• TimelineView的.animation模式会跟随系统动画节奏更新，足够保证小时变化时及时刷新背景色。

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