如何更改 Flutter (Dart) 中的文本？

Question

我是 Flutter 新手！我想在单击和按钮“更改文本”时更改“文本”的内容看下面的代码：

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @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(children: [
            Text("Hello word !", key: Key("textKey")),
            TextButton(child: Text("change Text"), onPressed: (){
              /* **I want to change "Hello word!" to "Text has changed"** */
              debugPrint("Change");
            },),
          ],),
        )
      ),
    );
  }
}

请教我怎么做？谢谢大家

Answer 1

如果您想更改文本，您需要使用有状态小部件进行扩展。在无状态中，它无法重建，所以你必须使用有状态的小部件或状态管理，如（bloc、provider、getx 等）

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home: MyHomePage()));
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key key,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String helloWorld = "Hello word !";
  @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(children: [
              Text("$helloWorld", key: Key("textKey")),
              TextButton(child: Text("change Text"), onPressed: (){
                /* **I want to change "Hello word!" to "Text has changed"** */
                debugPrint("Change");
                setState(() {
                  helloWorld = "Change text";

                });
              },),
            ],),
          )
      ),
    );
  }
}

如何更改 Flutter (Dart) 中的文本？

How to change text in Flutter (Dart)?

text

widget

dart

flutter