SwiftUI中仅更新RandomColourView视图的问题求助

问题根源 #

1. 点击按钮无效：你在"New Random"按钮中直接创建RandomColourView()实例，但SwiftUI是声明式框架，这种方式不会将新实例加入视图层级，自然无法更新界面，这也是Xcode警告"Result of RandomColourView initializer is unused"的原因。
2. 随机颜色仅初始化一次：原RandomColourView的颜色是在body计算时生成的，但视图没有绑定任何状态，只有在首次初始化时才会执行这段代码，后续没有触发重绘的条件。

修改方案 #

步骤1：重构RandomColourView，通过状态管理颜色 #

给RandomColourView添加内部状态存储随机颜色，并通过绑定接收外部刷新信号：

struct RandomColourView: View {
    // 绑定外部的刷新触发信号
    @Binding var shouldRefresh: Bool
    // 内部状态存储当前随机颜色
    @State private var randomColor: Color = .init(
        hue: Double.random(in: 0...1),
        saturation: Double.random(in: 0...1),
        brightness: Double.random(in: 0...1)
    )
    
    private func generateNewColor() {
        randomColor = .init(
            hue: Double.random(in: 0...1),
            saturation: Double.random(in: 0...1),
            brightness: Double.random(in: 0...1)
        )
    }
    
    var body: some View {
        VStack {
            Text("Random Colour")
                .font(.custom("Arial Rounded MT Bold", size: 26))
            Rectangle()
                .foregroundColor(randomColor)
                .frame(width: UIScreen.main.bounds.width * 0.8, height: 250)
                .border(.black, width: 5)
                .padding()
        }
        // 监听刷新信号变化，触发颜色更新
        .onChange(of: shouldRefresh) { _ in
            generateNewColor()
        }
    }
}

步骤2：更新ContentView，添加触发状态并关联按钮 #

在ContentView中添加一个状态变量，用来触发RandomColourView的刷新：

struct ContentView: View {
    @State var hue: Double = Double.random(in: 0...1)
    @State var sat: Double = Double.random(in: 0...1)
    @State var bri: Double = Double.random(in: 0...1)
    // 添加刷新触发状态
    @State private var refreshRandomColor = false
    
    var body: some View {
        let colour2 = Color.init(hue: hue, saturation: sat, brightness: bri)
        VStack {    // main vstack
            TitleColoursView()
            // 将绑定传递给RandomColourView
            RandomColourView(shouldRefresh: $refreshRandomColor)
            Text("Sliders Colour")
                .font(.custom("Arial Rounded MT Bold", size: 26))
            Rectangle()
                .foregroundColor(colour2)
                .frame(width: UIScreen.main.bounds.width * 0.8, height: 250)
                .border(.black, width: 5)
                .padding()
            // 其余原有代码保持不变
            
            Button("New Random") {
                // 切换触发值，触发子视图刷新
                refreshRandomColor.toggle()
            }
            .foregroundColor(.red)
            .padding(.bottom, 10)
            .font(.custom("Arial Rounded MT Bold", size: 26))
        }
    }
}

SwiftUI与UIKit核心区别 #

• UIKit：命令式编程
  你需要手动创建视图实例，调用方法修改属性（比如view.backgroundColor = .red），管理视图的添加、移除和布局。一切更新都需要你主动发出命令。
• SwiftUI：声明式编程
  你只需要在body中描述当前状态下视图应该呈现的样子，SwiftUI会自动处理视图的创建、更新和销毁。所有界面变化都必须通过状态变化触发——当状态改变时，SwiftUI会对比前后的视图结构，只更新需要变化的部分，不需要你手动操作视图实例。

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