Flutter 非主页面路由点击元素及下拉刷新无法更新UI问题咨询

问题核心原因 #

• 你将二级配置页直接内联写在主页面的MaterialPageRoute构造方法中，没有独立封装为StatefulWidget。你在列表项点击事件中调用的setState触发的是主页面的重建逻辑，已经被push到路由栈中的二级页面不会随主页面的状态更新触发重建，只有热重载会强制全页面重建，所以才会出现状态修改后仅热重载生效的问题。
• 下拉刷新无效也是同理：刷新逻辑修改的是主页面的futureSecciones变量，已经加载完成的二级页面FutureBuilder不会监听这个变量的后续变化，只有重新进入页面时重新赋值才会生效。

解决方案 #

将二级配置页抽离为独立的StatefulWidget，页面自身管理选中状态、接口请求、下拉刷新逻辑，点击列表项时调用二级页面自身的setState即可实时触发UI刷新。

步骤1：抽离独立的二级配置页 #

// 独立封装的二级配置页
class SeccionesPage extends StatefulWidget {
  // 传入主页面初始已选中的集合，需同步状态时可额外增加回调参数
  final Set<Seccion> initialSaved;
  const SeccionesPage({super.key, required this.initialSaved});

  @override
  State<SeccionesPage> createState() => _SeccionesPageState();
}

class _SeccionesPageState extends State<SeccionesPage> {
  late Future<List<Seccion>> futureSecciones;
  late Set<Seccion> _saved;

  @override
  void initState() {
    super.initState();
    // 初始化接口请求和选中状态
    futureSecciones = fuenteSecciones().getSecciones();
    _saved = widget.initialSaved;
  }

  // 下拉刷新逻辑移至二级页面内部
  Future<void> _pullRefreshSecciones() async {
    setState(() {
      futureSecciones = fuenteSecciones().getSecciones();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Secciones"),
      ),
      body: FutureBuilder<List<Seccion>>(
        future: futureSecciones,
        builder: (BuildContext context, AsyncSnapshot ssSecciones) {
          return RefreshIndicator(
            child: _listViewSecciones(ssSecciones),
            onRefresh: _pullRefreshSecciones,
          );
        },
      ),
    );
  }

  Widget _listViewSecciones(AsyncSnapshot ssSecciones) {
    if (ssSecciones.hasData) {
      return GroupedListView<dynamic, String>(
        elements: ssSecciones.data,
        groupBy: (element) => element.idPortal,
        groupComparator: (value1, value2) => value1.compareTo(value2),
        itemComparator: (item1, item2) =>
            item1.descCategoria.compareTo(item2.descCategoria),
        order: GroupedListOrder.ASC,
        useStickyGroupSeparators: true,
        groupSeparatorBuilder: (String value) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            value,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
          ),
        ),
        itemBuilder: (BuildContext c, element) {
          return _buildRow(element);
        },
      );
    } else {
      return const Center(
        child: Text("Cargando..."),
      );
    }
  }

  Widget _buildRow(Seccion seccion) {
    final alreadySaved = _saved.contains(seccion);
    return Card(
      elevation: 5.0,
      margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      child: ListTile(
        contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 1),
        title: Text(
          seccion.descCategoria,
          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
        ),
        trailing: Icon(
            alreadySaved ? Icons.check_box : Icons.check_box_outline_blank),
        onTap: () {
          // 调用二级页面自身的setState，直接触发当前页面UI刷新
          setState(() {
            if (alreadySaved) {
              _saved.remove(seccion);
            } else {
              _saved.add(seccion);
            }
          });
        },
      ),
    );
  }
}

步骤2：修改主页面跳转逻辑 #

将主页面的_irAConfig方法修改为直接跳转至抽离好的独立页面即可：

void _irAConfig() {
  Navigator.of(context)
      .push(MaterialPageRoute<void>(builder: (BuildContext context) {
    // 将主页面当前已选中的集合传入二级页面
    return SeccionesPage(initialSaved: _saved);
  }));
}

可选：同步二级页面选中状态到主页面 #

如果需要将二级页面修改后的选中结果同步回主页面，可在二级页面关闭时回传参数，主页面接收后更新自身状态：

1. 二级页面返回时携带修改后的选中集合：

// 可在二级页面AppBar的返回按钮点击/其他关闭时机调用
Navigator.of(context).pop(_saved);

2. 主页面跳转时监听返回结果：

void _irAConfig() {
  Navigator.of(context)
      .push(MaterialPageRoute<void>(builder: (BuildContext context) {
    return SeccionesPage(initialSaved: _saved);
  })).then((value) {
    // 接收二级页面返回的选中集合，更新主页面状态
    if (value != null) {
      setState(() {
        _saved = value as Set<Seccion>;
      });
    }
  });
}

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