Flutter底部导航栏切换时如何保留输入数据？

下面是几种实用的实现方式，根据你的场景选择最合适的：

方法1：使用AutomaticKeepAliveClientMixin #

这是Flutter官方提供的页面保活方案，让单个页面自主管理状态保留，适合按需加载页面的场景。

实现步骤： #

1. 让页面的State类混入AutomaticKeepAliveClientMixin
2. 重写wantKeepAlive方法并返回true
3. 在build方法中必须调用super.build(context)，否则保活逻辑不生效

代码示例： #

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

  @override
  State<InputPage> createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> with AutomaticKeepAliveClientMixin {
  // 输入控制器和列表数据会被保活
  final TextEditingController _nameController = TextEditingController();
  final List<String> _itemList = [];

  // 关键：返回true开启页面保活
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则保活失效
    super.build(context);
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(labelText: '姓名'),
            ),
            const SizedBox(height: 16),
            TextField(
              onSubmitted: (value) {
                setState(() {
                  _itemList.add(value);
                });
              },
              decoration: const InputDecoration(labelText: '添加列表项'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _itemList.length,
                itemBuilder: (context, index) => ListTile(title: Text(_itemList[index])),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方法2：使用IndexedStack #

一次性初始化所有底部导航页面，通过切换索引控制显示，页面不会被销毁，状态自然保留。这种方式实现简单，但如果页面较多或初始化成本高，会占用更多内存。

代码示例： #

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

  @override
  State<BottomNavScreen> createState() => _BottomNavScreenState();
}

class _BottomNavScreenState extends State<BottomNavScreen> {
  int _currentIndex = 0;
  // 提前初始化所有页面，IndexedStack会维持它们的状态
  final List<Widget> _pages = const [
    InputPage(),
    OtherPage(), // 你的其他页面
    SettingsPage(), // 你的设置页面
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用IndexedStack包裹所有页面，根据currentIndex切换显示
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.edit), label: '输入页'),
          BottomNavigationBarItem(icon: Icon(Icons.list), label: '列表页'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
        ],
      ),
    );
  }
}

方法3：全局状态管理（适合复杂场景） #

如果需要跨页面共享数据，或者页面可能被频繁销毁重建，可以用状态管理工具（如Provider、Riverpod、GetX等）将数据存储在全局状态中，页面重建时从状态中恢复数据。

示例（Riverpod）： #

1. 定义全局状态：

final inputDataProvider = StateProvider<InputData>((ref) => InputData(name: '', items: []));

// 数据模型
class InputData {
  String name;
  List<String> items;

  InputData({required this.name, required this.items});
}

2. 页面中使用状态：

class InputPage extends ConsumerWidget {
  const InputPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final inputData = ref.watch(inputDataProvider);
    final inputDataNotifier = ref.read(inputDataProvider.notifier);

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: TextEditingController(text: inputData.name)
                ..addListener(() {
                  inputDataNotifier.state = InputData(
                    name: controller.text,
                    items: inputData.items,
                  );
                }),
              decoration: const InputDecoration(labelText: '姓名'),
            ),
            const SizedBox(height: 16),
            TextField(
              onSubmitted: (value) {
                inputDataNotifier.state = InputData(
                  name: inputData.name,
                  items: [...inputData.items, value],
                );
              },
              decoration: const InputDecoration(labelText: '添加列表项'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: inputData.items.length,
                itemBuilder: (context, index) => ListTile(title: Text(inputData.items[index])),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

各方案对比： #

• AutomaticKeepAliveClientMixin：灵活，按需保活，节省内存，适合大多数普通场景
• IndexedStack：实现最简单，切换无延迟，但内存占用较高，适合页面数量少的情况
• 状态管理：数据与UI分离，支持跨页面共享，适合复杂业务场景

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