Flutter新手入门常用组件总结，让你了解更多的Flutter组件？
Flutter常用组件
-
- 1.MaterialApp
- 2.Scaffold
- 3.Container
- 4.BoxDecoration（装饰器）
- 5.Row（横向排布）
- 6.Column（纵向排布）
- 7.Expanded和Flexible
- 8.Stack和Positioned（层叠布局）
- 9.页面切换BottomNavigationBar
- 10.RefreshIndicator和ListView（下拉刷新）
- 11.FloatingActionButton(悬浮按钮)
- 12.Text（文本）
- 13.TextField（功能较多）
- 14.PageView（滑动视图）
- 15.Icon（图标）
- 16.CloseButton、BackButton、IconButton（简单按钮）
- 17.Image（加载图片）
- 18.chip（有趣的小组件）
- 19.Divider（分隔符）
- 20.Card（卡片式布局）
- 21AlertDialog（弹出框）
- 22.LinearGradient（颜色渐变）
- 23.RichText（富文本）
- 24. GestureDetector(手势监控）
- 25.Center（组件居中)
- 26.Opacity（透明度）
- 27.MediaQuery.removePadding(去除组件之间空格）
- 28.Slider（滑动进度条）
- 29.ReorderableListView（拖拽排序组件）
因为学完flutter之后，感觉对一些组件的使用不是很熟悉，记录一些巩固一下知识，组件过多，我不会写的非常详细，而且如果你不是很熟悉这些软件有那些功能的话，你可以点进去看这个组件的源码，都是用dart语言编写，看起来也比较轻松，但是我会把关于那个组件详细博客的地址链接放出来，以便日后的学习和查询，使用组件的时候，直接套娃就行。
1.MaterialApp
MaterialApp(
title: 'Flutter Demo', // 指定应用程序在任务栏上显示的标题
theme: ThemeData(
primarySwatch: Colors.blue,
), // 配置应用程序的主题
home: Center(
child: Text("MaterialApp"),
) // 指定应用程序的主界面
);
2.Scaffold
Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。
Scaffold(
appBar: AppBar(
title: Text('页面标题'),
),//头部导航条区域
body: Center(
child: Text('主体内容'),
),//页面主题内容区域
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),//右下角浮动按钮区域
drawer: Drawer(), //侧边栏抽屉区域
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon:Icon(
Icons.home,
color: Colors.grey,
),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: Colors.grey,
),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
title: Text('列表'),
)
],
),
),//底部tabBar区域
效果：
参考博客地址：https://blog.csdn.net/qq_18948359/article/details/82181475
如果想去了解这个组件的，可以去看一下这篇博客，说的很详细。
3.Container
Container(
width: 200, //宽度
height: 200, //长度
child: Text("不错"), //子组件
decoration: BoxDecoration(
color: Colors.blue,
), //装饰器
padding: EdgeInsets.all(10), //内容距离盒子边界的距离
margin: EdgeInsets.all(10) //盒子边界之外的距离
),
4.BoxDecoration（装饰器）
Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue, //颜色背景
image: DecorationImage(
image: NetworkImage("http://wx4.sinaimg.cn/mw690/6a04b428gy1fyrldlsv4yg204r05i3yt.gif"),
//背景图片
fit: BoxFit.cover, //图片充满组件
)，
border: Border.all(
color: Colors.red,
width: 5.0,
)), //设置边框
),
)
)
关于BoxDecoration的使用，可以看一下https://blog.csdn.net/u014112893/article/details/107819564非常详细。
5.Row（横向排布）
使内部的 children 子元素横向布局。
Row(
children: [
Expanded(child: Text('主体内容1'), flex: 2,),
Expanded(child: Text('主体内容2'), flex: 1,)
]
)
6.Column（纵向排布）
使内部的 children 子元素纵向布局
Column(
children: [
Expanded(child: Text('主体内容1'), flex: 2,),
Expanded(child: Text('主体内容2'), flex: 1,)
]
),
7.Expanded和Flexible
两个功能相似，区别是Flexible不会空白区域自动填充
代码：
Row(
children: [
RaisedButton(
onPressed: () {
},
color: const Color(0xffcc0000),
child: new Text('红色按钮'),
),
Flexible(
flex: 1,
child: RaisedButton(
onPressed: () {
},
color: const Color(0xfff1c232),
child: Text('黄色按钮'),
),
),
]
),
Row(
children: [
RaisedButton(
onPressed: () {
},
color: const Color(0xffcc0000),
child: new Text('红色按钮'),
),
Expanded(
flex: 1,
child: RaisedButton(
onPressed: () {
},
color: const Color(0xfff1c232),
child: Text('黄色按钮'),
),
),
]
),
Flexible:
Expened:
8.Stack和Positioned（层叠布局）
其childWidget 可以层叠到一起，层叠顺序：Widget越后创建，层级越靠上。
Positioned一般用来和Stack组件一起来使用，用来进行组件位置的定位。
Stack(
children: [
Positioned(
left: 50,
top: 100,
child: Text("测试")
)
],
),
9.页面切换BottomNavigationBar
int _currentIndex=0; //初始化为0
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index){
setState(() {
_currentIndex=index;
});
},
items: [
BottomNavigationBarItem(
icon:Icon(
Icons.home,
color: Colors.grey,
),
activeIcon: Icon(
Icons.home,
color: Colors.blue,
),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: Colors.grey,
),
activeIcon: Icon(
Icons.list,
color: Colors.blue,
),
title: Text('列表'),
)
],
),
body: _currentIndex == 0
? Center(
child: ListView(
children: [
Text('首页'),
],
),
)
: Text('列表'),
10.RefreshIndicator和ListView（下拉刷新）
RefreshIndicator 是 Material 风格的滑动刷新Widget ，效果是下拉刷新显示的加载圆圈，一般和ListView一起使用，ListView和使用效果和RecycleView类型。
RefreshIndicator(
child: ListView(
children: [
Container(
decoration: BoxDecoration(color: Colors.white),
alignment: Alignment.center,
child: Text("测试")
)
],
),
onRefresh: _handleRefresh, //设置延迟时间
),
Future _handleRefresh() async {
await Future.delayed(Duration(milliseconds: 200));
return null;
}
11.FloatingActionButton(悬浮按钮)
FloatingActionButton(
onPressed: null,
child: Icon(
Icons.add,
size: 20,
),
),
12.Text（文本）
TextStyle textStyle = TextStyle(fontSize: 30, //字体大小
color:Colors.deepOrange, //字体颜色
decoration: TextDecoration.lineThrough, //设置删除线
decorationColor: Colors.green, //删除线颜色为绿色
decorationStyle: TextDecorationStyle.wavy, //删除线为波浪线
fontWeight: FontWeight.bold, //加粗
fontStyle: FontStyle.italic, //斜体
//letterSpacing: 2.0,
// backgroundColor: Colors.blue, //背景颜色
);
Text(
'Hello world', //输出内容
style: textStyle, //字体格式
//textDirection: TextDirection.ltr,
softWrap: false, //自动换行
overflow: TextOverflow.fade, //文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor: 1.0,
)
13.TextField（功能较多）
TextField是一个material design风格的输入框、还有装饰器InputDecoration要有多种属性，可以使用TextEditingController方法获取输入的内容。
TextField(
obscureText: true, //隐藏文本
decoration: InputDecoration(
labelText: "请输入手机号码", //标签文字
hintText: "请输入手机号码", //提示文字
prefixIcon: Icon(Icons.people_alt_rounded) //左侧内图标),
),
如果想了解更多关于TextField属性的功能，可以去看一下这篇博客
https://blog.csdn.net/yechaoa/article/details/90906689
14.PageView（滑动视图）
PageView 是一个滑动视图列表。
Container(
height: 100,
margin: EdgeInsets.only(top: 10),
decoration:
BoxDecoration(color: Colors.lightBlueAccent),
child: PageView(
children: [
_item('Page1',Colors.deepPurple), //_item为自定义私有方法
_item('Page2',Colors.green),
_item('Page3',Colors.red)
],
),
)
_item(String title, Color color) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(color: color),
child: Text(
title,
style: TextStyle(fontSize: 22, color: Colors.white),
),
);
上述代码实现了三个不同颜色的PageView用于滑动
15.Icon（图标）
实现简单的图片和图标功能。
Icon(
Icons.access_alarm, //系统自带图片
size: 50, //图片大小
color: Colors.red, //图片颜色
),
详细Icon博客地址https://blog.csdn.net/yuzhiqiang_1993/article/details/85258876
16.CloseButton、BackButton、IconButton（简单按钮）
简单按钮的实现
CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),
RaisedButton(child:Text('结束'),onPressed: null,),
17.Image（加载图片）
可以用于加载网络图片和本地图片
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)，
想了解更多具体的功能，可以看一下这篇博客https://www.jianshu.com/p/81b1106146c4
18.chip（有趣的小组件）
Flutter一个有趣的小组件
Chip(
avatar: Icon(Icons.people), //左边的图片
label: Text('有趣的小组件'),
deleteIcon: Icon(Icons.remove_red_eye_outlined), //右边图片
onDeleted: ()=>print('删除'), //响应事件
),
19.Divider（分隔符）
Flutter中的分隔符，起到分隔的作用
Divider(
height: 10,
indent: 10,
color: Colors.orange,
),
20.Card（卡片式布局）
经典的Material UI卡片式布局,设计出来的UI很有质感。
Card(
color: Colors.blue, //卡片背景色
shadowColor: Colors.red, //阴影颜色
elevation: 5, //阴影高度
margin:EdgeInsets.all(10), //外边距
child: Container( //用Container容器包裹起来
width: 150,
height: 80,
padding: EdgeInsets.all(10), //内边距
child:Column(
children: [
Text(
'I am Card',
style: textStyle,
),
Icon(
Icons.add_a_photo,
size: 30,
color: Colors.orange,
)
],
)
),
),
21AlertDialog（弹出框）
可以在当前的界面上显示一个对话框
AlertDialog(
title: Text('耗子喂汁'),
content: Text('大意了，没有闪'),
),
22.LinearGradient（颜色渐变）
实现颜色的渐变，一般在Container组件中使用。
LinearGradient(
//AppBar渐变遮罩背景
colors: [Color(0x66000000), Colors.transparent],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
23.RichText（富文本）
用于将几个Text组件组合起来，可以单独设置每个Text的大小和颜色。
RichText(
text: TextSpan(
text: "登陆即视为同意",
style: TextStyle(color: Color(0xAA333333),fontSize: 18),
children: [
TextSpan(
text: "《巴乐兔服务协议》", style: TextStyle(color: Color(0xAACE1928))),
]),
textDirection: TextDirection.ltr, //TextSpan的排列方向
)
RichText组件详细博客地址：https://blog.csdn.net/jungle_pig/article/details/95069268
24. GestureDetector(手势监控）
手势监控组件，一般用于单击双击，长按等手势的监控。
GestureDetector(
onTap: () => _printMsg("点击"),
onDoubleTap: () => _printMsg("双击"),
onLongPress: () => _printMsg("长按"),
onTapCancel: () => _printMsg("取消"),
onTapUp: (e) => _printMsg("松开"),
onTapDown: (e) => _printMsg("按下"),
child: Container(
decoration: BoxDecoration(color: Colors.redAccent),
width: 100,
height: 100,
),
)
手势监控详细博客地址：
https://www.jianshu.com/p/96ab1c189683
25.Center（组件居中)
用于把组件显示到页面正中间，使用起来比较简单，就不仔细说明了。
26.Opacity（透明度）
用于设置透明度
Stack(
children: <Widget>[
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg',
),
Positioned.fill(
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.blue],
begin: Alignment.bottomCenter,
end: Alignment.topCenter),
),
),
),
),
],
)
Opacity详细博客地址：
https://blog.csdn.net/mengks1987/article/details/104416468/
27.MediaQuery.removePadding(去除组件之间空格）
MediaQuery.removePadding(
removeTop: true,
context: context,
child: ,
)
28.Slider（滑动进度条）
double _sliderValue = 0;
Slider(
value: _sliderValue, //当前值
onChanged: (v){
setState(() {
_sliderValue = v;
}); //滑动改变值
},
)
Slider详细博客地址：
https://blog.csdn.net/mengks1987/article/details/108526412
29.ReorderableListView（拖拽排序组件）
ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。
关于这个组件的使用可以看一下这篇博客https://blog.csdn.net/mengks1987/article/details/104722644/
因为没写多久，可能还有很多组件没有考虑到，欢迎补充。
参考博客地址：
https://blog.csdn.net/xueshao110/article/details/90726976
https://blog.csdn.net/u014112893/article/details/107819564
https://blog.csdn.net/chunchun1230/article/details/82460257
https://blog.csdn.net/qq_18948359/article/details/82181475
https://www.jianshu.com/p/f1b8fbe5cda0?utm_source=desktop&utm_medium=timeline
https://blog.csdn.net/yechaoa/article/details/90906689
https://blog.csdn.net/yuzhiqiang_1993/article/details/85258876
https://www.jianshu.com/p/81b1106146c4
https://blog.csdn.net/jungle_pig/article/details/95069268
https://www.jianshu.com/p/96ab1c189683
https://blog.csdn.net/mengks1987/article/details/104416468/
https://blog.csdn.net/mengks1987/article/details/108526412