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

004 flutter基础 初始文件讲解(3)

之前,我们正向的学习了一些flutter的基础,如MaterialApp,Scaffold之类的东西,那么接下来,我们将正式接触原代码:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@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), ), );}
}

补充:为什么说在flutter里面,万物皆为widget?

widget是flutter里面的一个类,由于好多类的创建都是继承于它,可以说绝大部分都来自于widget,包括但不限于之前看见的,Text,Scaffold,所以就有了这个说法

接下来,我们将逐行讲解:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}

与之前不同的是,这里我们直接调用了MyApp,这里并非是调用类,虽然说MyApp确实是一个类,但是实际上这里是创建了一个类的实例,MyApp并非是flutter自带的类,而是后面我们创建的,见下:

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}

这里我们可以看见,MyApp是继承了StatelessWidget的一个类,如果这个时候你按住ctrl键,然后点击StatelessWidget,你就会发现StatelessWidget就是继承自Widget类,正好印证了上面的“万物皆为widget”的说法。

第一步自然是将StatelessWidget的属性继承过来,也就是通过super方法,调用父类的构造函数,值得注意的是,由于所有的widget都继承于widget,而widget有一个key属性,所以是super.key,key可以帮助程序识别widget的身份

这里的title指的是外面的名称,不是页面内,而是指启动程序后,程序的名称(当然,要改设置,不然你看见的名称应该是文件名,或者通过其他代码来修改,这里就先不说),在theme里面,可以设置主题颜色,通过seedColor,可以根据实际情况生成合适的颜色背景,而不用每个地方都由自己设置

最后,设置主界面,当然,这里可以看见,我们通过MyHomePage创建了一个实例,而之于MyHomePage是什么,请见下方,在此之前,还有一个title,这个title指的是标题处的title,也就是主界面顶部的位置的标题

class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}

这里我们可以看见,MyHomePage继承于StatefulWidget(当然,按住ctrl键点击StatefulWidget,你会发现它继承于Widget),首先我们通过super方法,继承父类的构造函数,当然,我们这里需要一个标题,因为是MyHomePage嘛,所以这里还要一个“required this.title”,required表示这个是必须的,而this.title则是将传入的参数值直接赋值给当前类的 title 属性,当然,这里面还没有title,所以需要下面的final String title来接收,值得注意的是,这里使用的是final,所以值传入后将不可修改

最后通过@override进行重写父类方法

在StatefulWidget中,有个方法叫做createState方法,这里就是重写这个方法

首先,通过State限定类型,必须是 State<具体Widget类型> 的子类,而最后的_MyHomePageState则是创建并返回状态的对象实例,要注意的是,这里的_MyHomePageState是私有的,因为前面加了“_”。

那么今天就先到这啦,祝大家天天开心!代码一遍就通!没有debug的烦恼!如果有讲的不好或者不对的地方,可以指出,博主会修正哒!

 

相关文章:

  • 【Vim】高效编辑技巧全解析
  • Flutter 4.x 版本 webview_flutter 嵌套H5
  • 【计算机网络】应用层协议Http——构建Http服务服务器
  • Flutter 嵌套H5 传参数
  • 芯片:数字时代的算力引擎——鲲鹏、升腾、海光、Intel 全景解析
  • 快捷键IDEA
  • [网页五子棋][匹配模式]创建房间类、房间管理器、验证匹配功能,匹配模式小结
  • Python打卡训练营Day40
  • 《 PyTorch 2.3革新:torch.compile自动生成CUDA优化内核全解》
  • 使用 SymPy 操作三维向量的反对称矩阵
  • 树莓派安装openwrt搭建软路由(ImmortalWrt固件方案)
  • 历年厦门大学计算机保研上机真题
  • Prevent this information from being displayed to the user 修复方案
  • day14 leetcode-hot100-26(链表5)
  • vscode实时预览编辑markdown
  • Java Spring Boot 自定义注解详解与实践
  • Camera相机人脸识别系列专题分析之六:MTK ISP6S平台人脸识别fdnode流程FdNodeImp.cpp详解
  • 历年四川大学计算机保研上机真题
  • rm删除到回收站
  • RustDesk 搭建自建服务器并设置服务自启动
  • 携程网站建设的意义/百度搜索大数据怎么查
  • 彩票网站怎么做ip管理/百度搜索的优势
  • 网页制作与网站建设宝典 pdf/北京厦门网站优化
  • 网站推广建设加盟/网络营销与管理
  • 怎么把自己做的网站放在/百度百科推广费用
  • 人力资源公司注册/班级优化大师的功能有哪些