文章目录
一、Widget分类
Widget的分类有很多类别，每个类别下面又包含很多Widget，主要包括以下几种类别：
- Basics：在构建第一个Flutter应用程序之前，需要知道的Basics Widget。
- Material Components：Material Design风格的Widget。
- Cupertino：iOS风格的Widget。
- Accessibility：辅助功能Widget。
- Animation and Motion：动画和动作Widget。
- Async：Flutter应用程序的异步Widget。
- Input：除了在Material Components和Cupertino中的输入Widget外，还可以接受用户输入的Widget。
- Interaction Models：响应触摸事件并将用户路由到不同的视图中。
- Layout：用于布局的Widget。
- Painting and effects：不改变布局、大小、位置的情况下为子Widget应用视觉效果。
- Scrolling：滚动相关的Widget。
- Styling：主题、填充相关Widget。
- Text：显示文本和文本样式。
二、widget的状态
widget的状态分别是无状态的StatelessWidget、有状态的StatefulWidget。StatefulWidget可以通过配合State的方式来保存状态。
State生命周期：
- initState。create之后被insert到渲染树时调用的，只会调用一次
- didChangeDependencies。state依赖的对象发生变化时调用
- didUpdateWidget。Widget状态改变时候调用，可能会调用多次
- build。构建Widget时调用
- deactivate。当移除渲染树的时调用
- dispose。Widget即将销毁时调用
三、根widget
根widget的种类有以下几种：
- WidgetsApp： 如果需要自定义风格，可以使用WidgetsApp。
- MaterialApp：Material Design风格的Widget。
- CupertinoApp iOS风格的根Widget。
一般使用MD风格的MaterialApp就行了
四、Basics
Basics主要有以下几种：
- Container：一个便利的容器Widget，可以设置Widget的背景、尺寸、定位。
- Row：在水平方向上布置子窗口Widget列表。
- Column：在垂直方向上布置子窗口Widge列表。
- Image：显示图像的Widget
- Text：单一样式的文本。
- Icon：符合Material Design设计规范的图标
- RaisedButton：符合Material Design设计规范的凸起按钮。
- Scaffold：实现Basics 的Material Design布局结构。
- Appbar：Material Design的应用栏。
- FlutterLogo：以Widget形式来展示一个Flutter图标，可以调整样式。
- Placeholder：绘制一个框，为将来添加的Widget的占位。
4.1 模板和主题
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(//MD风格的widget
title: 'Welcome to Flutter',
home: Scaffold(//布局结构
appBar: AppBar(//应用栏
title: Text('应用栏标题'),
),
body:
Padding(
padding: EdgeInsets.all(40.0),
child: Text('此处就是Basics Widget'),
),
),
);
}
}
4.2 Text文本
child: Text(
'文本Text',
style: TextStyle(
fontSize: 16.0,//大小
color: Colors.indigo,//颜色
fontStyle: FontStyle.normal,//风格
fontWeight: FontWeight.bold//加粗
),
)
4.3 图片
Image的构造：
- new Image：从ImageProvider获取图片
- new Image.asset：使用key从AssetBundle获取图片
- new Image.network：加载网络图片
- new Image.file：从文件中获取图片
- new Image.memory：用于从Uint8List获取图片
image的属性主要有fit，表示图片的填充模式，参数类型为BoxFit：
- 1.contain。全图显示，保持原比例。
- 2.cover。全图充满，可能拉伸也可能被裁剪
- 3.fill。全图显示，通过拉伸来充满目标框
- 4.fitHeight。图片高度充满目标框，可能拉伸也可能被裁剪
- 5.fitWidth。图片宽度充满目标框，可能拉伸也可能被裁剪
- 6.none。保持图片的原始大小，剪裁掉位于目标框外的图片部分
- 7.scaleDown。与contain缩小图像的方式相同，只不过会在必要时缩小以确保图片完全在目标框内，如果不缩小等同于none。
child: Image.network(
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1877247387,402758218&fm=26&gp=0.jpg",
width: 200,
height: 200,
fit: BoxFit.fill,
)
运行结果：
4.4 凸起按钮
凸起按钮符合MD 设计风格，可以通过onPressed来回调按钮的点击。
child: RaisedButton(
onPressed: ()=>print("onPressed"),
color: Colors.lightBlueAccent,
child: Text('RaisedButton',style: TextStyle(fontSize: 10)),
)
运行结果：
4.5 其他widget
Basics Widget中的还有Row、Column、Container等Widget
4.5.1 Row
Row用于在水平方向显示数组中的子元素Widget。
child: Row(
children: <Widget>[
Icon(Icons.access_alarm),
Icon(Icons.add_a_photo),
Icon(Icons.add_call)
],
)
运行结果：
垂直方向：
child: Column(
children: <Widget>[
Icon(Icons.access_alarm),
Icon(Icons.add_a_photo),
Icon(Icons.add_call)
],
)
需要注意的是，可以使用Expanded来配合Row和Column使用，用来填充剩余的空间：
child: Row(
children: <Widget>[
Icon(Icons.access_alarm),
Icon(Icons.add_a_photo),
Icon(Icons.add_call),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
flex: 2,
),
Expanded(
child: Text(
"占三分之一",
),
flex: 1,
)
],
)
主要还是靠Expanded配合flex来控制占比：
4.5.2 container
类似于ViewGroup，可以设置Widget的背景、尺寸、定位
child: Container(
decoration: BoxDecoration(
color: Colors.lightGreen
),
child: Text('这是Container'),
padding: EdgeInsets.all(36.0),
margin: EdgeInsets.all(10.0),
)
来源：https://blog.csdn.net/qq_36299025/article/details/99305690