flutter系列之:flutter中listview的高级用法

简介: 一般情况下,我们使用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笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
92 3
|
6月前
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套 在 Flutter 中,ListView 和 PageView 是两个常用的控件,它们可以用于滑动展示大量内容的场景,且支持各种嵌套方式,本文将介绍其中的一些花式嵌套方式。
263 0
|
17天前
|
容器
Flutter &&鸿蒙next中的 Stack 和 Positioned 用法详解
在 Flutter 中,Stack 和 Positioned 是创建层叠布局和灵活定位元素的常用组件。Stack 可以将多个子组件叠加在一起,允许子组件相互重叠;Positioned 用于在 Stack 内部精确控制子组件的位置。本文详细介绍了它们的基本用法、属性和应用场景,包括动画、弹出层和悬浮按钮等。
67 1
|
19天前
|
Dart 安全 编译器
Flutter结合鸿蒙next 中数据类型转换的高级用法:dynamic 类型与其他类型的转换解析
在 Flutter 开发中,`dynamic` 类型提供了灵活性,但也带来了类型安全性问题。本文深入探讨 `dynamic` 类型及其与其他类型的转换,介绍如何使用 `as` 关键字、`is` 操作符和 `whereType&lt;T&gt;()` 方法进行类型转换,并提供最佳实践,包括避免过度使用 `dynamic`、使用 Null Safety 和异常处理,帮助开发者提高代码的可读性和可维护性。
69 1
|
3月前
|
JavaScript 前端开发 Android开发
Flutter笔记:关于WebView插件的用法(下)
Flutter笔记:关于WebView插件的用法(下)
220 5
|
3月前
|
UED
Flutter之ListView实现自动滑动到底部
Flutter之ListView实现自动滑动到底部
211 1
|
3月前
|
存储 缓存 JavaScript
Flutter笔记:关于WebView插件的用法(上)
Flutter笔记:关于WebView插件的用法(上)
1493 4
|
4月前
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
|
4月前
Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)
Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)
|
6月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
153 0
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用