脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter listview

详解Flutter中listview的高级用法

 更新时间：2023年01月04日 08:22:19   作者：flydean程序那些事  
一般我们使用Listview的方式是构建要展示的item，然后将这些item传入ListView的构造函数即可，通常情况下这样做是够用了，但是不排除我们会有一些其他的特殊需求。今天我们会来讲解一下ListView的一些高级用法，希望对大家有所帮助

简介

一般情况下，我们使用Listview的方式是构建要展示的item，然后将这些item传入ListView的构造函数即可，通常情况下这样做是够用了，但是不排除我们会有一些其他的特殊需求。

今天我们会来讲解一下ListView的一些高级用法。

ListView的常规用法

ListView的常规用法就是直接使用ListView的构造函数来构造ListView中的各个item。

其中ListView有一个children属性，它接收一个widget的list，这个list就是ListView中要呈现的对象。

我们来构造一个拥有100个item的ListView对象：

class CommonListViewApp extends StatelessWidget{
  const CommonListViewApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: List<Widget>.generate(100, (i) => Text('列表 $i')),
    );
  }
}

上面的例子中，我们简单的使用List.generate方法生成了100个对象。

在item数目比较少的情况下是没有任何问题的，如果item数目比较多的情况下，直接将所有的item都取出来放在ListView中就不太现实了。

幸好，ListView还提供了一个ListView.builder的方法，这个方法会按需进行item的创建，所以在item数目比较多的情况下是非常好用的。

还是上面的例子，这次我们要生成10000个item对象，然后将这些对象放在ListView中去，应该如何处理呢？

因为这次我们要使用builder,所以没有必要在item生成的时候就创建好widget，我们可以将widget的创建放在ListView的builder中。

首先，我们构建一个items list，并将其传入MyApp的StatelessWidget中：

    MyApp(
      items: List<String>.generate(10000, (i) => '列表 $i'),
    )

然后就可以在MyApp的body中使用ListView.builder来构建item了：

body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        )

ListView.builder是推荐用来创建ListView的方式，上面的完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(10000, (i) => '列表 $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'ListView的使用';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

创建不同类型的items

看到这里，可能有同学会问了，ListView中是不是只能创建一种item类型呢？答案当然是否定的。

不管是从ListView的构造函数构建还是从ListView.builder构建，我们都可以自由的创建不同类型的item。

当然最好的办法就是使用ListView.builder，根据传入的index的不同来创建不同的item。

还是上面的例子，我们可以在创建items数组的时候就根据i的不同来生成不同的item类型，也可以如下所示，在itemBuilder中根据index的不同来返回不同的item：

body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            if(index %2 == 0) {
              return ListTile(
                title: Text(items[index]),
              );
            }else{
              return Text(items[index]);
            }
          },
        )

非常的方便。

创建不同item的完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(10000, (i) => '列表 $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'ListView的使用';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            if(index %2 == 0) {
              return ListTile(
                title: Text(items[index]),
              );
            }else{
              return Text(items[index]);
            }
          },
        ),
      ),
    );
  }
}

总结

ListView是我们在应用中会经常用到的一种widget，希望大家能够灵活掌握。

本文的例子：https://github.com/ddean2009/learn-flutter.git

到此这篇关于详解Flutter中listview的高级用法的文章就介绍到这了,更多相关Flutter listview内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Android启动页设置及动态权限跳转问题解决

    Android启动页设置及动态权限跳转问题解决

    在我遇到这个实际问题之前，我一直认为启动页的作用是美化产品，提升软件逼格。但实际上，它更重要的是起到了一个拦截器的作用，这篇文章主要介绍了Android启动页设置以及动态权限跳转,需要的朋友可以参考下
    2022-04-04
  • Android UI控件之Gallery实现拖动式图片浏览效果

    Android UI控件之Gallery实现拖动式图片浏览效果

    这篇文章主要为大家详细介绍了Android UI控件之Gallery实现拖动式图片浏览效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android RollPagerView实现轮播图

    Android RollPagerView实现轮播图

    这篇文章主要介绍了Android RollPagerView实现轮播图的相关资料,这里提供实例来实现轮播图的简单实例，希望能帮助到大家，需要的朋友可以参考下
    2017-08-08
  • 一个Activity中多个Fragment实现沉浸式状态栏的解决方法

    一个Activity中多个Fragment实现沉浸式状态栏的解决方法

    这篇文章主要介绍了一个Activity中多个Fragment实现沉浸式状态栏解决方法，对于解决这个问题要分为两部分，具体内容详情，大家参考下本文吧
    2017-01-01
  • Android实现闹钟小程序

    Android实现闹钟小程序

    这篇文章主要为大家详细介绍了Android实现闹钟小程序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • android动态加载布局文件示例

    android动态加载布局文件示例

    这篇文章主要介绍了android动态加载布局文件示例,需要的朋友可以参考下
    2014-03-03
  • Android 动态菜单实现实例代码

    Android 动态菜单实现实例代码

    这篇文章主要介绍了Android 动态菜单实现实例代码的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下
    2017-01-01
  • Android AIDL和远程Service调用示例代码

    Android AIDL和远程Service调用示例代码

    本文主要介绍Android AIDL和远程Service,这里详细介绍了相关知识，并附实例代码和实现效果图,有兴趣的朋友参考下
    2016-08-08
  • Android AIDL实现进程间通信探索

    Android AIDL实现进程间通信探索

    这篇文章主要为大家详细介绍了Android AIDL实现进程间通信的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Android编程获取网址HTML代码的方法

    Android编程获取网址HTML代码的方法

    这篇文章主要介绍了Android编程获取网址HTML代码的方法,涉及Android针对给定URL地址的网页相关信息操作技巧,需要的朋友可以参考下
    2017-06-06

最新评论