005 flutter基础,初始文件讲解(4)

发布于:2025-06-01 ⋅ 阅读:(29) ⋅ 点赞:(0)

书接上回,今天继续完成最后的讲解:

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

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

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

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

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

接下来进入最后一段代码,也是大家最为熟悉的(如果看了我之前的文章的话):

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


网站公告

今日签到

点亮在社区的每一天
去签到