Flutter listview多布局

前言

各位同學大家好,很久沒有給大家更新blog了最近看到群里一些關於flutter的疑問。結合自己最近的一些想法今天就分享一個flutter listview 多布局給大家，那么不多說我們正式開始

准備工作：

1 需要用到的三方庫
flutter_swiper: ^1.1.6 請在pubpsec.yaml 文件只添加依賴並在控制台執行flutter pub get 下載依賴

效果圖：

## 具體實現：
1普通的listview多布局：

首先我們寫一個listview.builder 然后我們在return item 的時候根據下標position來返回不同的Widget

  body: Container(
      child: ListView.builder(
          itemCount: 20,
          itemBuilder: (BuildContext context , int position){
            if(position%2==0){
              return itemWidget(position);
            }else {
              return newitemWidget(position);
            }
          }),
    ),

兩個 不同的item widget代碼如下

//當下標被2整除的適合的item 
Widget itemWidget(int index){
    return GestureDetector(
      child: Container(
        width: double.infinity,
        height: 100,
        alignment: Alignment.center,
        child: Text("我是第一個item",style: TextStyle(
            color: Colors.red,
            fontSize: 40
        ),),
      ),

    );
  }
//當下標不能被2整除的item 
  Widget newitemWidget(index){
    return GestureDetector(
      child: Row(
        children: <Widget>[
          new Text("我是徐慶",style: TextStyle(
              color: Colors.green,
              fontSize: 25
          ),),
          Expanded(
            child: Icon(Icons.add),
          )
        ],
      ),
    );

  }

這樣我們就能實現簡單的listview 多布局
2 含有輪播圖的listview多布局

如上圖的布局 我們第一眼看到 肯定認為 我們需要在外層嵌套一個 SingleChildScrollView 然后里面嵌套 Column 得線性布局然后在Column 分別實現輪播圖和列表的展示，這樣是可以實現但是代碼嵌套過多 我今天帶着大家一起用listview多布局實現

      body: Container(
        child: ListView.builder(
            itemCount: 20,
            itemBuilder: ((BuildContext  context, int position){
              if(position==0){
                return itemImage(position);
              }else{
                if(position%2==0){
                 return  newitemWidget(position);
                }else{
                  return itemWidget(position);
                }
              }
            }
        )),
      ),

跟上面的多布局思路差不多 不過我們是判斷listview item 下標 position 0 的時候我們返回輪播圖的Widget 剩下的item我們在根據 position %20 來對整數2取模 來處理返回不同的widget
item widget的具體實現

 Widget itemImage(int index){
    return GestureDetector(
      child: Container(
        width: double.infinity,
        child: AspectRatio(
          aspectRatio: 16/9,
          child: new Swiper(
            itemBuilder: (BuildContext context,  int index){
              return  new Image.network(
                _urls[index],
                fit: BoxFit.fill,
              );
            },
            itemCount: _urls.length,
            pagination: new  SwiperPagination(),
            loop: true,
            autoplay: true,
          ),
        ),
      ),

    );
  }

  Widget itemWidget(int index){
   return GestureDetector(
     child: Container(
       child: Center(
         child: Text("我是9527",style: TextStyle(
           color: Colors.red,
           fontSize: 20
         ),),
       ),
     ),
   );

  }

  Widget newitemWidget(index){
    return GestureDetector(
      child: Row(
        children: <Widget>[
          new Text("王者榮耀",style: TextStyle(
              color: Colors.green,
              fontSize: 25
          ),),
          Expanded(
            child: Icon(Icons.add),
          )
        ],
      ),
    );

  }

這里需要注意到底是輪播圖我們的item widget實現我們用到了 flutter_swiper: ^1.1.6 三方庫 需要同學們自己添加依賴並下載

同時需要導入

import 'package:flutter_swiper/flutter_swiper.dart';

到此以上的就是整個listview多布局的實現，但是不僅限於此 ，同學們可以根據自己的具體需求做一些拓展，主要是圍繞listview 下標 position 展開的。

最后總結：

listview 是flutter中用的很多的列表組件 flutter中listview的多布局實現起來也比較簡單 對比原生代碼更為簡潔，希望我的代碼能幫助到各位同學 各位同學如果覺得文章還不錯 ,麻煩給關注和star小弟在這里謝過啦
項目地址： https://github.com/xq19930522/listviewmanylayout