使用PageController与PageView时返回页面丢失TextField值问题

问题本质 #

用PageController+PageView做分页表单时，切换到下一页后再返回上一页，TextField会清空——这是因为PageView默认会销毁非当前页面的State，即便你已经把输入值存在了FormData里，重建的TextField也不会自动同步这些值。

两种解决方案 #

方案1：用AutomaticKeepAliveClientMixin保留页面状态

让每个表单页面的State混入这个mixin，强制PageView保留页面的状态，这样切换回来时TextField的内容不会丢失。

示例代码（第一个表单页）：

class FormPage1 extends StatefulWidget {
  final FormData formData;
  const FormPage1({super.key, required this.formData});

  @override
  State<FormPage1> createState() => _FormPage1State();
}

class _FormPage1State extends State<FormPage1> with AutomaticKeepAliveClientMixin {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化时从FormData读取已保存的值
    _controller = TextEditingController(text: widget.formData.name);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 必须返回true，告诉框架要保留这个页面的状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则keepAlive不生效
    super.build(context);
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        controller: _controller,
        onChanged: (value) => widget.formData.name = value,
        decoration: const InputDecoration(labelText: "姓名"),
      ),
    );
  }
}

方案2：每次页面重建时同步FormData的值

如果不想保留页面状态（比如页面内容多，怕占内存），可以在TextField的initialValue里直接绑定FormData的值，每次页面重建时自动同步已保存的内容。

示例代码（无状态组件版表单页）：

class FormPage1 extends StatelessWidget {
  final FormData formData;
  final ValueChanged<String> onNameChanged;
  const FormPage1({super.key, required this.formData, required this.onNameChanged});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        initialValue: formData.name,
        onChanged: onNameChanged,
        decoration: const InputDecoration(labelText: "姓名"),
      ),
    );
  }
}

完整父组件示例 #

包含PageController、三个页面和通用的导航栏：

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

  @override
  State<MultiPageForm> createState() => _MultiPageFormState();
}

class _MultiPageFormState extends State<MultiPageForm> {
  final PageController _pageController = PageController();
  final FormData _formData = FormData();
  int _currentPage = 0;

  void _goToPrevious() {
    if (_currentPage > 0) {
      _pageController.previousPage(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }
  }

  void _goToNext() {
    if (_currentPage < 2) {
      _pageController.nextPage(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("多页表单")),
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => setState(() => _currentPage = index),
        children: [
          FormPage1(
            formData: _formData,
            onNameChanged: (value) => _formData.name = value,
          ),
          FormPage2(
            formData: _formData,
            onEmailChanged: (value) => _formData.email = value,
          ),
          SummaryPage(formData: _formData),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            TextButton(
              onPressed: _currentPage == 0 ? null : _goToPrevious,
              child: const Text("上一页"),
            ),
            TextButton(
              onPressed: _currentPage == 2 ? null : _goToNext,
              child: const Text("下一页"),
            ),
          ],
        ),
      ),
    );
  }
}

// 表单数据模型
class FormData {
  String name = "";
  String email = "";
}

// 第二个表单页
class FormPage2 extends StatelessWidget {
  final FormData formData;
  final ValueChanged<String> onEmailChanged;
  const FormPage2({super.key, required this.formData, required this.onEmailChanged});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        initialValue: formData.email,
        onChanged: onEmailChanged,
        keyboardType: TextInputType.emailAddress,
        decoration: const InputDecoration(labelText: "邮箱"),
      ),
    );
  }
}

// 汇总页
class SummaryPage extends StatelessWidget {
  final FormData formData;
  const SummaryPage({super.key, required this.formData});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("姓名: ${formData.name}"),
          const SizedBox(height: 16),
          Text("邮箱: ${formData.email}"),
        ],
      ),
    );
  }
}

方案选择 #

• 方案1适合表单页面有复杂交互（比如输入验证、自动补全），需要完全保留输入状态的场景。
• 方案2适合轻量表单页面，避免因保留状态占用过多内存。

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