Flutter中一切皆组件（Widget），一个Flutter项目可以看作是大量的Widget堆砌而成，类似于堆乐高积木。
因为网上已经有很多Flutter各组件的详细使用已，所以此篇只罗列常用组件，以查漏补缺使用。
Flutter中的组件可以分为两大类，一个是谷歌Material风格的设计组件，另一个是iOS风格的组件。
一. Material风格的组件
1. 容器组件 Container
容器组件会包含一个child组件，自身可以设置对齐方式、padding、margin和背景颜色等。
2. 图片组件 Image
Image组件有多种构造函数，可以用不同方式加载图片：
-
Image: 从ImageProvider获取图像 -
Image.asset: 加载资源图片 -
Image.file： 加载本地图片文件 -
Image.network: 加载网络图片 -
Image.memory： 加载Uint8List资源图片
Image组件加载显示图片后，可以设置fit属性来控制图片的显示方式：
-
BoxFit.fill全图充满显示，图片可能拉伸 -
BoxFit.contain全图显示，按照原比例，不需要充满 -
BoxFit.cover显示可能拉伸，可能裁剪，充满 -
BoxFit.fitWidth宽度充满，图片可能会被拉伸或者裁剪 -
BoxFit.fitHeight高度充满，图片可能会被拉伸或者裁剪 -
BoxFit.none原始大小 -
BoxFit.scaleDown类似于contain方式，但是不允许显示超过原始图片大小，即可小不可大
3. 文本组件 Text
显示文字的组件...
4. 图标及按钮组件
图标组件Icon为展示图标的组件，常用的有：
-
IconButton：可点击的图标按钮组件 -
Icons：Flutter自带的图标集合 -
IconTheme: Icon主题 -
ImageIcon: 通过AssetImages或者其他图片显示图标
按钮组件为可点击响应的组件，类似于Icon组件：
-
IconButton： 可点击的图标按钮组件 -
RaisedButton: 凸起按钮组件 -
FloatingActionButton悬停按钮组件，Scaffold组件中设置 -
FlatButton扁平按钮组件，点击时候会有阴影效果
5. 列表组件
基础列表组件为ListView，可以设置水平或者垂直方向滚动。
水平布局组件可以使用Row组件
垂直布局组件可以使用Column组件
当数据过多，比如通讯录这种长列表的时候，可以使用ListView的builder命名构造方法，来构造长列表。
当数据过多，要用网格布局的时候，可以使用GridView组件。GridView创建方式有两种：
- 使用
GridView.count通过单行展示个数来创建 - 使用
GridView.extent通过最大宽度来创建
6. 表单组件
表单里有两个重要的组件，一个是Form用来提交表单，另一个是TextFormField组件用来输入内容的。
Form组件的常用属性：
-
key该组件在整个组件树中的key值 -
autovalidate是否自动提交表单 -
onChanged当FormField值改变时的回调函数
TextFormField组件的常用属性：
-
autovalidate自动验证值 -
initialValue表单字段初始值 -
onSave当Form表单调用保存方法save时的回调函数 -
validatorForm表单验证器
对于输入，我们最关心的是验证输入内容是否合法。为了获取表单实例，我们需要设置一个全局key:
GlobalKey<FormState> key = GlobalKey<FormState>();
并把该key值赋值给Form组件的key属性。
7. 装饰类组件：
-
Opacity：透明度处理 -
DecoratedBox装饰盒子，设置颜色、阴影、形状、渐变和背景图片等 -
RotatedBox旋转盒子 -
ClipOval: 圆形裁剪 -
ClipRRect: 圆角矩形裁剪 -
ClipRect: 矩形裁剪 -
ClipPath: 按照设置的路径自定义裁剪，需要继承自CustomerClipper类，并且重写getClip方法返回裁剪路径，和重写ShouldReclip方法返回true:
// 自定义裁剪
class MyClip extends CustomClipper {
@override
getClip(Size size) {
Path path = Path();
path.moveTo(10, 10);
path.lineTo(10, 101);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return true;
}
}
8. 动画组件
常用的动画组件有：
-
AnimatedOpacity实现渐变效果组件 -
Hero页面切换动画组件
☁️✨☁️☁️☁️☁️☁️☁️☁️ 其他组件 ☁️☁️☁️☁️☁️☁️☁️✨☁️：
MaterailApp组件
代表一种设计风格的组件。里面包含了所需要的各种基本组件。一个完整的Flutter项目就是从MaterailApp组件开始的
MaterailApp包括设置主页，设置路由，自定义主题等。
Scaffold组件
脚手架组件显示了material风格的页面布局，单个页面的布局都可以使用该组件。
脚手架组件可以设置显示 顶部导航栏 、 底部导航栏 和 侧拉抽屉
应用按钮组件（顶部导航栏组件）
应用按钮组件有AppBar和SliverAppBar两种。区别是AppBar是固定不动的，SliverAppBar可以随着内容滚动而变化。
应用按钮组件中可以设置TabBar顶部导航栏。
底部导航组件
BottomNavigationBar组件是底部导航条，可以浏览切换顶级视图。
水平选项卡组件（TabBar）
水平选项卡组件类似于网易新闻主页的各个新闻种类组件。
TabBar组件的使用，需要用到DefaultTabController组件，他是关联TabBarView组件和TabBar组件的桥梁。
实例代码如下：
main () => runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatelessWidget {
final myTabs = [Tab(text: "体育",), Tab(text: "财经",)];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: myTabs.length,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(tabs: myTabs),
),
body: TabBarView(
children: myTabs.map((Tab tab){
return Text(tab.text);
}).toList(),
),
),
);
}
}
抽屉组件Drawer
抽屉组件Drawer通常跟ListView组件配合使用
弹出菜单组件
PopupMenuButton为弹出菜单组件，通常放于页面右上角，表示更多的操作。
简单对话框组件
SimpleDialog为简单对话框组件，于屏幕中弹出一个选择或者展示列表，用来显示附加的提示或者操作。
注意这个过程是异步的，需要加入async/await处理。
提示对话框组件
AlertDialog组件为提示对话框组件，不仅有弹出提示，还有操作按钮，比如确定、取消。
轻量提示组件
SnakBar为轻量提示组件，于屏幕下方显示，常用于请求后的状态提示等。
文本框组件
TextField为文本框组件，常用于做文本输入。
如果想要获取到文本的输入内容，需要绑定controller到TextField，用来监听文本输入内容。
final TextEditingController controller = TextEditingController();
卡片组件
Card卡片组件常与ListTile组件一起使用。
二. Cupertino风格的组件
Cupertino风格主要是用来开发iOS时候使用。
1. CupertinoActivityIndicator
一个iOS风格的loading指示器，通常用来加载等待。
2. CupertinoAlertDialog
AlertView的组件
使用的时候，内容部分可以用SingleChidlScrollView组件进行包裹。操作按钮可以用CupertinoDialogAction组件。
3. CupertinoButton
4.导航组件
- CupertinoTabScaffold
- CupertinoTabView
- CupertinoPageScoffold
- CupertinoNavigationBar
网友评论