flutter列表无法滚动到底部_Flutter：手把手教你使用滚动型列表组件：ListView

前言

Flutter ListView在日常开发中非常常见

今天，carson全面介绍Flutter ListView的使用，包括基础使用 & 进阶使用(下拉刷新、上拉加载)，希望你们会喜欢。

示意图

目录

示意图

1. 简介

定义：滚动型控件

作用：可滚动显示超出屏幕的内容

应用场景：显示超过一屏的内容

2. 基础使用

ListView的基础创建使用有三种方式：

默认构造函数：ListView()

ListView.build()

ListView.separated()

使用方式1：ListView()

a. 简介

通过默认构造函数来创建列表，应用场景 = 短列表

b. 构造方法

ListView({

Axis scrollDirection = Axis.vertical, // 列表的滚动方向，可选值：Axis的horizontal、vertical

ScrollController controller, // 控制器，与列表滚动相关，比如监听列表的滚动事件

ScrollPhysics physics, // 列表滚动至边缘后继续拖动的物理效果，Android与iOS效果不同：Android = 波纹状(ClampingScrollPhysics)，而iOS = 回弹的弹性效果(BouncingScrollPhysics)。若想不同的平台上呈现各自的效果可使用AlwaysScrollableScrollPhysics，它会根据不同平台自动选用各自的物理效果。若想禁用在边缘的拖动效果，可使用NeverScrollableScrollPhysics

bool shrinkWrap = false, // 决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时，shrinkWrap必须为true，否则Flutter会给出警告；

EdgeInsetsGeometry padding, // 列表内边距

this.itemExtent, // 子元素长度。当列表中的每一项长度是固定的情况下可以指定该值，有助于提高列表的性能(因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置)；

double cacheExtent, // 预渲染区域长度，ListView会在其可视区域的两边留一个cacheExtent长度的区域作为预渲染区域(对于ListView.build或ListView.separated构造函数创建的列表，不在可视区域和预渲染区域内的子元素不会被创建或会被销毁)；

List children = const [], // 容纳子元素的组件数组

})

c. 具体使用

import 'package:flutter/material.dart'; // Material UI组件库

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

// 无状态控件显示

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

// 主界面入口返回的组件 = MaterialApp

return MaterialApp(

title: 'Widget_Demo', //标题

theme: ThemeData(primarySwatch: Colors.blue), //主题色

home: MyWidget(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面

);

}

}

class MyWidget extends StatefulWidget {

@override

State createState() {

return new _MyWidgetState();

}

}

class _MyWidgetState extends State {

ScrollController _controller = new ScrollController();

@override

void initState() {

super.initState();

// 设置监听方法

_controller.addListener(() {

print('_controller Listener');

print(_controller.offset); // 打印滚动位置

});

}

@override

Widget build(BuildContext context) {

return ListView(

scrollDirection: Axis.vertical,

// 设置方向

itemExtent: 50,

// 当滚动方向为垂直方向时，那么itemExtent = 子控件的高度

// 当滚动方向为水平方向时，那么itemExtent = 子控件的宽度

padding: EdgeInsets.all(1.0),

// 设置边距

physics: new AlwaysScrollableScrollPhysics(),

// 设置到边缘后的效果

controller: _controller,

// 添加监听器

// 设置子控件

children: [

Text("test1"),

Text("test2"),

Text("test3"),

Text("test4"),

Text("test5"),

Text("test6"),

Text("test7"),

Text("test8"),

Text("test9"),

Text("test10"),

Text("test11"),

Text("test12"),

Text("test13"),

Text("test14"),

Text("test15"),

],

);

}

}

d. 示意图

这种方式创建的列表存在一个问题：对于那些长列表或者需要较昂贵渲染开销的子组件，即使还没有出现在屏幕中但仍然会被ListView所创建，这将是一项较大的开销，使用不当可能引起性能问题甚至卡顿。

使用方式2：ListView.build()

a. 应用场景

长列表

b. 构造函数

ListView.builder({

...// 和ListView默认构造函数一样

int itemCount, // 列表中元素的数量

IndexedWidgetBuilder itemBuilder, // 子元素的渲染方法，允许自定义子元素组件

})

// 特别注意：不同于ListView默认构造函数通过children参数指定子元素的这种方式，ListView.build通过暴露统一的itemBuilder方法将渲染子元素的控制权交还给调用方。