Flutter组件如何组合？有状态组件如何传值并响应更新重绘

你遇到的更新不生效问题和Dart值传递机制无关，核心是组件的参数定义和数据透传逻辑写错了，先给可直接运行的修正方案，再讲细粒度组件和JSON数据的关联规则。

你现有代码的问题 #

1. Battery组件没有对外暴露接收电量值的属性，外部根本无法传入更新后的电量
2. 创建BatteryPainter实例时没有传入level参数，永远用的是Painter里写死的默认值0.75
3. 误用了State的存储场景：需要外部驱动更新的数据不要存在子组件的State中，State只适合存组件自身的、不需要父组件控制的本地状态（比如输入框焦点、局部动画进度）

修正后的组件代码 #

首先给Battery组件添加对外的level入参，在build阶段将参数透传给自定义画笔即可，不需要做任何额外的“同步”操作：

class Battery extends StatefulWidget {
  // 对外暴露的电量参数，取值范围0-1
  final double level;
  const Battery({super.key, this.level = 0.75});

  @override
  _BatteryWidgetState createState() => _BatteryWidgetState();
}

class _BatteryWidgetState extends State<Battery> {
  @override
  Widget build (BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return CustomPaint(
        // 直接读取widget上的最新level传给画笔
        painter: BatteryPainter(level: widget.level),
        size: Size(constraints.maxWidth, 50)
      );
    });
  }
}

注意：State对象和Widget实例是分离的，父组件重建传入新的Battery实例时，框架会自动把State关联的widget引用更新为最新实例，只要在build方法里读取widget.xxx属性，拿到的永远是父组件传入的最新值，不存在值传递导致的同步问题。如果你在initState里把widget的参数赋值给State的自有变量，才会出现后续参数更新不同步的问题。

和Webservice返回的JSON数据关联的方法 #

Flutter是声明式UI框架，核心逻辑是数据驱动视图更新，不需要持有子组件引用去修改内部状态，按下面的步骤对接即可：

• 父组件（或者专门的数据管理层）负责请求接口、解析JSON，把需要用到的数据存在自身的状态中
• 拆分细粒度组件时，每个组件只需要声明自己需要的数据字段作为入参，父组件从解析后的JSON结构中取出对应的数据片段，在build时传给子组件
• 接口返回新数据时，父组件调用setState更新自身存储的状态，框架会自动重建所有依赖该状态的子组件，传入新值触发重绘

举个实际对接的例子，假设接口返回的JSON结构如下：

{
  "deviceName": "智能门锁",
  "signal": 0.8,
  "battery": {
    "level": 0.32,
    "charging": false
  }
}

父组件的实现逻辑：

class DevicePage extends StatefulWidget {
  const DevicePage({super.key});

  @override
  State<DevicePage> createState() => _DevicePageState();
}

class _DevicePageState extends State<DevicePage> {
  double _batteryLevel = 0.75;

  // 拉取接口数据
  Future<void> _loadData() async {
    final res = await http.get(Uri.parse("你的接口地址"));
    final data = jsonDecode(res.body);
    setState(() {
      // 只取出Battery组件需要的电量字段
      _batteryLevel = data['battery']['level'].toDouble();
    });
  }

  @override
  void initState() {
    super.initState();
    _loadData();
    // 如果是实时推送场景，收到websocket/webservice推送的新数据时，同样调用setState更新_batteryLevel即可
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          // 其他组件比如信号组件、设备名组件，各自传入对应需要的JSON片段即可
          Battery(level: _batteryLevel)
        ],
      ),
    );
  }
}

几个避坑要点 #

• 不要通过持有子组件引用、调用子组件内部方法的方式更新视图，这是命令式UI的思路，在Flutter的声明式体系下非常容易出现状态不同步的bug
• 你的BatteryPainter里的shouldRepaint逻辑已经写对了，只要传入的level和旧值不一致，就会自动触发画布重绘，不需要额外手动调用刷新方法
• 如果组件嵌套层级很深，逐层传参太繁琐，可以用InheritedWidget或者成熟的状态管理库实现跨层级数据传递，但核心原则不变：组件只接收自己需要的最小粒度数据，不要让子组件依赖和自身无关的全局数据。

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