前言：
各位同學(xué)大家好，有一段時間沒有給大家更新文章了， 最近寫了一個flutter的warp流式布局的小案例。就想著分享給大家，那么廢話不都說 我們我們正式開始
準(zhǔn)備工作
需要安裝flutter的開發(fā)環(huán)境：大家可以去看看之前的教程：
1 win系統(tǒng)flutter開發(fā)環(huán)境安裝教程: http://www.itdecent.cn/p/152447bc8718
2 mac系統(tǒng)flutter開發(fā)環(huán)境安裝教程：http://www.itdecent.cn/p/bad2c35b41e3
效果圖：
具體實現(xiàn)：
@override
Widget build(BuildContext context) {
final width=MediaQuery.of(context).size.width;
final height=MediaQuery.of(context).size.height;
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("warp 流式布局"),
),
body: Center(
child: Opacity(
opacity: 0.8,
child: Container(
width: width,
height: height/2,
color:Colors.grey ,
child: Wrap(
children: list,
spacing: 26.0,
),
),
),
),
);
}
首先我們 在Widget build 方法體里先獲取屏幕的寬高
final width=MediaQuery.of(context).size.width;
final height=MediaQuery.of(context).size.height;
然后我們返回一個 Scaffold 腳手架框架組件 里面設(shè)置appbar
return Scaffold(
appBar: AppBar(
title: Text("warp 流式布局"),
),
body: Center(
child: Opacity(
opacity: 0.8,
child: Container(
width: width,
height: height/2,
color:Colors.grey ,
child: Wrap(
children: list,
spacing: 26.0,
),
),
),
),
);
我們Scaffold 里面body屬性設(shè)置一個Center 組件使得內(nèi)容居中 然后在Center組件中嵌套 Opacity 設(shè)置 opacity 屬性為0.8 然我們在里面嵌套Container 組件 寬度設(shè)置屏幕寬帶 高度為屏幕高度一半 然后我們在Container 組件里面嵌套 Wrap 組件 children 里面的顯示內(nèi)容來自我們的list數(shù)組
數(shù)據(jù)內(nèi)容來源
List<Widget>list;
@override
void initState() {
super.initState();
list=List<Widget>()..add(buildAddButton());
}
我們定義list數(shù)組返回widget buildAddButton（）
Widget buildAddButton(){
return GestureDetector(
onTap: (){
setState(() {
if(list.length<9){
list.insert(list.length-1, buildPhoto());
}
});
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child:Container(
width: 80,
height: 80,
color: Colors.black54,
child: Icon(
Icons.add
),
),
),
);
}
在 buildAddButton 方法中我們判斷邏輯當(dāng) list 數(shù)組的長度 小于9的時候 我們就添加數(shù)據(jù)否則添加
onTap: (){
setState(() {
if(list.length<9){
list.insert(list.length-1, buildPhoto());
}
});
},
這里的 buildPhoto 為添加的widget
buildPhoto（）方法里面就比較簡單了 返回一個 Container 和組件寬高 都為80 然后里面嵌套一個text 組件
Widget buildPhoto(){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 80,
height: 80,
color: Colors.amber,
child: Center(
child: Text("照片"),
),
),
);
}
最后我們將list 賦值給我們的 Wrap 里面的 children 即可
child: Wrap(
children: list,
spacing: 26.0,
),
到此整個flutter warp就講完了
最后總結(jié)：
flutter中提供了比較好用的流水布局的組件 我們很容易就實現(xiàn)了上的效果需要特別主體的是在添加數(shù)據(jù)的時候一定要 調(diào)用 setState(() { }); 否則無法正常刷新UI 。有興趣的同學(xué)可以繼續(xù)深入研究做出更多花樣的效果 ，我這里就不展開講了 ,最后希望我的文章能幫助到各位解決問題 ，以后我還會貢獻(xiàn)更多有用的代碼分享給大家。各位同學(xué)如果覺得文章還不錯 ，麻煩給關(guān)注和star，小弟在這里謝過啦
