Flutter教学目录持续更新中

Github源代码持续更新中

1.简介

这一节呢这三个组件一起来介绍

• ListTile：一个文本组件，跟之前介绍的SwitchListTile、RadioListTile、CheckboxListTile相似，传送门：Flutter教学目录
• RefreshIndicator：下拉刷新组件
• ListView：列表
• Divider：分割线

2.ListTile属性

• leading：头部widget
• title：标题
• subtitle：副标题
• trailing：尾部widget
• dense：
• shape：形状
• contentPadding：内边距
• enabled = true：是否可用,false会屏蔽点击长按事件,然后置灰
• onTap：点击事件
• onLongPress：长按事件

• selected = false：是否选中,true的话会展示主题色调

  
  enabled = false.png

selected = false.png selected = true.png

_myListTitle() {
  return ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('title'),
    subtitle: Text('subtitle'),
    trailing: Icon(Icons.account_box),
    dense: false,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(5),
    ),
    contentPadding: EdgeInsets.all(10),
    enabled: true,
    onTap: () {
      ToastUtil.showToast('onTap');
    },
    onLongPress: () {
      ToastUtil.showToast('onLongPress');
    },
    selected: true,
  );
}

3.RefreshIndicator属性

• child：子widget
• displacement = 40.0：触发下拉刷新的距离
• onRefresh：刷新事件
• color：颜色
• backgroundColor：背景色
• strokeWidth = 2.0: 宽度

1601720169(1).png

_myRefreshIndicator() {
  return RefreshIndicator(
    child: _myListView(),
    displacement: 40,
    onRefresh: () {
      ToastUtil.showToast('onRefresh');
      return _onRefresh();
    },
    color: Colors.blue,
    backgroundColor: Colors.white,
    strokeWidth: 2,
  );
}
_onRefresh() async {
  await Future.delayed(Duration(seconds: 3), () {
    setState(() {});
  });
}

4.ListView

ListView的创建方式有多种：

• ListView()
• ListView.builder()
• ListView.separated()
• ListView.custom()

4.1ListView()

这种是最简单基础的方式，子节点是返回widgets

• scrollDirection = Axis.vertical：方向
• reverse = false：是否反转,为true的话排列会反向,下拉刷新也会变成上拉刷新
• ScrollController controller：控制器
• primary：当内容不足以滚动时，是否支持滚动；true:用来解决listView不满一页无法触发下拉刷新，需要注意这个时候不可以设置controller
• physics：控制用户滚动视图的交互，可以提供边界回弹特效
  • AlwaysScrollableScrollPhysics:列表总是可滚动的。在iOS上会有回弹效果，在android上不会回弹。那么问题来了，如果primary设置为false（内容不足时不滚动），且 physics设置为AlwaysScrollableScrollPhysics，列表是否可以滑动？答案是可以，感兴趣的可以试一下
  • PageScrollPhysics：一般是给PageView控件用的滑动效果。如果listview设置的话在滑动到末尾时会有个比较大的弹起和回弹
  • ClampingScrollPhysics：滚动时没有回弹效果，同android系统的listview效果
  • NeverScrollableScrollPhysics：就算内容超过列表范围也不会滑动
  • BouncingScrollPhysics：不论什么平台都会有回弹效果
• shrinkWrap = false：false：则高度为滑动方向上的最大允许高度；如果在滑动方向上没有设置约束，则这个字段必须设置为true，否则会报错。简而言之就是父节点为滑动组件的时候,且滑动方向一致需要true，例如：SingleChildScrollView
• padding：内边距
• itemExtent：指定Item在滑动方向上的高度，用来提高滑动性能
• addAutomaticKeepAlives = true：是否将子控件包裹在AutomaticKeepAlive控件内
• addRepaintBoundaries = true：是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘，如果子控件重绘开销很小时，比如子控件就是个色块或简短的文字，把这个字段设置为false性能会更好
• addSemanticIndexes = true：是否把子控件包装在IndexedSemantics里，用来提供无障碍语义
• cacheExtent：可见区域的前后会有一定高度的空间去缓存子控件，当滑动时就可以迅速呈现
• children = const <Widget>[]：

• semanticChildCount：语义item数量

  
  1601725095(1).png

_getListWidgets() {
    for (var i = 0; i < 10; i++) {
      _widgetList.add(_myListTitle());
    }
    return _widgetList;
  }

  _myListView() {
    return ListView(
      scrollDirection: Axis.vertical,
      reverse: false,
      controller: null,
      primary: false,
      itemExtent: 60,
      cacheExtent: 60,
      padding: EdgeInsets.all(10),
      children: _getListWidgets(),
    );
  }

4.2ListView.builder()

跟ListView()创建方式区别不大，主要是子节点属性变了，itemBuilder返回子节点，itemCount确定子节点数量

• itemBuilder：IndexedWidgetBuilder item

• itemCount：item数量

  
  1601725095(1).png

_myListViewBuild() {
    return ListView.builder(
      scrollDirection: Axis.vertical,
      reverse: false,
      controller: null,
      primary: false,
      itemExtent: 60,
      cacheExtent: 60,
      padding: EdgeInsets.all(10),
      itemBuilder: (BuildContext context, int index) {
        return _myListTitle();
      },
      itemCount: _widgetList.length,
    );
  }

4.3ListView.separated()

这个是可以设置分割线的，那么我们就先了解一下fluter里面的分割线组件
Divider、VerticalDivider、PopupMenuDivider
前面两个的属性是一样的，只是一个横向一个纵向，后面一个是看名字也知道，给PopupMenu用的，当然用在ListView其实也是可以的，但是他只有一个height属性

• height:高度,这个高度不是Divider设置高度,不是里面的线高度
• thicknes:这个才是线高度
• indent:开始缩进
• endInden:末尾缩进
• color:颜色

进入正题：

这个就是在ListView.builder()基础上多了分割线属性

• itemBuilder：IndexedWidgetBuilder item
• separatorBuilder：分割线

• itemCount：item数量

  
  1601733619(1).png

  _myListViewSeparated() {
    return ListView.separated(
      primary: true,
      itemBuilder: (BuildContext context, int index) => _myListTitle(),
      separatorBuilder: (BuildContext context, int index) {
        return Divider(
          height: 1,
          thickness: 1,
          indent: 10,
          endIndent: 10,
        );
        return Container(
          child: Text('----分割线----'),
          color: Colors.grey,
        );
      },
      itemCount: _widgetList.length,
    );
  }

4.4ListView.custom()

• childrenDelegate：SliverChildDelegate
• findChildIndexCallback：

• childCount：
  这个是比较高阶的用法了，可以自己去实现子控件的复用重绘，位置返回等自定义操作了，这个比较复杂，需要对源码有一定了解基础再来看，这个后期会在进阶或者深入解读里面再做介绍，这里做个了解

  
  1601735732(1).png

  _myListViewCustom() {
    return ListView.custom(
      childrenDelegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return _myListTitle();
        },
        childCount: _widgetList.length,
        findChildIndexCallback: (key){
          print('key = $key');
          return 0;
        }
      ),
    );
  }

下一节：Material组件之ExpansionPanelList、ExpansionPanel、ExpansionPanelRadio、ExpansionTile

Flutter（34）：Material组件之ExpansionPanelList、ExpansionPanel、ExpansionPanelRadio、ExpansionTile

Flutter教学目录持续更新中

Github源代码持续更新中