Flutter如何使用Obx加载Record组件ListView替代Navigator.push并修复不显示问题

架构老林

2026-9-24

解决方案

1. 改造列表为响应式变量

Obx只会在监听的响应式变量变化时触发重绘，你当前使用的video_Body.records是普通静态List，值更新时无法通知Obx刷新，需要修改record_body.dart中的定义：

// 修改前
// static List<String>? records;
// 修改后 改成GetX响应式列表
static RxList<String> records = <String>[].obs;

对应的getter同步修改：

// 修改前
// List<String>? get record => video_Body.records;
// 修改后
List<String> get record => video_Body.records;

2. 给Obx添加records监听

你当前的Obx仅监听了controller.currentIndex.value，要让records变化时也触发刷新，需要在Obx回调中读取records的响应式值，同时给Record加高度约束，解决ListView无高度无法布局的问题：

body: Obx(() {
  // 加入这行让Obx监听到records的变化
  var recordList = video_Body.records;
  switch(RouteName.values[controller.currentIndex.value]) {
    case RouteName.Record:
      return SizedBox(
        // 可根据需求调整高度，外层是Column的话也可以用Expanded占满剩余空间
        height: MediaQuery.of(context).size.height * 0.8,
        child: Record(records: recordList.toList()),
      );
    // 其他case逻辑
  }
});

3. 处理StatefulWidget参数更新逻辑

Record是StatefulWidget，默认widget参数更新时不会触发State重绘，两种方案可选：

方案一：直接将Record改为StatelessWidget（无内部状态的话更推荐）
方案二：在_RecordState中添加参数更新回调：

@override
void didUpdateWidget(covariant Record oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget.records != widget.records) {
    setState(() {});
  }
}

4. 优化Record的非空判断

现在传入的列表不会为空，可修改build逻辑避免强制解包风险：

@override
Widget build(BuildContext context) {
  return (widget.records?.isEmpty ?? true) ? const SizedBox() : ListView.builder(
    itemCount: widget.records!.length,
    shrinkWrap: true,
    reverse: true,
    itemBuilder: (BuildContext context, int i) {
      return Card(
        elevation: 5,
        child: ExpansionTile(
          // 原有逻辑
        ),
      );
    },
  );
}

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