flutter组件学习之ListView 组件详解

Flutter ListView 组件详解

ListView 是 Flutter 中最常用的滚动列表组件，用于显示垂直滚动的可滚动组件列表。

基本用法

1. 基础 ListView

ListView(
children: <Widget>[
ListTile(title: Text(\’Item 1\’)),
ListTile(title: Text(\’Item 2\’)),
ListTile(title: Text(\’Item 3\’)),
// … 更多子组件
],
)

2. 设置滚动方向

ListView(
scrollDirection: Axis.horizontal,// 水平滚动
children: <Widget>[
Container(width: 200, color: Colors.red),
Container(width: 200, color: Colors.green),
Container(width: 200, color: Colors.blue),
],
)

构造方法详解

1. ListView() – 基础构造

适用于少量固定子组件的情况。

ListView(
padding: EdgeInsets.all(16.0),// 列表内边距
reverse: false,// 是否反向显示
shrinkWrap: false,// 是否包裹内容
physics: AlwaysScrollableScrollPhysics(),// 滚动物理特性
children: [...],
)

2. ListView.builder() – 懒加载构造

适用于大量或动态数据，按需构建子组件。

ListView.builder(
itemCount: 100,// 项目数量
itemBuilder: (context, index) {

return ListTile(
title: Text(\’Item $index\’),
subtitle: Text(\’这是第 $index 个项目\’),
);
},
)

3. ListView.separated() – 带分隔符的列表

在列表项之间添加分隔符。

ListView.separated(
itemCount: 50,
separatorBuilder: (context, index) => Divider(
height: 1,
color: Colors.grey,
),
itemBuilder: (context, index) {

return ListTile(
title: Text(\’项目 $index\’),
);
},
)

4. ListView.custom() – 自定义构造

提供最大的灵活性。

ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {

return ListTile(
title: Text(\’Item $index\’),
);
},
childCount: 100,
),
)

核心属性详解

1. scrollDirection – 滚动方向

ListView(
scrollDirection: Axis.vertical,// 垂直方向（默认）
children: [...],
)

ListView(
scrollDirection: Axis.horizontal,// 水平方向
children: [...],
)

2. physics – 滚动物理特性

ListView(
// 始终可滚动，即使内容不足
physics: AlwaysScrollableScrollPhysics(),
children: [...],
)

ListView(
// 禁止滚动
physics: NeverScrollableScrollPhysics(),
children: [...],
)

ListView(
// 回弹效果（默认）
physics: BouncingScrollPhysics(),
children: [...],
)

ListView(
// 固定滚动（类似iOS）
physics: ClampingScrollPhysics(),
children: [...],
)

3. shrinkWrap – 包裹内容

Column(
children: [
Text(\’标题\’),
ListView(
shrinkWrap: true,// 包裹内容，不占用全部空间
physics: NeverScrollableScrollPhysics(),// 禁止内部滚动
children: [...],
),
],
)

4. padding – 内边距

ListView(
padding: EdgeInsets.all(16.0),// 所有方向
children: [...],
)

ListView(
padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
children: [...],
)

5. reverse – 反向显示

ListView(
reverse: true,// 从下往上显示
children: [
Text(\’Item 1\’),
Text(\’Item 2\’),
Text(\’Item 3\’),
],
)
// 显示顺序：Item 3, Item 2, Item 1

6. controller – 滚动控制器

final ScrollController _controller = ScrollController();

@override
void initState() {

super.initState();
_controller.addListener(() {

print(\’滚动位置: ${

_controller.offset}\’);
});
}

ListView(
controller: _controller,
children: [...],
)

实际应用示例

示例1：新闻列表

ListView.builder(
padding: EdgeInsets.all(8.0),
itemCount: newsList.length,
itemBuilder: (context, index) {

final news = newsList[index];
return Card(
margin: EdgeInsets.symmetric(vertical: 8.0),
child: InkWell(
onTap: () {

// 跳转到新闻详情页
},
child: