LayoutBuilder重置输入值：求可保留输入内容的Flutter替代组件

问题根源 #

1. 组件树结构变化：LayoutBuilder切换Row/Column时，输入框的父组件层级改变，导致Flutter无法复用输入框的Element，输入框被销毁重建。
2. 初始化值未同步：全局定义的输入框组件，其initialValue仅在第一次创建时赋值，后续输入值更新不会同步到initialValue，重建后输入框会回到初始空值。

而Wrap组件中输入框能保留内容，是因为Wrap的布局调整不会改变组件树结构，输入框的Element始终被复用，状态得以保留。

解决方案 #

方法1：用Row的wrap属性替代LayoutBuilder

利用Row（Flex的子类）的wrap: true属性，实现空间不足时自动换行，无需切换Row/Column，组件树结构稳定，输入框状态自然保留。

修改后的代码片段：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    wrap: true, // 开启自动换行
    crossAxisAlignment: CrossAxisAlignment.center,
    children: const [
      Text('a field'),
      Flexible(child: AField()),
      TextButton(
        onPressed: () => print('aValue = $_aValue'),
        child: Text('print aValue'),
      ),
    ],
  ),
)

方法2：LayoutBuilder配合StatefulWidget与稳定Key

如果必须保留LayoutBuilder的布局逻辑，通过StatefulWidget保存输入值，同时给输入框父容器设置固定Key，确保Element复用或重建时同步最新值。

完整示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Styling Demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(title: const Text(appTitle)),
        body: const MyCustomForm(),
      ),
    );
  }
}

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  String _aValue = '';
  String _bValue = '';
  final _fieldKey = const Key('a-field-container');

  @override
  Widget build(BuildContext context) {
    print('build');
    // a区域输入框：在build内创建，确保initialValue同步最新值
    final aField = SizedBox(
      key: _fieldKey,
      width: 200,
      child: TextFormField(
        initialValue: _aValue,
        onChanged: (text) => setState(() => _aValue = text),
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: 'Enter your username',
        ),
      ),
    );

    // b区域代码保持不变
    const bTitle = Text('b field');
    final bField = SizedBox(
      width: 200,
      child: TextFormField(
        initialValue: _bValue,
        onChanged: (text) => setState(() => _bValue = text),
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: 'Enter your username',
        ),
      ),
    );
    final bButton = TextButton(
      onPressed: () => print('bValue = $_bValue'),
      child: Text('bValue = $_bValue'),
    );

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: LayoutBuilder(
            builder: (context, constraints) {
              return constraints.maxWidth < 200
                  ? Column(children: [const Text('a field'), aField, _buildAButton()])
                  : Row(children: [const Text('a field'), Flexible(child: aField), _buildAButton()]);
            },
          ),
        ),
        const SizedBox(height: 50),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: Wrap(
            alignment: WrapAlignment.center,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: [bTitle, bField, bButton],
          ),
        ),
      ],
    );
  }

  Widget _buildAButton() {
    return TextButton(
      onPressed: () => print('aValue = $_aValue'),
      child: const Text('print aValue'),
    );
  }
}

方法3：用AutomaticKeepAliveClientMixin保持输入框状态

将输入框封装为独立的StatefulWidget，混入AutomaticKeepAliveClientMixin强制保持状态，即使父组件重建也不会丢失输入内容。

封装的输入框组件：

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

  @override
  State<PersistentTextField> createState() => _PersistentTextFieldState();
}

class _PersistentTextFieldState extends State<PersistentTextField> with AutomaticKeepAliveClientMixin {
  String _inputValue = '';

  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    return SizedBox(
      width: 200,
      child: TextFormField(
        initialValue: _inputValue,
        onChanged: (text) => setState(() => _inputValue = text),
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: 'Enter your username',
        ),
      ),
    );
  }
}

在LayoutBuilder中直接使用PersistentTextField即可，无需额外处理状态同步。

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