第十一回：如何使用 Widget的State

最新推荐文章于 2025-12-04 22:26:14 发布

原创最新推荐文章于 2025-12-04 22:26:14 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #statefullwidget #statelesswidget

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了Flutter中Widget的状态机制，强调了StatefulWidget和StatelessWidget的区别。通过示例代码展示了如何在StatefulWidget中修改State以更新Widget，以及创建和使用State对象的过程。还提供了一个包含FloatingActionButton的示例，演示了点击按钮改变Text内容的操作。

我们在上一章回中介绍了Button Widget,本章回中将介绍 Widget的State，闲话休提，让我们一起Talk Flutter吧。

概念介绍

在Flutter中Widget无法被直接修改，如果想要修改Widget,那么需要通过修改Widget的状态(State)来间接修改Widget.

Flutter提供了两种类型的Widget，StatelessWidget和StatefulWidget。在StatefulWidget中包含一个State对象，我们通过setState()方法可以修改该对象，Flutter检测到State被修改后会自动更新Widget.

使用方法

创建一个StatefulWidget类的子类，并且重写父类中的createState();
创建一个State类的子类，并且重写该类的build()方法；
在createState()方法中创建State子类对象；

示例代码

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

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _StatefulAppEx();
  }
}

class _StatefulAppEx extends State<StatefulAppEx> {
  String str = "Test string";
  void _updatText() {
    setState(() {
      str = "text is changed";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(str),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _updatText,
        tooltip: "update text",
        child: const Icon(Icons.update),
      ),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primaryColor: Colors.blue),
        home: const StatefulAppEx(),
        );
  }
}

void main() {
  runApp(HelloApp());
}

在上面的代码中我们创建一个StatelessWidget,然后用它加载一个StatefullWidget，该Widget中的代码完全按照上面方法中的步骤实现，我们在该Widget中添加了一个浮动Button，点击Button就会修改界面中Text Widget显示的内容。我在这里就不演示程序的运行结果了，建议大家自己去实践。

看官们，关于Widget State的内容就介绍到这里，欢迎大家在评论区交流与讨论!