Flutter(33):Material组件之ListTile、RefreshIndicator、ListView、Divider

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源代码持续更新中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342