组件简介
- Flutter 组件是对结构、样式、逻辑的封装
- Flutter组件类型：
- Flutter 组件具有自己的生命周期，且内置了生命周期函数
组件简介-无状态组件
- 无状态组件：
- 在组件内部不需要维护状态的组件，用于纯内容展示
- 渲染组件的数据都是通过组件的构造函数传入的，并且这些数据是不可变的
- 定义方式：
- 继承自 StatelessWidget
- 使用 build() 方法创建组件
- 无状态组件一般可以通过重新创建实例来刷新界面
import 'package:flutter/material.dart';
class MyWidget1 extends StatelessWidget {
MyWidget1(this.text);
final String text;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment.center,
child: Text(text),
);
}
}
组件简介-有状态组件
- 有状态组件：
- 在组件内部需要维护可变的状态来重新构建界面的组件
- 使用 setState() 方法改变状态的值来触发组件重新构建界面
- 有状态组件也可以展示构造函数传入的数据
- 定义方式：状态组件包含两个类
- 一个类继承自 StatefulWidget，作为页面结构的一部分，用作外部展示的
- 另一个类继承自 State，用于记录组件状态，并根据状态的变化，重新构建组件
- 思考：无状态组件和有状态组件如何选取？
- 根据组件内部是否需要组件自己去维护可变状态选取
- 如果需要组件自己去维护可变状态的，选择有状态组件，反之，选择无状态组件
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
class MyWidget2 extends StatefulWidget {
@override
MyWidget2_State createState() =>MyWidget2 _State();
}
class MyWidget2_State extends State<MyWidget2> {
int index = 0;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: TextButton(
child: Text(
'点击了 $index 次按钮',
style: TextStyle(
fontSize: 20.0
)),
onPressed: () {
setState(() {
index++;
});
}
),
);
}
}
组件简介-组件生命周期 & 生命周期函数
- 在Flutter中，StatelessWidget 和 StatefulWidget的生命周期是不一样的
- StatelessWidget 的生命周期
- StatefulWidget 的生命周期
- 常用的生命周期函数：
- initState()：初始化数据、网络请求等
- build()：创建组件
- addPostFrameCallback()：监听组件渲染结束
- dispose()：销毁数据、避免内存泄漏
基础组件-Container组件
- Container组件是一个拥有绘制、定位、调整大小的组件
- Container组件是无状态的组件，继承自StatelessWidget
- 使用场景：需要设置间隔、设置背景色或者背景图、设置圆角或者边框、设置对齐方式
- 常用属性：
- width和height：宽和高
- color：颜色
- alignment：对齐方式
- padding：内部填充（调整位置）
- decoration：装饰（边框、圆角、颜色、背景图等等）
- child：指定子组件
- 注意点：
- 当使用了decoration属性时，就不能再单独使用color属性设置颜色了
import 'package:flutter/material.dart';
class ContainerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container组件')
),
body: Container(
alignment: Alignment.center,
child: Container(
width: 300,
height: 200,
color: Colors.blue,
padding: EdgeInsets.only(left: 30, top: 30, right: 30, bottom: 10),
child: Container(
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.red, width: 5.0),
borderRadius: BorderRadius.circular(10.0)
),
),
),
),
);
}
}
基础组件-Text组件
- Text组件是一个展示普通文本的组件，无状态的组件，继承自StatelessWidget
- 常用属性：
- style：样式（颜色、字号、粗体等等）
- maxLines：文本展示的最大行数
- overflow：文本溢出的处理方式
import 'package:flutter/material.dart';
class TextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Text组件')),
body: Container(
alignment: Alignment.center,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.only(left: 10.0, top: 10.0),
child: Text(
'学习Flutter基础组件-Text',
style: TextStyle(
color: Colors.red,
fontSize: 20.0,
fontWeight: FontWeight.w700
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
);
}
}
基础组件-Image组件
- Image组件是一个展示图片的组件，有状态的组件，继承自StatefulWidget
- 使用方式：
- 加载网络图片： Image.network(src)
- 加载本地静态图片： Image.asset(name)
- 从文件读取图片： Image.file(file)
- 从内存读取图片： Image.memory(bytes)
- 常用属性：
- width和height：宽高
- fit：图片适应方式
加载本地静态图片
- 加载本地静态图片： Image.asset(name)
- 准备工作：
- 在工程根目录下，新建静态资源文件目录 assets
- 需要区分1倍图、 2倍图、3倍图
- 在 pubspec.yaml 文件中，配置静态资源加载路径
- 注意点：
- 如果要使用新加的静态资源，需要重启来运行程序，不要使用热重载启动程序
import 'package:flutter/material.dart';
class ImageWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('image组件'),
),
body: Container(
alignment: Alignment.center,
child: Container(
width: 100.0,
height: 150.0,
color: Colors.red,
child: Image.asset('assets/qiche.png'),
),
),
);
}
}
