Flutter ListView组件详解及其使用（Scrollable）

Flutter ListView组件详解及其使用（Scrollable）

---

---

前言

这篇文章将介绍Scrollable中的ListVIew组件，介绍动态加载（lazy loading）缓冲区概念，学习ListTile、Scrollbar、RefreshIndicator等组件

---

一、ListView

当我们遇到一个屏幕显示不下的情况，我们就需要使用到ListView来创捷一个可以滚动的面板。

body: ListView(
        children: <Widget>[
			// widget内容
        ],
      ),

那么问题来了 ，当我们不需要一下子把children全加载出来，而是需要一个缓冲区来储存数据来优化性能，我们就需要使用到LIstView.builder

ListView.builder

ListView.builder有一个必传参数itemBuilder，再介绍itemCount和cacheExtent常见的使用

body: ListView.builder(
          itemCount: 88,  // 数据最大容量，不定义就是默认无限
          cacheExtent: 2000, // 缓存区的空间，2000是高度不是2000个数据 具体的内容最好自己去操作一下，
          itemBuilder: (context,index){  // 此处的Context是父级的context
          print("$index");  
          //  也可以使用if和index来达到你想要的效果   if(index==？){}
            return
              index % 2 ==0
              ? Divider(thickness: 4,)  //DIvider是分割线
              : Container(
              color: Colors.blue[(index % 5) * 100],
              height: 100,
              alignment: Alignment.center,
              child: Text("$index"),
            );
          }
      ),

二、Scrollbar（滚动条）

代码如下（示例）：

body: Scrollbar(
        radius: Radius.circular(9), 
        thickness: 4,
        isAlwaysShown: true,  // 总是显示滚动条
        child: ListView.builder(
          physics: BouncingScrollPhysics(),  // android和ios的样式不同，ios是自带Bouncing而android是ClampingScrollPhysics 当然还有always 和 never 这两个选项
          controller: _controller, // 当一个界面需要两个Scrollbar才需要2个_controller 。
          padding: const EdgeInsets.only(bottom: 140), // 这个应该不需要解释 字面意思，不过加给不同的widget效果都会不一样，所以知道是哪个widget加的padding就行了
          itemCount: 88, // 不同版本的flutter可能需要添加itemCount Scrollbar才会有效果
            itemExtent: 60, // 强制子类60的约束
            itemBuilder: (context,index){
            return ListTile( // 可以理解为专门为ListView服务的Contianer
              leading: Icon(Icons.person),
              title: Text("Name"),
              subtitle: Text("Subtitle"),
              trailing: IconButton(
                icon: Icon(Icons.delete_outline),
              ),
            );
              // return Container(
              //   height: index % 2 == 0 ? 150 : 50,
              //   color: index % 2 == 0 ? Colors.blue : Colors.blue[200],
              // );
            }
        ),
      ),

三、 RefreshIndicator（下拉刷新）

话不多说

代码如下（示例）：

body: RefreshIndicator( // 当然 Scrollbar 和 RefreshIndicator 怎么互相套都可以实现
        onRefresh: () {  // 刷新后线程等待数据 
          return Future.delayed(Duration(seconds: 2));
        },
        child: ListView.builder( 
          physics: BouncingScrollPhysics(),
          itemCount: 200,
          controller: _controller,
          itemBuilder: (context,index){

          return Container(
            color: Colors.blue[index % 9 * 100],
              height: 100,
          );
        },
        ),
      ),

---

总结

文章质量有点粗糙 不过也适合初学者快速上手

这篇文章将介绍Scrollable中的ListVIew组件，介绍动态加载（lazy loading）缓冲区概念，学习ListTile、Scrollbar、RefreshIndicator等组件