Flutter实现点击悬浮按钮时将TextField输入内容展示到指定区域

我来帮你搞定这个问题！你的核心逻辑是对的，但有个关键小失误——你把TextEditingController和存储展示文本的newtext变量放在了build方法内部，这会导致每次setState触发组件重建时，这些变量都会被重新初始化，所以点击按钮后没法正确更新显示内容。

修正后的完整代码 #

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const ScreenHomes(),
    );
  }
}

class ScreenHomes extends StatefulWidget {
  const ScreenHomes({Key? key}) : super(key: key);

  @override
  State<ScreenHomes> createState() => _ScreenHomesState();
}

class _ScreenHomesState extends State<ScreenHomes> {
  // 把控制器和文本变量移到State类的成员位置，避免每次重建重置
  final _textinfield = TextEditingController();
  var newtext = "";

  @override
  void dispose() {
    // 记得释放控制器，避免内存泄漏
    _textinfield.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.lightBlue),
      body: SafeArea(
        child: Center(
          child: Column(
            // 添加布局对齐让界面更美观
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                margin: const EdgeInsets.only(bottom: 30),
                child: Text(
                  newtext.isEmpty ? "result" : newtext,
                  style: const TextStyle(fontSize: 50),
                ),
              ),
              SizedBox(
                width: 300,
                child: TextField(
                  controller: _textinfield,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "Type to Print",
                  ),
                ),
              )
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.print),
        onPressed: () {
          setState(() {
            newtext = _textinfield.text;
          });
        },
      ),
    );
  }
}

关键修改点说明 #

• 变量位置调整：将_textinfield和newtext从build方法移到_ScreenHomesState类的成员变量区域，这样它们的生命周期和State组件一致，不会在每次setState重建时被重置。
• 添加控制器释放逻辑：在dispose方法中调用_textinfield.dispose()，这是使用TextEditingController的最佳实践，能避免内存泄漏。
• 优化初始显示：给Text组件添加了判断，当newtext为空时显示"result"，符合你初始显示“result”的需求。
• 布局优化：添加了mainAxisAlignment和margin让界面布局更合理。

为什么原代码不生效？ #

Flutter的build方法会在以下场景被调用：

1. 调用setState时
2. 屏幕旋转时
3. 父组件重建时

原代码中_textinfield和newtext是build方法的局部变量，每次build都会重新创建控制器并把newtext设为空字符串，所以你点击按钮设置的内容会在下一次重建时被覆盖，TextField的输入内容也会因为控制器被重新创建而清空。

内容的提问来源于stack exchange，提问作者Sh'Jil