Flutter学习笔记
ListView`也是滚动组件，但是与`SingleChildScrollView`不同的是，`ListView`是只渲染展示区域的组件，而非渲染所有的组件。配置`controller`可以获取输入框内容,通过`TextEditingController`可以创建输入框实例。`Positioned`必须与`stack`一起使用，`stack`可以单独使用，`stack`可以堆叠显示。通过`Scro
前言
- 始于 2026 年 1 月 9 日
- 教程：黑马程序员 Flutter 从入门到实战全套视频教程，从 Dart 语言到 Flutter 核心框架 AI 辅助开发，一套搞定 Android、iOS、HarmonyOS 及 Web
- 链接：https://www.bilibili.com/video/BV1wR4Xz6EqG?spm_id_from=333.788.player.switch&vd_source=68c5acbfe8e600168d2c85ed89d49de9&p=1
---
## dart 笔记
### 0.起步
```js
// var 关键字定义变量，指定类型，不可更改
var name='zhangsan';
var age= 18
// name=18不可更改
// final 定义不可更改的时间常量
final time = DateTime.now();
// const 定义不可更改的常量
const name='张三';
name = '李四';//不可更改，报错
```
### 1.list
`list` 是列表，相当于 js 的`array`
使用方法
```js
//List关键字 变量名 = [内容];
List arr=['a1','a2','a3'];
```
常用的方法有
```js
.length 获取长度
.last 获取最后一个值
.first 获取第一个值
.isEmpty 是否为空
where 获取匹配的数据
every 校验是否满足条件
addAll 添加新的列表
add 向后追加
remove 删除指定元素
removeLast 删除最后一个
forEach 遍历循环
```
---
### map
相当于 js 的`object`
使用方法
```js
//map关键字 变量名 = {key:value};
map obj={name:'张三',age:18,sex:'男'};
// 取值
obj['name'];
// 赋值
obj['name']='李四'
```
常用的方法有
```js
.length 获取长度
['key'] 获取内容
.clear 清空内容
.addAll 添加新的内容
.containsKey 是否包含此key
forEach 遍历拿到key，value
```
---
### dynamic
`dynamic`关键字用于定义可以任意变量
不同于 var 初始的时候就自动推断类型，dynamic 类型可以随意变换，但是需要承担风险
如定义布尔类型的，就无法使用 .toString(),会报错
---
### 空安全
```js
?. 可能存在值，无值则为null
!. 开发者确定数据存在，通过编译报错，但无法保证运行报错
?? 如有值则取值，无值则取右边
```
---
<!-- 循环，运算，条件语句与js类型，不做笔记 -->
### 函数
```js
// 指定返回值类型
String add (){
return 必须为定义的类型
}
// 返回空类型
void sayGood(){
print("Good");//不需要返回内容
}
// 传参 固定初始值int b=2,int c=3 也可使用?. 空安全通过校验
num add (int a,[int b,int c]){
return a+b+c
}
// 固定传参
num add (int a,{int b,int c}){
return a+b+c
}
// 使用add(1,key:value)
add(1,b:3)
// 匿名函数 使用关键词Function定义
Function test(){
}
test()
// 箭头函数
// 函数名()=> 函数体
add (int a,int b)=> a+b
```
### 私有属性
_变量，以`_`开头的都是私有属性反之则为公有属性，私有属性无法被其它访问
```js
class Person {
String? _name = '张三';
int? age = 18;
// 默认构造函数
Person({String? name, int? age}) {
this.age = age;
this._name = name;//可以这样赋值
}
}
```
## flutter 笔记
### 组件 Widget
```js
flutter 万物皆组件≈div
```
### StatelessWidget 无状态组件
无状态组件是指自身没有状态，不会发生改变，但是会受其它组件影响
```js
// 组件name继承自StatelessWidget
class name extends StatelessWidget {
const name({super.key});
// 重写build核心方法，返回Container组件
@override
Widget build(BuildContext context) {
return Container();
}
}
```
### StatefulWidget 有状态组件
有状态组件有自身属性，不仅会受到外部因素的影响，还会自动改变状态
```js
// StatefulWidget是有状态组件
// 快捷键是statefulW
// 创建name组件继承自有状态组件
class name extends StatefulWidget {
const name({super.key});
// 重写createState，并返回_nameState组件
@override
State<name> createState() => _nameState();
}
// 创建私有属性_nameState继承自State并规定泛型为name
class _nameState extends State<name> {
// 重写build方法这是核心内容，返回组件Widget
@override
Widget build(BuildContext context) {
return Container();
}
}
```
#### MaterialApp
`MaterialApp`是基础组件，目前理解为 Material 组件库提供的
使用`MaterialApp`可以更好的设置主题
- title 页签标题
- home 应用主内容
- theme 应用主题
#### Scaffold
`Scaffold`是基础组件，骨架组件
- appBar 应用标题
- body 核心内容区域
- bottomNavigationBar 底部导航栏
#### container
`container`可以设置多种属性
- width 组件高度
- height 组件宽度
- transform 组件偏移旋转
- alignment 居中方式
- decoration/color color 基础设置颜色，decoration 可以设置颜色，边框等更详细的内容
- border 可以设置圆角边框，带颜色边框等
- color 可以设置颜色
#### center
`center`会默认充满整个元素，然后将内容垂直居中对齐
#### alien
`alien` 组件通过设置宽因子，高因子计算获得宽高，然后将元素以特定形式居中
- widthFactor 宽因子
- heightFactor 高因子
- alignment 居中方式
#### textButton
`textButton`是按钮组件，但是内部可以传入函数对数据进行处理
所有数据修改都需使用`setState`触发响应式更新，类似于小程序与 react
`onPressed`为点击事件
```js
TextButton(onPressed: (){
setState(() {
num-=1;
});
print('$num,~~~');
}, child: Text("减")),
```
#### row
`row`可以将数据展示在一行
- 主轴对齐
- mainAxisAlignment.center 居中对齐
- mainAxisAlignment.start 从头对齐（默认）
- mainAxisAlignment.end 从末尾对齐
- mainAxisAlignment.spaceBetween 两头对齐
- mainAxisAlignment.spaceAround 环绕对齐
- mainAxisAlignment.spaceEvenly 均分
- 交叉轴对齐
- CrossAxisAlignment.center 居中对齐
- CrossAxisAlignment.end 末尾对齐
- CrossAxisAlignment.start 从头对齐
#### column
`column`组件可以快速对齐，类似 flex 布局
- 主轴对齐
- mainAxisAlignment.center 居中对齐
- mainAxisAlignment.start 从头对齐（默认）
- mainAxisAlignment.end 从末尾对齐
- mainAxisAlignment.spaceBetween 两头对齐
- mainAxisAlignment.spaceAround 环绕对齐
- mainAxisAlignment.spaceEvenly 均分
- 交叉轴对齐
- CrossAxisAlignment.center 居中对齐
- CrossAxisAlignment.end 末尾对齐
- CrossAxisAlignment.start 从头对齐
#### Wrap
`Wrap`组件类似于 flex 组件，但是加了溢出换行功能
- spacing 主轴间距
- runSpacing 交叉轴间距
#### stack 与 Positioned
`Positioned`必须与`stack`一起使用，`stack`可以单独使用，`stack`可以堆叠显示
- top
- left
- right
- bottom
- 当对立位置属性都为 0 时，拉伸，四个都为 0 时占满
#### text 文本组件
`text`是文本组件可以配置文字内容
通过 style 可以配置对应的样式
可以通过 `text.echo`配置独立的文本
- maxLines: 2 超过 2 行溢出
- overflow: TextOverflow.ellipsis 配置溢出省略号显示
- style:TextStyle 配置文字的样式
color fontSize fontStyle fontWeight
```js
TextRich(
TextSpan(
text:"文本内容",
children:[TextSpan(
text:"文本2"
// 可以设置不同的样式
)]
)
)
```
#### image
`image`是图片组件，目前只学了两个
- image.assets 加载本地文件，需在`pubspec.yaml`文件中配置
- image.network 加载网络文件
#### Textfield
`Textfield `是输入框组件
配置`controller`可以获取输入框内容,通过`TextEditingController`可以创建输入框实例
- decoration
- hintText："直接输入即可" 输入框内提示文字
- border： OutlineInputBorder 边框
- fillcolor: 颜色值 填充颜色
- filled: true 是否显示填充颜色
#### SingleChildScrollView
`SingleChildScrollView`单组件滚动组件，一次加载所有组件
通过`ScrollController`可以配置`SingleChildScrollView`组件的实例
ScrollController _scrollController=ScrollController();
- _scrollController 可以获取位置，_scrollController.position.maxScrollExtent 底部位置
- _scrollController.animateTo(距离，时间，方式) 可以配置滚动距离
```js
SingleChildScrollView(
controller: _scrollController,
child: Column(
spacing: 20,
children: List.generate(100, (index) {
return Container(
margin: EdgeInsets.only(top: 20),
height: 50,
alignment: Alignment.center,
color: Colors.blue,
child: Text("我是第${index + 1}个"),
);
}),
),
),
```
#### ListView
`ListView`也是滚动组件，但是与`SingleChildScrollView`不同的是，`ListView`是只渲染展示区域的组件，而非渲染所有的组件
- itemCount 总数量
- itemBuilder 渲染的数据
```js
ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext ctx,int index){
return Container(
height: 30,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue
),
child: Text("第${index+1}个组件",style: TextStyle(color: Colors.white),),
);
})
```
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)