4.Flutter中的ListView的用法。

最新推荐文章于 2024-05-04 16:01:51 发布
最新推荐文章于 2024-05-04 16:01:51 发布
阅读量986 收藏 1
点赞数
分类专栏： Flutter学习 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44710164/article/details/103931911
版权

ListView参数认知

列举一下ListView常用的参数：

参数名参数说明
scrollDirectionAxis.vertical竖向滑动，Axis.horizontal 横向滑动
padding表示内边距
reverse组件反向排序
childrenl列表元素

ListView基本使用

ListView的基本使用。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView组件的学习',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView组件的学习')),
        body: BaseListView(),
      ),
    );
  }
}

class BaseListView extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
        Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
        Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
      ],
    );
  }
}

效果如下：
在这里插入图片描述
上述效果看起来很low，所以我们添加一些元素，使其可以看得过眼

class ListViewWidgetTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        padding:  EdgeInsets.all(10),
        children: <Widget>[
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              color: Colors.cyanAccent,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
          Image.network('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg'),
          Center(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: Text('无中生有'),
            ),
          ),
        ],
      ),
    );
  }
}

其效果如下：
在这里插入图片描述

ListView与结合ListTile使用

直接上代码

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView组件的学习',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView组件的学习')),
        body: BaseListView(),
      ),
    );
  }
}

class BaseListView extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    String _pathLeft='http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png';
    String _pathRight='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2344319804,963424543&fm=26&gp=0.jpg';
    return ListView(
      padding:  EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          leading: Icon(            //leading设置左侧的的小部件，一般使用Icon或者Image
            Icons.map,              //Icon图标
            color: Colors.cyanAccent, //设置Icon颜色
            size: 20,               //设置Icon大小
            semanticLabel: 'Icon',  //设置Icon的语义
          ),
          trailing: Image.network(_pathRight),  //设置右侧的小部件，一般使用Icon或者Image
          title: Text('这是头部'),
          subtitle: Text('这是身体'),
        ),
      ],
    );
  }
}

效果如下：
在这里插入图片描述

注意事项：

我们先来看看代码，从代码中可以看到我们只给Contaniner组件设置宽高，按照我们所想，应该呈现出来的是宽高为100的一个正方形Item，但是该代码运行结果如下图所示：


class ListViewWidgetTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return
       ListView(
        padding:  EdgeInsets.all(10),
        children: <Widget>[
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
            ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),  Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
          ),
          Container(
            color: Colors.amber,
            width: 100,
            height: 100,
          ),
          ]
      );

  }
}

在这里插入图片描述
那么问题来了，如果我们想要实现一个宽高为100的item怎么办？
这个很简单，我们只需要将ListView给定高度即可。
这里得提一下，我们的ListView没有宽高属性，所以我们需要控制它的上级组件的宽高，从而控制ListView的宽高
代码如下：

class ListViewWidgetTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      child: ListView(
            children: <Widget>[
              Container(
                color: Colors.red,
           
                height: 100,
              ),
              Container(
                color: Colors.blue,
             
                height: 100,
              ),
              Container(
                color: Colors.amber,
                height: 100,
              ),
              Container(
                color: Colors.red,
                height: 100,
              ),
              Container(
                color: Colors.blue,
                height: 100,
              ),
              Container(
                color: Colors.amber,
                height: 100,
              ),  Container(
                color: Colors.red,
                height: 100,
              ),
              Container(
                color: Colors.blue,
                height: 100,
              ),
              Container(
                color: Colors.amber,
                height: 100,
              ),
            ]
        ),
    );
  }
}

你可能会发现这部分代码中为什么，不去设置子item的布局宽度？这是因为我们ListView竖直方向中，我们的子item宽度是跟随ListView的宽度。所以我们只需要设置子item的高度即可

在没有给ListView设置宽高时，单纯的给ListView中item设置宽高时无效的，其效果会填满整个屏幕。我们应该判断ListView为横向还是竖向，再去设置宽度或者高度。

ListView的横向滑动(水平列表)

我们根据上面所学知识写一个item宽高为100的横向列表


class HorizontalListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      child: ListView(scrollDirection: Axis.horizontal, children: <Widget>[
        Container(
          color: Colors.red,
          width: 100,
        ),
        Container(
          color: Colors.blue,
          width: 100,
        ),
        Container(
          color: Colors.amber,
          width: 100,
        ),
        Container(
          color: Colors.red,
          width: 100,
        ),
        Container(
          color: Colors.blue,
          width: 100,
        ),
        Container(
          color: Colors.amber,
          width: 100,
        ),
        Container(
          color: Colors.red,
          width: 100,
        ),
        Container(
          color: Colors.blue,
          width: 100,
        ),
        Container(
          color: Colors.amber,
          width: 100,
        ),
      ]),
    );
  }
}

效果展示：
在这里插入图片描述

数据装填进阶使用

我们将ListView中的children抽离成为一个方法，这样就不会显得这么臃肿。

class ListViewTest extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: _getData(),
    );
  }
  List<Widget> _getData() {
    return [
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
      ListTile(
        title: Text('我是一个列表'),
      ),
    ];
  }
}

在这里插入图片描述

循环添加数据

class ListViewTest extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: _getData(),
    );
  }
  List<Widget> _getData() {
    List<Widget> list=new List<Widget>();
    for(int i=0;i<20;i++){
      list.add(ListTile(
        title: Text(
            '这是第$i标题',
        ),
      ));
    }
    return list;
  }
}

效果如下：
在这里插入图片描述

进行json解析数据，并且展示到ListView这种

首先我们创建一个名为listData.dart文件，然后用于存放我们的json数据

List listData=[
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
];

接下来我们进行数据转换并且展示到ListView中。

import 'listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView进行Json文件解析'),
        ),
        body: NetListViewTest(),
      ),
    );
  }
}

class NetListViewTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }

  List<Widget> _getData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network(value['imageUrl']),
        subtitle: Text('主要技能：'+value['author']),
        title: Text('忍者介绍：'+value['title']),
      );
    });
    //.map方法其实就是迭代，然后存放在一个对象中
    print('-------$tempList');//(ListTile, ListTile, ListTile, ListTile, ListTile, ..., ListTile, ListTile)
    print('tempList的对象为：'+tempList.runtimeType.toString());//MappedListIterable<dynamic, ListTile>
    List<Widget> list = tempList.toList();
    print('========$list');//[ListTile, ListTile,..., ListTile, ListTile]
    return tempList.toList();
  }
}

效果展示如下：
在这里插入图片描述

初试ListView.builder

在使用ListView.builder时，我们需要注意，我们需要将这个两个参数获取到。itemCount与itemBuilder

itemCount：表示item个数
itemBuilder：进行数据装填或者数据展示。其方法带有返回值为Widget

先来个小尝试吧！

我们先进行数据的组装,我在构造参数中进行数据的装填，使其每次创建进行20条数据的填充。

  List<Widget> list = new List<Widget>();

  ListViewBuilder() {
    for (int i = 0; i < 20; i++) {
      this.list.add(ListTile(
            title: Text(
              '这是第$i标题',
            ),
          ));
    }
  }

进行数据的展示。完整代码如下：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder初试'),
        ),
        body: ListViewBuilder(),
      ),
    );
  }
}

class ListViewBuilder extends StatelessWidget {
  List<Widget> list = new List<Widget>();

  ListViewBuilder() {
    for (int i = 0; i < 20; i++) {
      this.list.add(ListTile(
            title: Text(
              '这是第$i标题',
            ),
          ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index) {
        return list[index];
      },
    );
  }
}

ListView.builderDemo

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder Demo'),
        ),
        body: NetListViewBuidler(),
      ),
    );
  }
}

class NetListViewBuidler extends StatelessWidget{
  Widget _getListData(context,index){
    return ListTile(
      leading: Image.network(listData[index]['imageUrl']),
      subtitle: Text('主要技能：' + listData[index]['author']),
      title: Text('忍者介绍：' + listData[index]['title']),
    );
  }
  
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount:listData.length,
        itemBuilder:_getListData,
    );
  }
}

看到此处的_getListData,如果有点懵逼的话，则建议你好好看一下Dart的函数。把方法当做参数的方法
至此关于LstView的学习完毕。不足之处，请大家指导。

易帜¤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter中ListView 垂直列表组件、水平列表组件
越陌度阡
12-17 1391
列表布局是项目开发中最常用的一种布局方式，Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。 ListView常见的参数列表： 1.scrollDirection 列表方向。值的类型为 Axis，主要有以下两种： (1). Axis.horizontal 水平列表； (2). Axis.vertical 垂直列表； 2.padding内边距。值的类型为EdgeInsets，如：EdgeInsets.all()； 3.reverse反向排序。值的类......
Flutter ListView使用
高级开发者进阶ing... QaQ
12-11 1061
Flutter 小知识:ListView/GradView使用ListView参数介绍ScrollController的使用ListTileListView全选ListView多选ListView单选ListView优化 灵魂烈焰中死神降临，生命不断流逝，枯萎，只求不要带走那对你最后的一丝思念。——沙漠死神 先来看看今天的最终效果吧: 效果图(1.1): 咋们先来学习ListView,若果你对ListView比较熟悉,直接跳过这段吧~ ListView参数介绍 加粗是必须传参数 ListVie
Flutter ListView详解
最新发布
2401_84149607的博客
05-04 898
/设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直//内间距//是否倒序显示 默认正序 false 倒序true//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。//确定每一个item的高度 会让item加载更加高效//内容适配//item 数量//滑动类型设置//cacheExtent 设置预加载的区域//滑动监听。
Flutter中ListView用法
juer2017的博客
03-28 1210
Flutter中ListView用法
Flutter常用组件 ListView
mubowen666的博客
10-25 255
Flutter常用组件ListView 动态列表是我们常用的基本布局方式之一，我们可以通过ListView来实现动态列表，它也支持横向和纵向的方式去展示。我们可以通过ListView去实现垂直列表、垂直图文列表、水平列表、动态列表、矩阵式列表等。 以下是ListView的常用基本参数 名称 类型&说明 scrollDirection Axis & Axis.hori...
带有ListView界面左右滑动，切换界面
sumakira的专栏
11-09 7886
带有ListView界面左右滑动，切换界面 分类： Android小方法 2011-11-09 08:57 83人阅读 评论(0) 收藏 举报  带有ListView界面左右滑动，切换界面   相信大家在做OnGestureListener滑动切换窗口的时候，会遇到这样的问题。就是当界面中含有listview的时候，OnGestureListener的左右触屏
Flutter中ListView 的使用示例
08-27
Flutter 中ListView 的使用示例 Flutter 是一个跨平台的移动应用框架，由 Google 开发，使用 Dart 语言编写。ListView 是 Flutter 中一个基本的控件，用于显示大量数据。下面是 Flutter 中 ListView 的使用示例，...
Flutter入门：教程4 ListView
04-08
在本篇Flutter入门教程中，我们将深入探讨ListView控件，它是Flutter SDK中一个非常重要的组件，用于构建可滚动的列表视图。ListView适用于显示大量数据，例如应用中的用户列表、商品目录或者任何需要滚动查看的长...
Flutter列表组件ListView
01-20
本篇文章将深入探讨Flutter中的列表组件ListView及其基本使用方法。 首先，我们需要导入必要的库，这通常包括`package:flutter/material.dart`，因为它包含了大部分的基础组件和样式。在示例代码中，可以看到这样的...
Flutter之ListView
01-08
文章目录资料基础用法ListView 简单堆列ScrollPhysics样式的listView 资料 三、Flutter基础—ListView入门 Flutter ListView 列表进阶 基础用法 import 'package:flutter/cupertino.dart'; import 'package:flutter/...
flutter简单的listview用法
梨子社区
02-19 148
import 'package:flutter/material.dart'; class TextPage extends StatefulWidget { @override _TextPageState createState() => _TextPageState(); } class _TextPageState extends State<TextPage> { @override Widget build(BuildContext context) { .
listview显示表格左右上下滑动
12-16
listview显示表格左右上下滑动，顶部标题以及最左边一列固定不动，其他部分上下左右滑动
Flutter-防京东商城项目-签名验证原理、签名验证算法-40
weixin_38716347的博客
09-07 256
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 1.安装第三方库 #md5加密 crypto: ^2.1.1 2.把文件拖进来 ...
Android 横向ListView HorizontalListView
coycleipenghui的专栏
09-11 586
分享个简洁的HorizontalListView，亲测可用，而且效果不错。 git下载地址：https://github.com/MeetMe/Android-HorizontalListView
Flutter ListView详解，全靠这套面试题
m0_61408386的博客
09-03 152
)); } return new ListView( children: _list, ); } ### []( )[]( )ListView builder **builder** 顾名思义 构造 可以非常方便的构建我们自己定义的**child**布局，所以在**Flutter**中非常的常用。 #### []( )builder属性详细介绍 //设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直 scrollDirection: Axis....
Flutter 左右菜单联动
热门推荐
yechaoa
05-22 1万+
效果： 像这种左右菜单联动的效果很常见，即点击左边菜单列表右边刷新，这里演示一下在Flutter中的实现 页面结构 很简单，分为左右结构，左边是一个ListView，右边也是一个ListView，然后按比例显示即可 return new Row( mainAxisAlignment: MainAxisAlignment.start, children: &l...
Flutter两个ListView同步滚动。
C201008的专栏
04-20 1344
这里先添加Google开发团队开发的依赖库。
Flutter开发（三）——ListView组件——简单使用、横纵向列表以及动态列表
追风者
08-05 2526
首先我先来介绍一哈Icon Icon就是图标，Flutter有丰富的Icon库，提供了常用的Icon供开发者选择 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyApp(), )); } class MyApp extends Statele...
flutter中ListView.builder的源码分析
qq_28563283的博客
04-24 1236
在使用ListView.custom时，需要注意控件的参数设置和性能优化，以提高应用程序的性能和用户体验。总之，ListView.builder是Flutter中常用的控件之一，通过ListView.custom和SliverChildBuilderDelegate来创建具有大量数据的列表视图。为了提高ListView.builder的性能和用户体验，需要开发者们根据具体应用场景，选择合适的性能优化技巧，从而避免出现卡顿和性能问题，提高应用程序的质量和稳定性。
Flutter 小技巧之横竖列表的自适应大小布局支持
恋猫de小郭的博客
04-25 1472
今天这个主题看着是不是有点抽象？又是列表嵌套？之前不是分享过了么？那这次的自适应大小布局支持有什么不同？算是某些奇特的场景下才会需要。首先我们看下面这段代码，基本逻辑就是：我们希望vertical的ListView里每个 Item 都是根据内容自适应大小，并且 Item 会存在有horizontal的ListView这样的 child。horizontal的ListView我们也希望它能够根据自己的children去自适应大小。答案是不能，因为这段代码里vertical的ListView嵌套了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值