学习Flutter的第三天(组件1)
组件1:MaterialApp、Container、Text、Image、Icon
组件2:ListView、GridView
组件3:Padding、Row 、Column、Stack、Align、Positioned
组件4:AspectRatio、Row 、Button
组件5:Wrap、StatelessWidget 、StatefulWidget、Dialog、PageView、TextField
3. Widgets介绍
3.1 MaterialApp
Flutter 提供了许多 widget,可帮助你构建遵循 Material Design 的应用。 Material 应用以 MaterialApp
widget 开始,它在你的应用的底层下构建了许多有用的 widget。这其中包括 Navigator
,它管理由字符串标识的 widget 栈,也称为“routes”。 Navigator
可以让你在应用的页面中平滑的切换。使用 MaterialApp
widget 不是必须的,但这是一个很好的做法。
3.2 Container
Container
是一个 widget,允许你自定义其子 widget
Container 跟 html中的div类似
名称 | 功能 |
---|---|
width | 宽度 |
height | 高度 |
alignment | 内容显示方位 |
decoration | BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像 |
margin | 外边距 |
padding | 内边距 |
transform | 动画 |
代码如下:
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 100, // 宽
height: 100, // 高
alignment: Alignment.center, // 内容显示方位
// 实现边框、圆角、阴影、形状、渐变、背景图像
decoration: BoxDecoration(
color: Colors.red, // 背景
border: Border.all(color: Colors.black, width: 2), // 边框
borderRadius: BorderRadius.circular(10), // 圆角
// 阴影
boxShadow: const [
BoxShadow(
color: Colors.blue,
blurRadius: 10.0,
)
],
gradient:
// 线性渐变
const LinearGradient(colors: [Colors.green, Colors.pink]),
),
child: const Text(
"你好",
style: TextStyle(
color: Colors.yellow,
),
),
),
);
}
}
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 40,
alignment: Alignment.center,
margin: const EdgeInsets.all(10),
// transform: Matrix4.translationValues(40, 0, 0), //位移40(x,y,z )
transform: Matrix4.rotationZ(0.2), // 旋转
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
child: const Text(
"按钮",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
);
}
}
clipBehavior
它的类型是Clip,clipBehavior是组件内容边缘的切割方式,分为四种:
- none (不做处理)
- hardEdge (当内容溢出时,hardEdge切割容器边缘最快,但是精准度欠佳,可能会有一些锯齿存在。)
- antiAlias (抗锯齿,速度要比hardEdge慢一些,但是边缘要平滑一些。)
- antiAliasWithSaveLayer (图层抗锯齿,就是容器中每一个图层都做抗锯齿处理,而antiAlias是在容器的轮廓做抗锯齿,antiAliasWithSaveLayer效果肯定会更好更平滑,但是速度最慢,如果没有明确指明,建议使用antiAlias,这样效果和性能能够达到较好的平衡。)
如何使容器占满上个容器
宽度 和 高度 = double.infinity 或者 double.maxFinite 都代表无穷大
3.3 Text
文本组件
名称 | 功能 |
---|---|
textAlign | 文本对齐方式(center居中,left左对齐,right右对齐,justfy两端对齐) |
textDirection | 文本方向(ltr从左至右,rtl从右至左) |
overflow | 文字超出屏幕之后的处理方式(clip裁剪,fade渐隐,ellipsis省略号) |
textScaleFactor | 字体显示倍率 |
maxLines | 文字显示最大行数 |
style | 字体样式 |
style 样式
名称 | 功能 |
---|---|
decoration | 文字装饰线(none没有线,lineThrough删除线,overline上划线) |
decorationColor | 装饰线颜色 |
decorationStyle | 装饰线风格([dashed,dotted]虚线,doule两根线,solid一根实线,wavy波浪线) |
wordSpacing | 单词间隙(如果是负值,就更紧凑) |
letterSpacing | 字母间隙 |
fontStyle | 文字样式 |
fontSize | 文字大小 |
color | 颜色 |
fontWeight | 字体粗细(bold粗体,normal正常) |
3.4 Image
图片组件
Image.network 加载网络图片
Image.asset 加载本地图片
名称 | 功能 |
---|---|
alignment | 图片对其方式 |
color 和 colorBlendMode | 设置图片的背景颜色,通常和colorBlendMode配合一起使用,这样可以使图片颜色和背景色混合 |
fit | 控制图片的拉伸和挤压 BoxFit.fill:全图显示,图片会被拉伸,并充满父容器 BoxFit.contain:全图显示,显示原比例,可能会有空隙 BoxFit.cover:显示可能拉伸,可能裁剪,充满 BoxFit.fitWidth:宽度充满,显示可能拉伸、裁剪 BoxFit.fitHeight:高度充满,显示可能拉伸、裁剪 BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过原图片大小,可小不可大 |
repeat | 平铺 ImageRepeat.repeat:横向和纵向都进行重复,直到铺满整个画布 ImageRepeat.repeatX:横向重复,纵向不重复 ImageRepeat.repeatY:纵向重复,横向不重复 |
class MyImage extends StatelessWidget {
const MyImage({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 150,
height: 150,
margin: const EdgeInsets.fromLTRB(0, 60, 0, 0),
decoration: const BoxDecoration(color: Colors.yellow),
child: Image.network(
"http://sssssxxxxxx.png",
alignment: Alignment.topLeft,
fit: BoxFit.cover,
),
);
}
}
3.4.1 圆形图片
第一个使用Container的圆角
第二个使用ClipOval
class MyClipImage extends StatelessWidget {
const MyClipImage({super.key});
@override
Widget build(BuildContext context) {
return ClipOval(
child: Image.network(
"https://img1.baidu.com/it/u=724179003,4096104503&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
width: 100,
height: 100,
fit: BoxFit.cover,
),
);
}
}
3.4.2 本地图片
修改 pubspec.yaml 文件,打开注释
assets:
- images/a.webp
Image(image: AssetImage("images/a.webp")
注:每次添加完新的图片,都需要重新run下。这样图片资源,才能复制到build目录下。
3.5 Icon
图标组件
3.5.1 系统Icon
class MyIcon extends StatelessWidget {
const MyIcon({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: const [
SizedBox(
height: 20,
),
// 系统图标
Icon(
Icons.home,
size: 40,
color: Colors.red,
),
],
);
}
}
3.5.2 自定义Icon
Icon类似于iconfont即字体图标,它是将图标做成字体文件,然后通过指定不同的字符显示不同图片
icon与Image相比的优势
- 体积小:可以减小安装包大小。
- 矢量的:iconfont都是矢量图标,放大不会影响其清晰度。
- 可以应用文本样式:可以像文本一样改变字体图标的颜色、大小对齐等。
- 可以通过TextSpan和文本混用。
具体的看视频,查文档