当前位置: 首页 > 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的烦恼!如果有讲的不好或者不对的地方,可以指出,博主会修正哒!

 

http://www.xdnf.cn/news/724987.html

相关文章:

  • ElasticSearch迁移至openGauss
  • 【深度剖析】流处理系统性能优化:解决维表JOIN、数据倾斜与数据膨胀问题
  • flask入门
  • 响应式系统与Spring Boot响应式应用开发
  • 英语复习笔记 2
  • PHP7+MySQL5.6 查立得源码授权系统DNS验证版
  • 【算法提升】分组 day_tow
  • React-props
  • CppCon 2014 学习:Lock-Free Programming
  • 企业级安全实践:SSL/TLS 加密与权限管理(一)
  • 智绅科技——科技赋能健康养老,构建智慧晚年新生态
  • 研华工控机安装Windows10系统,适用UEFI(GPT)格式安装
  • 图解gpt之注意力机制原理与应用
  • 专业级图片分割解决方案
  • 火狐安装自动录制表单教程——仙盟自动化运营大衍灵机——仙盟创梦IDE
  • SpringBoot整合Sa-Token实现RBAC权限模型的过程解析
  • 使用 `\033` 方式设置终端字体颜色
  • .NET 查找 DLL 的路径顺序
  • 【图像处理基石】如何进行图像畸变校正?
  • vb.net oledb-Access 数据库本身不支持命名参数,赋值必须和参数顺序一致才行
  • 华为OD机试_2025 B卷_数组组成的最小数字(Python,100分)(附详细解题思路)
  • 联邦学习常见问题
  • 动手学深度学习pytorch学习笔记 —— 第五章
  • 《算力觉醒!ONNX Runtime + DirectML如何点燃Windows ARM设备的AI引擎》
  • AtCoder Beginner Contest 407 E - Most Valuable Parentheses
  • Linux服务器运维10个基础命令
  • WEB3——什么是ABI
  • 包管理工具
  • RocketMQ 死信队列(DLQ)实战:原理 + 开发 + 运维 + 架构应用指南
  • 云原生 Cloud Native Build (CNB)使用初体验