精华内容
参与话题
问答
  • flutter listview 设置分割线

    千次阅读 2020-03-06 13:49:14
    使用ListView.separated,就很简单了 ListView.separated( scrollDirection: direction, itemBuilder: (context, index) { final Axis slidableDirection = direction == Axis.ho...

    使用ListView.separated,就很简单了

      ListView.separated(
            scrollDirection: direction,
            itemBuilder: (context, index) {
              final Axis slidableDirection =
                  direction == Axis.horizontal ? Axis.vertical : Axis.horizontal;
              return _getSlidableWithLists(context, index, slidableDirection);
            },
            itemCount: list.length,
            separatorBuilder: (BuildContext context, int index) =>
                Divider(height: 1.0, color: AppColors.separator),
          );
    

    如果使用ListView.builder,没有这个属性,需要自己在itemBuilder中增加下划线

    ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) =>
                      GroupContactItem(_headData[index], groupModel),
                  itemCount: _headData.length)
            ],
    

    效果如下:


    喜欢可以加Q群号:913934649,点赞,评论;

    简书: https://www.jianshu.com/u/88db5f15770d

    csdn:https://me.csdn.net/beyondforme

    掘金:https://juejin.im/user/5e09a9e86fb9a016271294a7

    展开全文
  • ListView.builder( itemCount: 3, itemBuilder: (BuildContext context, int index) { return Container( child: Text('aaaaaaaaa'), // 下边框 decora...
    ListView.builder(
            itemCount: 3,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                child: Text('aaaaaaaaa'),
                // 下边框
                decoration: BoxDecoration(
                  border: Border(bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))
                ),
              );
            });
    
    展开全文
  • flutter ListView.separated 带分割线

    千次阅读 2019-12-22 21:38:17
    ListView.separated( physics: ClampingScrollPhysics(), itemBuilder: (c, i) { return _itemVIew(i); }, separatorBuilder: (context, index) { return Container( height: 0, col...
      ListView.separated(
      physics: ClampingScrollPhysics(),
      itemBuilder: (c, i) {
        return _itemVIew(i);
      },
      separatorBuilder: (context, index) {
        return Container(
          height: 0,
          color: Colors.black26,
        );
      },
      itemCount: _listDta.length,
    );
    展开全文
  • Flutter ListView

    2020-06-19 16:01:45
    ListView是最常用的滑动组件 构建ListView ...**ListView.separated():**处理分割线 1.ListView()基础构造 @override Widget build(BuildContext context) { return Container( height: 200, c

    ListView是最常用的滑动组件

    构建ListView

    ListView(): 在item每没有出现在屏幕就会创建,性能开销比较大,可能会引起卡顿,所以不适合长列表
    ListView.build(): 最长使用的列表
    **ListView.separated():**处理分割线

    1.ListView()基础构造

     @override
      Widget build(BuildContext context) {
        return Container(
          height: 200,
          child: ListView(
            children: data
                .map((color) => Container(
              alignment: Alignment.center,
              width: 100,
              height: 50,
              color: color,
            ))
                .toList(),
          ),
        );
      }
    

    构造属性

    在这里插入图片描述

    • scrollDirection :列表的滚动方向 Axis的horizontal和vertical分为横向和竖直 默认是竖直
    • reverse :是否翻转 默认是不反转
    • ScrollController: 用来控制滚动位置及监听滚动事件
    • primary : primary为true时,我们的ScrollController 无效
    • ScrollPhysics 用来控制滑动的效果的(AlwaysScrollableScrollPhysics() ,NeverScrollableScrollPhysics(),BouncingScrollPhysics(),ClampingScrollPhysics())
    • shrinkWrap: 是否根据子widget的总长度来设置ListView的长度,该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时,shrinkWrap必须为true
    • itemExtent :子元素长度。当列表中的每一项长度是固定的情况下可以指定该值,有助于提高列表的性能(因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置);
    • cacheExtent: 预渲染区域长度,预加载的区域。ListView会在其可视区域的两边留一个cacheExtent长度的区域作为预渲染区域(对于ListView.build或ListView.separated构造函数创建的列表,不在可视区域和预渲染区域内的子元素不会被创建或会被销毁),设置预加载的区域 cacheExtent 强制设置为了 0.0,从而关闭了“预加载”;
    • addAutomaticKeepAlives:该字段表示是否将列表项包裹在AutomaticKeepAlive Widget中,默认为true,效果就是,列表子widget滑出可见视图时,其状态还会被保持,数据还会保持,并且列表项不会被GC掉
    • addRepaintBoundaries:表示是否将列表项包裹在RepaintBoundary中,默认为true,如果包裹则列表项不会重绘

    2. ListView.builder构建

    构造属性在这里插入图片描述

    • itemCount: 列表中元素的数量,如果为null,则表示无限列表
    • itemBuilder: 子元素的渲染方法,允许自定义子元素组件。列表项的构建器,类型为IndexedWidgetBuilder,返回值为一个widget(就是一个组件)。
      当列表滚动到具体的index位置时,会调用该构建器构建列表项,也就是所谓的基于Sliver的懒加载模型。
    • itemExtent:children的“长度”
      如果滚动方向是垂直方向,则itemExtent代表子组件的高度;
      如果滚动方向为水平方向,则itemExtent就代表子组件的宽度。
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 200,
          child: ListView.builder(
            itemCount: data.length,
            itemBuilder: (context, index) => _buildItem(data[index]),
          ),
        );
      }
    

    3. ListView.separated构建

    构造参数
    在这里插入图片描述

    • separatorBuilder:只多了一个参数,就是为了自定义分割线的
     @override
      Widget build(BuildContext context) {
        return Container(
          height: 200,
          child: ListView.separated(
            separatorBuilder: (context, index) => Divider(
              thickness: 1,
              height: 1,
              color: Colors.orange,
            ),
            itemCount: data.length,
            itemBuilder: (context, index) => _buildItem(data[index]),
          ),
        );
      }
    

    GrideView 差不多

    CustomScrollView 一种高级的listview 配合其他空间可以实现靓的效果

    展开全文
  • Flutter ListView UI异常

    2019-09-27 11:12:32
    一个是正常的ListView,另外一个是带分割线listview 为什么正常的listview,body99那里没有展示完整??? 代码如下 @override Widget build(BuildContext context) { // This method is rerun every ...
  • Flutter ListView新笔记

    2020-09-04 21:51:27
    Flutter ListView分割线(ListView.separated) Flutter ListView 列表布局在手机上是最最常用的控件了。 Android上的RecycleView尤其的强大。 Flutter中也给我们提供了ListView,不过就目前的体验来看,性能跟...
  • 年底有点时间,开始学习一下Flutter的常规布局啥的,今天主要讲一下给ListView添加一条分割线,其实很简单的需求,但是我还是花了一些时间,所以特此做个记录。 内容部分 我们可以通过系统提供的方法添加,代码如下...
  • FlutterListView

    2019-11-24 21:37:54
    Flutter 中,ListView 可以沿一个方向(垂直或水平方向)来排列其所有子 Widget,常被用于需要展示一组连续视图元素的场景 ...ListView.separated:适用于需要设置分割线的场景 构造方法名 特点 使用场景 ...
  • 先看大致效果,因为转成GIF的原因有些失真 ...Divider:分割线 然后会用到一个自动生成单词的库:english_words 二、开始 一、引入单词库 在 pubspec.yaml 文件里依赖 二、构建page 1. ...
  • 文章目录ListViewListView.builderListView 使用ListView.builder 使用ListTileListView.separated 分割线第三方库推荐上下拉加载数据 ListViewListView.builder 这是ListView的两个构造函数,ListView构造函数...
  • Scrolling Widget是一种基本组件,介绍...ListView.separated:可以配置分割线,适用于具有固定数量的列表项的ListViewListView.custom:提供自定义Widget的能力。 默认构造方式 MaterialApp( home: Scaffold
  • 实现的效果:从assets中读取Json解析,ListView展示并添加分割线。 首先来看下JSON数据。解析工具:FlutterJsonBeanFactory插件可在settings中安装 { "data": [ { "titleName": "论坛", "path":"这是论坛的...
  • flutter学习记录第二天

    2020-06-11 23:01:02
    3.flutterlistview有三种方式,一种静态数据很简单,两种动态数据,build的大数据全加载,spe的方便添加分割线和数据填充, 4,flutter的资源文件配置,需要空格一个都不能错。完全手打对了才行。 5,flutter...
  • Flutter学习笔记之-滚动Widget的基础使用 ...3、ListView.separated可以添加分割线 4、ListView.custom自定义的方式 1、默认构造函数的方式 class DemoWidget extends StatelessWidget { @override Widget bu

空空如也

1
收藏数 20
精华内容 8
热门标签
关键字:

flutter listview分割线