Flutter-组件功能及使用汇总_flutter组件详解

​
整理目的：写界面时能迅速匹配合适组件，以及常见用法（常见属性）。遗忘后有地方检索

图片相关

ClipRRect

常用于切割图片为圆角

ClipRrect(
	borderRadius:BorderRadius.only(
		topLeft:Radius.circular(),
		topRight:Raius.circular()
	),
	child:Image.network(url)
)
1
2
3
4
5
6
7

Image.network

加载网络图片

Image.network(
	url,
	width:double.infinity,  //横向填充
	height:20,
	fit:BoxFit.cover
)
1
2
3
4
5
6

Image.assets

是一个Widget。
可用于BottomNavigationBarItem的icon属性。

Image.asset(
	'assets/images/my_image.png',
	width:30,
	height:30
)
1
2
3
4
5

AssetImage

是一个ImageProvider。
AssetImage通常用于在背景图像（如Container的背景）或DecorationImage中使用本地资源的图片。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/my_image.png'),
      fit: BoxFit.cover,
    ),
  ),
)
1
2
3
4
5
6
7
8

CircleAvatar

圆形头像

CircleAvatar(
	backgroundColor:
	child:  //一般放图片，也可以放文字
)
1
2
3
4

常见包裹组件

Card

功能：卡片样式，Gesture添加点击功能

Card(
    margin:EdgeInsets.all(10),
    elevation: 5
    shape:RoundedRectangleBorder()
    child:
)
1
2
3
4
5
6

RoundedRectangleBorder

常作为shape属性的属性值

RoundedRectangleBorder(
    borderRadius:BorderRadius.circular(12)
)
1
2
3

BorderRadius

borderRadius的属性值

BorderRadius.circular(12)
1

Positioned

常见于Stack给子组件定位

Positioned(
	left:
	bottom:
	child:
)
1
2
3
4
5

Container

最常见组件之一，包裹组件增加背景，边距，对齐方式等

Container(
	width:MediaQuery.of(context).size.width-30,  // 类似左右外边距效果
	padding:EdgeInsets.symmetric(horizontal:10,vertical:5),
	decoration:BoxDecoration(),
	child:
	alignment:Alignment
)
1
2
3
4
5
6
7

滚动视图

SingleChildScrollView

单子组件滚动页面

SingleChildScrollView(
	child:
)
1
2
3

CustomScrollView

可以包含多个 Sliver 类型的子组件，例如 SliverAppBar、SliverToBoxAdapter、SliverList、SliverGrid等。
可以进行性能优化，只加载当前可见区域的内容。
可以嵌套在其他滚动组件中，如 NestedScrollView。

CustomScrollView(
	slivers:[
		SliverAppBar(),
		SliverList()
	]
)
1
2
3
4
5
6

SliverAppBar

实现带有折叠效果的应用栏

SliverAppBar(
	title:Text(),
	floating:true,   //向上滚动隐藏，向下滚动显示
	pinned:true   //通常与floating一起使用，滚动到顶部时应用栏固定在页面顶部
)
1
2
3
4
5

SliverList

Sliver列表

SliverList(
	delegate:SliverChildBuilderDelegate((context,index) => ListTile();),
	childCount:20,
)
1
2
3
4

SliverToBoxAdapter

将普通的Widget包装成一个 Sliver，从而可以在滚动视图中使用。

SliverToBoxAdapter(
	child:Container()
)
1
2
3

SliverFixedExtentList

在滚动视图中展示具有固定高度或宽度的子项列表。
当需要展示大量具有相同尺寸的子项时，使用 SliverFixedExtentList可以提高性能，因为它可以预先确定每个子项的尺寸。

SliverToBoxAdapter(
	child:Container()
)
1
2
3

NestedScrollView

嵌套滚动

NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) {
    return SliverAppBar(
        title: Text('NestedScrollView Example'),
        floating: true,
        pinned: true,
        expandedHeight: 200.0,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('Flexible Space Example'),
          background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
        ),
      );
  },
  body: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(title: Text('Item $index'));
    },
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

GridView

按照行或列的方式排列子组件，并支持滚动、分页等功能。
可以放在 ListView或 NestedScrollView中，实现网格布局的滚动功能。

GridView.builder(
	scrollDirection：Axis.horizontal,   //Axis.vertical
	shrinkWrap:true,  //默认false，无固定高度，导致组件异常
	physics:NeverScrollableScrollPhysics(),  //不局部滚动
	padding:EdgeInsets.zero,
	gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
	    crossAxisCount: 2,
	    crossAxisSpacing: 10.0,
	    mainAxisSpacing: 10.0,
	  ),  //定义子项之间的间距和布局方式
	  itemCount: 4,
	  itemBuilder: (context, index) {
	    return Container(
	      decoration: BoxDecoration(
	        borderRadius: BorderRadius.circular(8.0),
	        color: Colors.grey[200],
	      ),
	      child: Image.network('https://example.com/image$index.jpg'),
	    );
	  },
  )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ListView

列表静态视图。
即使列表很长，所有的列表项也会被一次性构建并加载到内存中。

ListVIew(
	children:[
		ListTile(title:Text('Item 1')),
		ListTile(title:Text('Item 2')),
		// Add more list items as needed
	]
)
1
2
3
4
5
6
7

ListView.buider

列表渲染视图，默认滚动。
只有在列表项进入视口时才会被构建，从而节省内存和提高性能。

ListView.builder(
	shrinkWrap:true,  //默认false，无固定高度，导致组件异常
	physics:NeverScrollableScrollPhysics(),  //不局部滚动
	padding:EdgeInsets.zero,
	itemCount:  //不指定为无限
	itemBUilder: (context,index) {}
)
1
2
3
4
5
6
7

ListView.separated

带分割线的列表渲染

ListView.separated(
	shrinkWrap:
	physics:
	padding:
	itemCount:
	itemBuilder:(ctx,index) {},
	separatorBuilder:(ctx,index) => Divider()
)
1
2
3
4
5
6
7
8

ListTitle

可作为List的子组件

ListTitle(
	title:
	subTitle:
	leading:
	trailing:
	onTap:() {},
)
1
2
3
4
5
6
7

页面跳转

Navigator

跳转

Navigator.of(context).pushNamed(routeName,arguments:)

ModalRoute.of(context).settings.arguments as MyXXXModel
1
2
3

Navigator

自定义的页面跳转管理，通过自定义onPopPage回调函数，返回操作自定义处理。

Navigator(
// 表示Navigator的全局唯一键，可获取NavigatorState
	key:  
// 当前管理的页面栈，List类型，存储当前页面所有Page对象
	pages:
// 回调函数，处理页面返回操作。
	onPopPage:
)
1
2
3
4
5
6
7
8

例子：判断当前页面是否是LoginPage，当用户未登录时，拦截返回操作并显示提示信息。不需要拦截时，执行实际的返回操作，更新页面栈。

onPopPage:(route,result) {
	if(route.settings is MaterialPage) {
		// 未登录返回拦截
		if((route.settings as Materialpage).child is LoginPage) {
			if(!hasLogin) {
				showWarnToast('请先登录');
				return false;
			}
		}
		// 执行返回操作
		if (!route.didPop(result)) {
			return false;
		}
		var tempPages = [...pages];
		pages.removeLast();
		// 通知路由发生变化
		WisdomNavigator.getInstance().notify(pages,tempPages);
		return true;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

补充：其中回调函数的第一个参数route，表示当前要执行返回操作的路由对象。route.settings是当前路由的配置信息，为RouteSettings对象，包含路由的路由名称、页面构建器等。判断当前路由是Material风格，从而执行相应操作。

pageWrap

常用于页面跳转，创建包装了指定Widget的MaterialPage对象的函数

pageWrap(Widget child) {
	return MaterailPage(
		key:ValueKey(child.hashCode),
		child:child
	)
}
1
2
3
4
5
6

说明：key用于指定页面的唯一标识。ValueKey(child.hashCode)创建一个ValueKey对象，是Key类的一个具体实现。在这里使用传入Widget的哈希码作为标识。

未分类

Alignment

alignment的属性值，自定义对齐位置？

Alignment(0,0.5)  //x,y
1

BoxDecoration

decoration的属性值

BoxDecoration(
	color:
	borderRadius:BorderRadius.circular(6)
)
1
2
3
4

SizedBox

常用于组件间增肌间隔（对于没有内外边距的组件）

SizedBox(
	width:
	height:
)
1
2
3
4

Row

常见横向布局属性

Row(
	mainAxisAlignment:MainAxisAlignment.spaceAround,
	child:
)
1
2
3
4

GestureDetector

为组件添加点击事件

GestureDetector(
	onTap:() {},
	child:
)
1
2
3
4

Drawer

抽屉

Drawer(
	child:
	backgroundColor:
)
1
2
3
4

DrawerHeader

抽屉的头部

Drawerheader(
	child:
)
1
2
3

Scaffold

常见顶层组件

Scaffold(
	appBar:AppBar(title:),
	body:
	floatingActionButton:FloatingActionButton(
		child:Icon,
		onPressed:() {}
	),
	drawer:Drawer()  //如果需要改变宽度包裹Container
)
1
2
3
4
5
6
7
8
9

ChangeNotifierProvider

Provider消息分发组件

ChangeNotifierProvider(
	create:(ctx) => MyXXXModel(),
	child:MyApp()
)
1
2
3
4

MultiProvider

分发多个Provider

MultiProvider(
	providers:[
		ChangeNotifierProvider()
	],
	child:MyApp()
)
1
2
3
4
5
6

AppBar

appBar的属性值

AppBar(
	title:
	centerTitle：true,  // 标题默认不居中
	leading:Builder(),
	backgroundColor:
)
1
2
3
4
5
6

Builder

此处用于给drawer改变图标，使用builder才能获取context？

Builder(
	builder:(ctx) => IconButtion()
)
1
2
3

IconButton

续上文，改图标

IconButtion(
	icon:
	onPressed:() => Scaffold.of(context).opendrawer()  
)
1
2
3
4

FutureBuilder

初始化加载一次

FuttureBuilder(
	future:
	builder:
)
1
2
3
4

StreamBuilder

持续监听加载

StreamBuilder(
	Stream:Stream.fromFuture()/_controller.stream
	builder:
)
1
2
3
4

WillPopScope

捕获返回按键的点击事件，自定义返回操作，阻止返回操作

WillPopScope(
	onWillPop:() async {
		// 处理返回按钮点击事件
		bool confirm = await shhowDialog(
			context:context,
			builder:(context) => AlertDialog(
				title:Text('确认退出？'),
				actions:[
					FlatButton(
						child:Text('取消'),
						onPressed:() => Navigator.of(context).pop(false)
					),
					FlatButton(
						child:Text('确认'),
						onPressed:() => Navigator.of(context).pop(true)
					)
				]
			)
		)
		// 返回ture允许返回，返回false拒绝
		return confirm ?? false;
	},
	child:YourChildWidget(),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24