@State属性变更后UI未更新，图表柱状图动画失效问题咨询

嘿，我瞅了下你的代码，问题主要出在两个地方，导致点击按钮后柱状图高度变化没动画：

1. 子视图未绑定父视图的状态变量 #

你的GraphBars里的percent只是普通的CGFloat参数，它没法感知父视图TEST3中bar1的变化——虽然父视图更新时子视图会重新渲染，但没有触发动画的绑定关系。得把它改成@Binding类型，让子视图能和父视图的状态联动。

2. 未添加动画触发逻辑 #

SwiftUI的动画需要明确触发，要么在修改状态变量时用withAnimation包裹，要么给视图添加.animation()修饰符（前者更推荐，能精准控制动画的触发时机）。

修改后的完整代码 #

struct GraphBars: View {
    // 改成@Binding，绑定父视图的State变量
    @Binding var percent: CGFloat
    var body: some View {
        Capsule()
            .fill(Color.black)
            .frame(width: 50, height: percent)
    }
}

struct TEST3: View {
    @State var bar1: CGFloat = 90.0
    var body: some View {
        GeometryReader { gg in
            VStack {
                Button(action: {
                    // 用withAnimation包裹状态修改，触发动画
                    withAnimation(.easeInOut(duration: 0.5)) {
                        self.bar1 = 300.0
                    }
                }) {
                    Text("Hello")
                }
                // 传递绑定给子视图
                GraphBars(percent: $bar1)
            }
        }
    }
}

额外说明 #

• 如果不想用@Binding，也可以在父视图给GraphBars添加.animation()修饰符，比如：

  GraphBars(percent: bar1)
      .animation(.easeInOut, value: bar1)
  

  但这种方式是让视图监听bar1的变化自动触发动画，而withAnimation是在修改状态时主动触发，后者更灵活可控。

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