Flutter：点击按钮切换字段显隐且不重建父组件

核心问题 #

1. 错误修改Widget属性：直接修改widget.showFromField和widget.rotateButton是不合理的——Widget的属性是不可变的，状态应该存储在State类内部。
2. 父组件重建导致子状态丢失：父组件调用setState会触发整个组件树重建，LocationSearchDialog被重新初始化，输入值自然丢失。
3. 按钮点击未触发函数：原按钮代码中onPressed仅引用函数，未执行调用，导致状态切换无效。

修复步骤与代码示例 #

1. 修正状态存储位置

将显隐状态和按钮旋转状态移至State类内部，避免修改Widget属性：

class _ParentWidgetState extends State<ParentWidget> {
  // 内部维护显隐状态，初始隐藏
  bool _showFromField = false;
  double _rotateButton = 0;

  // 创建输入控制器，保存输入框内容
  final TextEditingController _fromInputController = TextEditingController();
  final TextEditingController _toInputController = TextEditingController();

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _fromInputController.dispose();
    _toInputController.dispose();
    super.dispose();
  }

  void updateFromFieldVisibility() {
    setState(() {
      _showFromField = !_showFromField;
      _rotateButton = _rotateButton == 1.5 ? 0 : 1.5;
    });
    print('$_showFromField $_rotateButton');
  }

  // ... 其他生命周期函数
}

2. 优化显隐切换与输入状态保留

给Visibility添加maintainState: true，确保隐藏时保留子组件状态；同时将控制器传递给输入子组件：

Table(columnWidths: const <int, TableColumnWidth>{
  0: FlexColumnWidth(85),
  1: FlexColumnWidth(15),
}, children: [
  TableRow(
    children: [
      Padding(
        padding: const EdgeInsets.fromLTRB(15, 0, 15, 10),
        child: Visibility(
          visible: _showFromField,
          maintainState: true, // 关键：隐藏时不销毁子组件状态
          child: LocationSearchDialog(
            labelText: 'From',
            addMarker: addStartPointMarker,
            currentLocation: widget.currentLocation,
            controller: _fromInputController, // 绑定输入控制器
          ),
        ),
      ),
      const Text('')
    ],
  ),
  TableRow(
    children: [
      Padding(
        padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
        child: LocationSearchDialog(
          labelText: 'To',
          addMarker: addDestinationPointMarker,
          currentLocation: widget.currentLocation,
          controller: _toInputController, // 绑定输入控制器
        ),
      ),
      Padding(
        padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
        child: ShowStartField(updateFromFieldVisibility: updateFromFieldVisibility)
      )
    ],
  ),
])

3. 修复按钮点击逻辑

确保按钮点击时正确调用状态更新函数：

Transform.rotate(
  angle: 180 * _rotateButton / 180,
  child: IconButton(
    icon: const Icon(Icons.arrow_forward_ios),
    iconSize: 15,
    color: Colors.blue,
    tooltip: 'Add pick up point',
    onPressed: updateFromFieldVisibility, // 直接传递函数引用，或用() => updateFromFieldVisibility()
  ),
);

4. 适配子组件接收控制器

修改LocationSearchDialog，让它接收并使用输入控制器：

class LocationSearchDialog extends StatelessWidget {
  final String labelText;
  final Function addMarker;
  final Location currentLocation;
  final TextEditingController controller;

  const LocationSearchDialog({
    super.key,
    required this.labelText,
    required this.addMarker,
    required this.currentLocation,
    required this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller, // 绑定控制器
      decoration: InputDecoration(
        labelText: labelText,
        // 其他装饰属性
      ),
      // 其他业务逻辑
    );
  }
}

关键说明 #

• 控制器保存输入状态：TextEditingController独立于组件生命周期，即使父组件重建，输入值也会被保留。
• maintainState属性：避免隐藏时销毁子组件，减少不必要的重建。
• 状态内部化：State类的状态应自行维护，不要修改Widget的不可变属性。

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