Flutter中Socket获取的重量变量更新后如何实时刷新界面显示

问题根源 #

Flutter UI 采用声明式渲染逻辑，仅修改变量值不会自动触发界面重绘，你需要主动通知框架状态已更新，触发build方法重新执行才能刷新界面展示内容。

解决步骤 #

1. 首先确保你的页面是StatefulWidget类型，只有 StatefulWidget 的状态类能调用setState方法触发重绘，如果你当前页面是 StatelessWidget 需要先改造为 StatefulWidget。
2. 在 Socket 接收数据的回调中，赋值weightSO后调用setState方法，修改后的getWeight代码如下：

getWeight() async {
  // 建议把socket定义成页面的全局状态变量，方便页面销毁时手动关闭，避免内存泄漏
  Socket socket = await Socket.connect('192.168.0.1', 4005);
  print('connected');

  socket.add(utf8.encode('pass'));
  socket.listen((List<int> event) {
    // 赋值后调用setState通知UI更新
    setState(() {
      weightSO = utf8.decode(event);
    });
    print(utf8.decode(event));
  });
  socket.add(utf8.encode('pass'));
  // 如果需要持续接收重量数据，可删除10秒后自动关闭socket的逻辑，按需保留即可
  await Future.delayed(Duration(seconds: 10));
  socket.close();
}

补充优化建议 #

• 不要每次点击按钮都新建 Socket 连接，建议首次建立连接后复用，页面销毁时在dispose生命周期方法中主动关闭 Socket：

@override
void dispose() {
  socket?.close();
  super.dispose();
}

• 建议增加异常捕获逻辑，处理 Socket 连接失败、数据解码失败的边界场景。

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