Flutter(Dart)中如何实现点击按钮修改Text组件的文本内容？

核心问题说明 #

你当前代码无法修改文本的核心原因是MyHomePage继承了StatelessWidget（无状态组件），无状态组件的UI构建完成后没有内置的状态更新机制，无法在运行时修改内部展示内容，需要改为StatefulWidget（有状态组件）实现状态更新。

完整修改后代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

// 改为有状态组件StatefulWidget
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义存储文本的私有状态变量，初始值设为Hello world !
  String _displayText = "Hello world !";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Center(
              child: Text("App demo",
                  style: TextStyle(color: Colors.yellow, fontSize: 40))),
        ),
        body: Center(
          child: Column(
            // 新增属性让内容在页面垂直居中，可根据需求调整
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 文本内容绑定状态变量，不再写死固定字符串
              Text(_displayText, key: const Key("textKey")),
              TextButton(
                child: const Text("change Text"),
                onPressed: () {
                  // 调用setState更新状态，触发组件重新build刷新UI
                  setState(() {
                    _displayText = "Text has changed";
                  });
                  debugPrint("Change");
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

核心修改点说明 #

• 组件类型调整：将MyHomePage由StatelessWidget改为StatefulWidget，配套实现对应的状态管理类
• 新增状态变量：在状态类中定义_displayText变量存储文本内容，初始值修正了原拼写笔误word为world，如需保留原拼写可自行修改
• 文本内容动态绑定：Text组件不再使用固定字符串，改为读取_displayText变量的值
• 点击逻辑实现：在onPressed回调中调用setState方法修改_displayText的值，setState会触发组件重新构建，自动更新界面显示

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