Flutter组件总结
站长
· 阅读数 7
1.布局组件
1.1.Container
一个拥有绘制、定位、调整大小的 widget。
Container(
width: 300, //宽度
height: 300, //高度
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5), //圆角
border: Border.all(width: 2.0, color: Colors.blueAccent //边框
),
color: Colors.green, //颜色
),
alignment: Alignment.center, //对齐方式
padding: EdgeInsets.all(10), //内边距
margin: EdgeInsets.all(10), //外边距
child: Text('测试'), //子组件
);
1.2.Row
在水平方向上排列子widget的列表。
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //主队齐方式
crossAxisAlignment: CrossAxisAlignment.center, //竖对齐方式
children: [ //组件数组
Text('测试1'),
Expanded( //扩展组件
child: Text(
'测试2',
textAlign: TextAlign.center,
),
flex: 1, //剩下的都是我的
),
Text('测试3'),
],
),
1.3.Column
在垂直方向上排列子widget的列表。
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主队齐方式
crossAxisAlignment: CrossAxisAlignment.center, //横对齐方式
children: [ //组件数组
Text('测试1'),
Text('测试2'),
Text('测试3'),
],
),
1.4.Padding
一个widget, 会给其子widget添加指定的填充。
Card(
color: Colors.yellow,
child: Padding(
padding: EdgeInsets.all(10),
child: Text('测试'),
),
);
1.5.Center
将其子widget居中显示在自身内部的widget。
Container(
width: 100,
height: 100,
color: Colors.yellow,
child: Center(
child: Text('测试'),
),
);
1.6.Align
一个widget，它可以将其子widget对齐，并可以根据子widget的大小自动调整大小。
Container(
width: 100,
height: 100,
color: Colors.yellow,
child: Align(
alignment: Alignment(0, 0), //范围-1~1，0为中间
child: Text('测试'),
),
);
1.7.AspectRatio
一个widget，试图将子widget的大小指定为某个特定的长宽比。自身的比例。
Container(
alignment: Alignment.center,
height: 200,
color: Colors.blueAccent,
child: AspectRatio(
aspectRatio: 3, //是自身的宽高比3：1
child: Container(
color: Colors.yellow,
),
),
);
1.8.SizeBox
一个特定大小的盒子。
SizedBox(
width: 100,
height: 100,
child: Center(
child: Text("测试"),
),
);
1.9.Stack
可以允许其子widget简单的堆叠在一起。
Stack( children: [
Container(
width: 200,
height: 200,
color: Colors.pinkAccent,
),
Container(
width: 100,
height: 100,
color: Colors.blueAccent,
),
],);
2.基础组件
2.1.Image
一个显示图片的widget。
Column(
children: [
Image(
image: NetworkImage("网络图片"),
width: 100,
fit: BoxFit.fitWidth, //缩放模式
),
ClipOval( //圆角图片
child: Image.asset(
'本地图片',
width: 100,
height: 100,
fit: BoxFit.contain,
),
)
],
),
2.2.Text
单一格式的文本。
Text(
'测试',
textAlign: TextAlign.center, //内容对齐方式
overflow: TextOverflow.ellipsis, //超出...
style: TextStyle( //字体类型
fontSize: 16,
fontWeight: FontWeight.bold,
fontFamily: '黑体',
color: Colors.blueAccent,
),
),
Text.rich(TextSpan( //富文本
text: '测试',
style: TextStyle(fontWeight: FontWeight.bold),
children: <TextSpan>[
TextSpan(text: '富文本', style: TextStyle(fontSize: 16))
]
)),
2.3.Icon
系统设计的图标。
Icon(
Icons.favorite, //图标
color: Colors.pink, //图标颜色
size: 24, //图标大小
),
IconButton( //图标按钮
onPressed: () {
print('点击图标');
},
icon: Icon(Icons.add),
),
2.4.Button
带有不同属性的按钮。
ElevatedButton( onPressed: () {},
child: Text("elevateButton"),
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)), //字体大小
foregroundColor: MaterialStateProperty.all(Colors.white), //字体颜色
backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
padding: MaterialStateProperty.all(EdgeInsets.all(20)), //内边距
shape: MaterialStateProperty.all(RoundedRectangleBorder( //形状圆角
borderRadius: BorderRadius.circular(20))),
side: MaterialStateProperty.all(BorderSide(color: Colors.purple, width: 1)), //边框大小颜色
minimumSize: MaterialStateProperty.all(Size(200, 200)), //按钮大小
),
2.5.Scaffold
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
Scaffold(
appBar: AppBar( //导航栏
title: Text("Flutter Demo"), ),
body: Test(), //内容
backgroundColor: Colors.grey[100], //背景颜色
bottomNavigationBar: BottomNavigationBar( //底部栏
onTap: (index) {
print('点击的是第$index个');
},
currentIndex: 0,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
],
),
);
2.6.AppBar
一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。
AppBar( //导航栏
title: Text("Flutter Demo"),
actions: [
Icon(Icons.add),
PopupMenuButton( //弹出菜单
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(child: Text('测试1'), value: '1号'),
PopupMenuItem(child: Text('测试2'), value: '2号'),
PopupMenuItem(child: Text('测试3'), value: '3号'),
];
},
onSelected: (object) {
print(object);
},
),
],
backgroundColor: Colors.red,
foregroundColor: Colors.white,
),
2.7.BottomNavigationBar
底部导航条，可以很容易地在tap之间切换和浏览顶级视图。
BottomNavigationBar( //底部栏
onTap: (index) { print('点击的是第$index个'); },
currentIndex: 0,
backgroundColor: Colors.pink,
selectedItemColor: Colors.yellow,
unselectedItemColor: Colors.white,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
],
),
2.8.TabBar
一个显示水平选项卡的Material Design widget。
_tabController = TabController(length: 3, vsync: this);
TabBar(
tabs: [
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.send)),
Tab(icon: Icon(Icons.title)),
],
controller: _tabController,
),
2.9.TabBarView
显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。
_tabController = TabController(length: 3, vsync: this);
TabBarView(
children: [
Text('ceshi1'),
Text('ceshi2'),
Text('ceshi3'),
],
controller: _tabController,
),
2.10.MateralApp
一个方便的widget，它封装了应用程序实现Material Design所需要的一些widget。
MaterialApp(
debugShowCheckedModeBanner: false, //是否显示测试
home: Home(), //主页
theme: ThemeData(primaryColor: Colors.yellow), //主题设置
routes: { //路由集合
"/about": (context) => Test(),
},
);
2.11.Drawer
从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。
Scaffold(
drawer: Drawer( //左滑抽屉
child: ListView(
children: [
DrawerHeader(child: Text('Drawer Header')),
],
),
),
);
2.12.TextField
文本输入框。
TextField(
decoration: InputDecoration(
border: InputBorder.none, // 边框设置
hintText: 'password', ),
keyboardType: TextInputType.number, //键盘类型
textInputAction: TextInputAction.search, //键盘右下角按钮
autofocus: true, //自动聚焦
obscureText: true,//隐藏输入内容，如password
maxLength: 10, ///最大长度
onChanged: (text) { //输入变化 print(text); },
onSubmitted: (val) { //提交内容 print(val); },
enabled: true, //是否可点击
controller: TextEditingController(), //放在外面定义，用于监听
)
2.13.ListView
可滚动的列表控件。ListView是最常用的滚动widget，它在滚动方向上一个接一个地显示它的子组件。在纵轴上，子组件被要求填充ListView。
ListView(
padding: EdgeInsets.all(20),
children: [
Container(
alignment: Alignment.center,
height: 100,
color: Colors.green,
child: Text('测试'),
),
Container(
alignment: Alignment.center,
height: 100,
color: Colors.blueAccent,
child: Text('测试'),
),
Container(
alignment: Alignment.center,
height: 100,
color: Colors.yellow,
child: Text('测试'),
),
],
);
class _TestState extends State<Test> {
final List<String> _text = ['测试', '开发', '发布'];
@override Widget build(BuildContext context) {
return ListView.builder(
itemCount: _text.length,
itemBuilder: (BuildContext context, int index) {
return Container(
alignment: Alignment.center,
height: 100,
color: Colors.yellow,
child: Text(_text[index]),
);
}, )
;
}
}
2.14.ListTile
一个固定高度的行，通常包含一些文本，以及一个行前或行尾图标。
ListView(
children: [
ListTile(
leading: FlutterLogo(size: 40), //左边图标
title: Text('title'), //标题
subtitle: Text('subtitle'), //副标题
trailing: Icon(Icons.favorite), //右边图标
),
ListTile(
leading: FlutterLogo(size: 40),
title: Text('title'),
subtitle: Text('subtitle'),
trailing: Icon(Icons.favorite),
),
],
);
2.15.Divider
一个逻辑1像素厚的水平分割线，两边都有填充。
ListView(
children: [
ListTile(
title: Text('title'),
subtitle: Text('subtitle'),
),
Divider( //分割线
height: 20, //分割线高度
thickness: 5, //厚度高度
indent: 20, //前缩进
endIndent: 20, //后缩进
color: Colors.blueAccent, //颜色
),
ListTile(
title: Text('title'),
subtitle: Text('subtitle'),
),
],
);
后续待补充。。。
转载自:https://juejin.cn/post/6997340903111131150