005 flutter基础，初始文件讲解（4）

爱意随风起风止意难平2025-06-01 8:29

书接上回，今天继续完成最后的讲解：

Dart 复制代码

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

可以看到，这里的_MyHomePageState是一个类，继承于 State<MyHomePage>，而由于之前的代码里面的createState方法会基于此创建实例对象

下方的语法就很简单了，定义一个整型的变量，然后定义一个函数，这些都是dart基础语法里面的内容

值得注意的是，setState是一个flutter自带的方法，其作用是用于通知Flutter框架，当前状态已经发生了变化，需要重新构建UI

接下来进入最后一段代码，也是大家最为熟悉的（如果看了我之前的文章的话）：

Dart 复制代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, 
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium, 
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, 
        tooltip: 'Increment', 
        child: const Icon(Icons.add), 
      ), 
    );
  }
}

还是常规操作，@override，下面的想必大家已经熟悉了，Scaffold，appBar，AppBar，title，Center，这些之前正着讲的时候，都有说到用到过。这里就提一些之前没有提到过的叭。

关于颜色，backgroundColor这里调用的是主题相关的颜色，title是之前取的title名，当然，是和标题相关的

Column指的是垂直方向的构架，而center则是中心，即垂直方向的中间

我们看见的按钮是怎么来的呢？floatingActionButton就是那个悬浮按钮，当"onPressed"的时候，执行我们之前的那个方法，tooltip会在当你把鼠标放在按钮图标上的时候显示，而最后则是按钮的图像显示，这里的add就是加号的图像

至此，flutter基础文件讲解就此结束啦！

祝大家天天开心！代码一遍就通！没有debug的烦恼！