??????一年一度的谷歌大會又開始了，谷歌對 Flutter 的投入力度又加大了，所以更得好好學 Flutter 了。小菜在做新聞列表方面的 Demo 時，想到會在列表中展示多種不同 item 樣式，今天特意借助上一篇關于 ListView 的小例子 稍微調整一下，測試 ListView 中多種 item 樣式展示方式。

嘗試如下

??????小菜按照 Android 的想法，應該會對 Android 列表的 ViewHolder 中進行狀態判斷；類似的小菜想在 itemBuilder 中對布局樣式進行判斷，想法是可以的，只是在實踐中遇到兩個小小的問題，分析一下，如下：

Widget buildListData(BuildContext context, String strItem, Icon iconItem, int type) {Widget widget;switch (type) {case 1: ...break;case 2: ...break;}return widget; }

實踐注意

一. item 類型顯示不完整

小菜首先往 buildListData 中傳入 item 樣式類型，針對樣式類型判斷 Widget 樣式，當然類型傳入方式多種多樣按實際情況而定；

List<int> stateItems = <int>[1, 1, 2, 2, 0, 1, 1, 1, 0, 1, 2, 2, 1, 2, ];

小菜編輯了一個 stateItems 有 0，1，2 三種樣式類型，但是在 buildListData 中只判斷了 1 和 2 兩種，小菜以為會隱藏掉當前 item，可結果出乎意料，在 0 及以后的 item 全部不顯示，完全中斷；如圖：

添加相應的判斷處理之后即正常展示，如圖：

二. GestureDetector 手勢方法注意

??????默認很多 Widget 沒有 onTab() 方法，但是可以用 GestureDetector 來進行手勢處理；小菜建議使用 GestureDetector 時針對具體的 Widget，例如對 item 進行點擊操作時，對整個 item 外添加 GestureDetector，小菜當時糊涂把 GestureDetector 添加錯 Widget 以為使用方式有問題，請各位注意。

三. Widget 顯隱性

??????小菜在實際測試的過程中需要用到【Widget 顯隱性】，小菜想 Flutter 最大的特點就是一切都是 Widget，同時 Widget 不可為 null(錯誤：Widget wi = null)，于是小菜把需要隱藏的 Widget 設置寬和高為 0.0，不知道各位有沒有更好的實現方式。

Widget wi; if ('圖標 -> pages' == strItem) {wi = new Container(height: 0.0, width: 0.0); } else {wi = new Text(strItem,style: new TextStyle(color: Colors.blueAccent, fontSize: 18.0),); }

核心源碼

List<int> stateItems = <int>[1, 1, 2, 2, 0, 1, 1, 1, 0, 1, 2, 2, 1, 2, ]; List<String> strItems = <String>['圖標 -> keyboard', '圖標 -> print', '圖標 -> router','圖標 -> pages', '圖標 -> zoom_out_map', '圖標 -> zoom_out','圖標 -> youtube_searched_for', '圖標 -> wifi_tethering', '圖標 -> wifi_lock','圖標 -> widgets', '圖標 -> weekend', '圖標 -> web', '圖標 -> accessible', '圖標 -> ac_unit', ]; List<Icon> iconItems = <Icon>[new Icon(Icons.keyboard), new Icon(Icons.print), new Icon(Icons.router),new Icon(Icons.pages), new Icon(Icons.zoom_out_map), new Icon(Icons.zoom_out),new Icon(Icons.youtube_searched_for), new Icon(Icons.wifi_tethering), new Icon(Icons.wifi_lock),new Icon(Icons.widgets), new Icon(Icons.weekend), new Icon(Icons.web),new Icon(Icons.accessible), new Icon(Icons.ac_unit), ];Widget buildListData(BuildContext context, String strItem, Icon iconItem, int type) {Widget widget;switch (type) {case 1:widget = new ListTile(isThreeLine: false,leading: iconItem,title: new Text(strItem),trailing: new Icon(Icons.keyboard_arrow_right),onTap: () {showDialog(context: context,builder: (BuildContext context) {return new AlertDialog(title: new Text('ListViewDemo',style: new TextStyle(color: Colors.black54,fontSize: 18.0,),),content: new Text('您選擇的item內容為:$strItem,item 狀態為 1'),);},);},);break;case 2:Widget wi;if ('圖標 -> pages' == strItem) {wi = new Container(height: 0.0, width: 0.0);} else {wi = new Text(strItem,style: new TextStyle(color: Colors.blueAccent, fontSize: 18.0),);}widget = new GestureDetector(child: new Column(children: <Widget>[iconItem,wi,],),onTap: () {showDialog(context: context,builder: (BuildContext context) {return new AlertDialog(title: new Text('ListViewDemo',style: new TextStyle(color: Colors.black54,fontSize: 18.0,),),content: new Text('您選擇的item內容為:$strItem,item 狀態為 2'),);},);},);break;default:widget = new Container(height: 50.0,color: Colors.greenAccent,child: new Padding(padding: new EdgeInsets.all(12.0),child: new GestureDetector(child: new Text('我是狀態為0的item'),onTap: () {showDialog(context: context,builder: (BuildContext context) {return new AlertDialog(title: new Text('ListViewDemo',style: new TextStyle(color: Colors.black54,fontSize: 18.0,),),content: new Text('哈哈哈！當前 item 狀態為 0'),);},);},),),);break;}return widget; }

---

??????小菜剛接觸 Flutter 時間不長，還有很多不清楚和不理解的地方，如果又不對的地方還希望多多指出。以下是小菜公眾號，歡迎閑來吐槽～

總結

以上是生活随笔為你收集整理的Flutter 15: 图解 ListView 不同样式 item 及 Widget 显隐性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。