Flutter中点击Drawer列表项后如何更新ListView列表内容

核心思路是用状态变量控制Drawer内ListView的内容渲染，点击"更改字体"时切换状态，让ListView自动更新为新的列表项。

具体实现步骤： #

1. 在HomePage的State类中添加状态变量，标记是否处于字体选择模式：

bool _showFontOptions = false;

2. 把Drawer的列表构建逻辑抽成独立方法，根据状态变量渲染不同内容：
   _showFontOptions为false时显示原列表，为true时显示字体选择项，同时保留返回按钮切回原列表。

3. 在"更改字体"的onTap回调里，通过setState修改状态变量，触发UI重建：

onTap: () {
  setState(() {
    _showFontOptions = true;
    // 保留你原本修改Drawer标题的逻辑
    _drawerTitle = "字体设置";
  });
}

完整示例代码： #

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _drawerTitle = "我的菜单";
  bool _showFontOptions = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("首页")),
      drawer: Drawer(
        child: Column(
          children: [
            DrawerHeader(
              child: Text(_drawerTitle),
            ),
            Expanded(
              child: _buildDrawerList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDrawerList() {
    if (_showFontOptions) {
      // 点击"更改字体"后显示的新列表
      return ListView(
        children: [
          ListTile(
            leading: const Icon(Icons.arrow_back),
            title: const Text("返回菜单"),
            onTap: () {
              setState(() {
                _showFontOptions = false;
                _drawerTitle = "我的菜单";
              });
            },
          ),
          const ListTile(title: Text("默认字体")),
          const ListTile(title: Text("微软雅黑")),
          const ListTile(title: Text("苹方字体")),
        ],
      );
    } else {
      // 初始显示的原列表
      return ListView(
        children: [
          const ListTile(title: Text("个人中心")),
          const ListTile(title: Text("设置")),
          ListTile(
            title: const Text("更改字体"),
            onTap: () {
              setState(() {
                _showFontOptions = true;
                _drawerTitle = "字体设置";
              });
            },
          ),
        ],
      );
    }
  }
}

关键说明： #

• 必须通过setState修改状态变量，才能触发Flutter的UI重建，更新Drawer内容
• 抽离列表构建方法能让代码更清晰，避免build方法过于臃肿
• 返回按钮的逻辑同理，通过修改状态变量切回原列表

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