Flutter：填充式TextField有文本时按钮未显示的解决办法

你的代码存在两个核心问题导致按钮无法正常显示，以下是具体修改方案：

1. 给TextField绑定控制器 #

原代码中的TextField用const修饰，无法绑定_textEditingController，且未添加controller参数，导致控制器和输入框完全脱节，输入的文本不会同步到控制器中。需要去掉const并绑定控制器：

Expanded(
  child: TextField(
    controller: _textEditingController, // 绑定控制器
    decoration: InputDecoration(
      border: InputBorder.none,
      hintText: 'hintText',
      hintStyle: TextStyle(
        color: Color(0xFF888888),
        fontSize: 14,
        fontWeight: FontWeight.w500,
      ),
      contentPadding: EdgeInsets.only(left: 16, bottom: 6),
    ),
  ),
),

2. 监听文本变化触发UI刷新 #

即使绑定了控制器，输入文本后也不会自动刷新UI，需要给控制器添加监听，在文本变化时调用setState()更新界面：
在你的State类中重写initState方法：

@override
void initState() {
  super.initState();
  // 监听文本变化，触发UI更新
  _textEditingController.addListener(() {
    setState(() {});
  });
}

3. 销毁控制器避免内存泄漏（推荐操作） #

为防止内存泄漏，在State类的dispose方法中销毁控制器：

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

修改后的完整代码示例 #

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

  @override
  State<YourScreen> createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(() {
      setState(() {});
    });
  }

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

  PreferredSizeWidget _appBar() {
    final deviceSize = MediaQuery.of(context).size;
    return AppBar(
      flexibleSpace: SafeArea(
        child: Row(
          children: [
            Container(
              width: deviceSize.width / 10 * 8,
              decoration: BoxDecoration(
                color: const Color(0xFFf4f4f4),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _textEditingController,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'hintText',
                        hintStyle: TextStyle(
                          color: Color(0xFF888888),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        contentPadding: EdgeInsets.only(left: 16, bottom: 6),
                      ),
                    ),
                  ),
                  // 替换成你需要的ElevatedButton
                  if (_textEditingController.text.isNotEmpty)
                    ElevatedButton(
                      onPressed: () {
                        // 按钮点击逻辑
                      },
                      child: const Text('提交'),
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(),
      body: const Center(child: Text('示例页面')),
    );
  }
}

修改完成后，输入框有文本时按钮会自动显示，清空文本后按钮会自动隐藏。

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