当前位置：首页 > news >正文

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

news 来源：原创 2025/6/3 16:39:18

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

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}

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

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

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

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

  @overrideWidget 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的烦恼！