Flutter中点击ElevatedButton后显示TextField的实现问题求助

你的代码问题在于ElevatedButton的onPressed是一个无返回值的VoidCallback函数，直接返回Padding和TextField组件不会触发任何UI更新——Flutter的UI渲染依赖状态变化，不能在事件回调里直接返回Widget。

要实现点击按钮后显示TextField的效果，需要通过状态管理控制组件的显示/隐藏，具体实现如下：

完整解决方案代码 #

import 'package:flutter/material.dart';

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

  @override
  State<DocumentCodeInput> createState() => _DocumentCodeInputState();
}

class _DocumentCodeInputState extends State<DocumentCodeInput> {
  // 控制TextField可见性的状态变量
  bool _showTextField = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color.fromARGB(255, 194, 14, 2),
          ),
          onPressed: () {
            // 更新状态，切换TextField显示/隐藏
            setState(() {
              _showTextField = !_showTextField;
            });
          },
          child: const Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.edit_document),
              SizedBox(width: 8),
              Text("Entrer le Code du document"),
            ],
          ),
        ),
        // 根据状态条件渲染TextField
        if (_showTextField)
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Entrer le code ',
              ),
            ),
          ),
      ],
    );
  }
}

核心说明 #

1. 使用StatefulWidget：只有StatefulWidget能通过setState触发UI重建，StatelessWidget无法动态修改UI内容。
2. setState的作用：调用setState会标记当前状态为"脏状态"，Flutter框架会重新执行build方法，根据新的状态值更新UI。
3. 条件渲染逻辑：通过if (_showTextField)判断是否渲染TextField，点击按钮时切换该变量的值，即可实现显示/隐藏的交互效果。

内容的提问来源于stack exchange，提问作者Ange Suzie KOPA