Flutter中点击Widget时显示输入文本框的实现方法咨询

针对你要的点击Widget后展开输入框的需求，推荐几个实用的实现思路和组件：

1. AnimatedContainer + InkWell（推荐，带平滑动画） #

这是最灵活的方案，能实现自然的展开/收起过渡，完全自定义触发Widget和输入框样式。核心是通过布尔状态控制输入框的显示状态，用AnimatedContainer做高度动画，InkWell替代GestureDetector能提供Material风格的水波纹反馈。

示例代码：

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

  @override
  State<ExpandableInput> createState() => _ExpandableInputState();
}

class _ExpandableInputState extends State<ExpandableInput> {
  bool _isExpanded = false;
  final _inputController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 自定义点击触发的Widget（这里用卡片示例，你可以替换成任何Widget）
        InkWell(
          onTap: () => setState(() => _isExpanded = !_isExpanded),
          child: const Card(
            margin: EdgeInsets.symmetric(vertical: 8),
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Text('点击展开输入框'),
            ),
          ),
        ),
        // 带动画的输入框区域
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          height: _isExpanded ? 60 : 0,
          curve: Curves.easeInOut,
          child: _isExpanded
              ? TextField(
                  controller: _inputController,
                  decoration: const InputDecoration(
                    hintText: '请输入内容',
                    border: OutlineInputBorder(),
                  ),
                )
              : const SizedBox.shrink(),
        ),
      ],
    );
  }
}

2. Visibility 组件（无动画，简单场景） #

如果不需要动画效果，用Visibility组件可以快速实现显示/隐藏，记得开启maintainState: true，避免收起后输入内容丢失：

Visibility(
  visible: _isExpanded,
  maintainState: true, // 保留输入框的输入状态
  child: TextField(
    controller: _inputController,
    decoration: const InputDecoration(hintText: '请输入内容'),
  ),
)

3. SizeTransition（进阶滑入/滑出动画） #

要是想要更复杂的展开动画（比如从底部滑入），可以用SizeTransition配合AnimationController，适合追求交互体验的场景：

late AnimationController _controller;
late Animation<double> _sizeAnimation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(milliseconds: 300),
    vsync: this,
  );
  _sizeAnimation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeInOut,
  );
}

// 点击触发动画：
// _isExpanded ? _controller.forward() : _controller.reverse();

SizeTransition(
  axisAlignment: 1.0,
  sizeFactor: _sizeAnimation,
  child: TextField(
    controller: _inputController,
    decoration: const InputDecoration(hintText: '请输入内容'),
  ),
)

注意点 #

• 始终用TextEditingController管理输入内容，避免状态丢失；
• 如果需要多个可展开输入框，建议封装成独立组件，避免状态混乱；
• 若要实现类似列表项的展开，也可以直接用ExpansionTile，它自带展开/收起逻辑，只需替换子组件为输入框即可。

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