在这里插入图片描述
在这里插入图片描述

作者：高红朋（小雨下雨的雨）
仓库地址：https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git
联系邮箱：372699828@qq.com

引言

在Flutter开发中，滚动视图是展示大量数据的核心组件。Flutter提供了强大的滚动视图组件，包括ListView和GridView。本文将详细介绍这些组件的用法、特性和实际应用场景，帮助开发者掌握高效展示列表和网格数据的技巧。

一、ListView组件

1.1 ListView概述

ListView是Flutter中最常用的滚动列表组件，用于在有限的屏幕空间内展示大量数据。

1.2 ListView的创建方式

Flutter提供了多种创建ListView的方式：

方式 适用场景 特点
ListView 少量固定数据 一次性加载所有子Widget
ListView.builder 大量数据 按需加载，只渲染可见项
ListView.separated 需要分隔符 可自定义分隔符
ListView.custom 高度定制 自定义SliverChildDelegate

1.3 ListView.builder

ListView.builder是最常用的创建方式，它只渲染可见的子Widget，性能最优。

ListView.builder({
  super.key,
  super.scrollDirection = Axis.vertical,
  super.reverse = false,
  super.controller,
  super.primary,
  super.physics,
  super.shrinkWrap = false,
  super.padding,
  required IndexedWidgetBuilder itemBuilder,
  ItemCount? itemCount,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
});

核心属性：

属性 类型 说明
itemBuilder IndexedWidgetBuilder 子Widget构建器，接收index参数
itemCount int 列表项数量
scrollDirection Axis 滚动方向，默认垂直
reverse bool 是否反向滚动
shrinkWrap bool 是否根据内容调整高度

1.4 ListView.builder基础示例

ListView.builder(
  itemCount: 100,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('用户 $index'),
      subtitle: Text('用户描述信息'),
      onTap: () {
        print('点击了用户 $index');
      },
    );
  },
)

效果：创建一个包含100个列表项的滚动列表，每个列表项显示用户信息。

1.5 ListView.separated

ListView.separated可以在列表项之间添加自定义分隔符：

ListView.separated(
  itemCount: 20,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('项目 $index'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider(
      height: 1,
      color: Colors.grey[300],
    );
  },
)

效果：列表项之间显示灰色分隔线。

1.6 ListView.separated高级示例

ListView.separated(
  itemCount: 20,
  itemBuilder: (context, index) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('标题 $index', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 4),
          Text('描述内容 $index'),
        ],
      ),
    );
  },
  separatorBuilder: (context, index) {
    return Container(
      height: 8,
      color: Colors.grey[100],
    );
  },
)

效果：列表项之间显示灰色背景的间距。

二、滚动控制器

2.1 ScrollController概述

ScrollController用于控制滚动位置和监听滚动事件。

2.2 ScrollController常用方法

方法 说明
jumpTo(double offset) 立即跳转到指定位置
animateTo(double offset, ...) 动画跳转到指定位置
addListener(VoidCallback listener) 添加滚动监听
removeListener(VoidCallback listener) 移除滚动监听
dispose() 释放资源

2.3 ScrollController使用示例

class MyListPage extends StatefulWidget {
  const MyListPage({super.key});

  @override
  State<MyListPage> createState() => _MyListPageState();
}

class _MyListPageState extends State<MyListPage> {
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    
    // 添加滚动监听
    _scrollController.addListener(() {
      print('滚动位置: ${_scrollController.offset}');
      print('是否到达顶部: ${_scrollController.position.pixels == 0}');
      print('是否到达底部: ${_scrollController.position.pixels == _scrollController.position.maxScrollExtent}');
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(title: Text('项目 $index'));
      },
    );
  }
}

2.4 滚动到指定位置

// 立即跳转
_scrollController.jumpTo(100);

// 动画跳转
_scrollController.animateTo(
  100,
  duration: Duration(milliseconds: 300),
  curve: Curves.ease,
);

// 滚动到顶部
_scrollController.jumpTo(0);

// 滚动到底部
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);

三、滚动物理效果

3.1 ScrollPhysics概述

ScrollPhysics控制滚动的物理效果，如弹性、阻尼等。

3.2 常用ScrollPhysics

物理效果 说明 适用平台
BouncingScrollPhysics 弹性效果，超出边界后回弹 iOS
ClampingScrollPhysics 阻尼效果，超出边界后停止 Android
NeverScrollableScrollPhysics 禁止滚动 通用
PageScrollPhysics 分页效果，自动对齐到页面 通用
FixedExtentScrollPhysics 固定间距滚动 通用

3.3 ScrollPhysics使用示例

ListView(
  physics: BouncingScrollPhysics(),       // iOS风格弹性效果
  children: [...],
)

ListView(
  physics: ClampingScrollPhysics(),        // Android风格阻尼效果
  children: [...],
)

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

四、GridView组件

4.1 GridView概述

GridView用于创建网格布局，将子Widget排列成多行多列。

4.2 GridView的创建方式

方式 适用场景 特点
GridView 少量固定数据 一次性加载所有子Widget
GridView.builder 大量数据 按需加载，性能最优
GridView.count 固定列数 指定列数创建网格
GridView.extent 固定宽度 指定最大宽度，自动计算列数

4.3 GridView.builder

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,      // 列数
    crossAxisSpacing: 8,    // 列间距
    mainAxisSpacing: 8,     // 行间距
    childAspectRatio: 1,    // 宽高比
  ),
  itemCount: 20,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue[100],
      child: Center(child: Text('$index')),
    );
  },
)

4.4 SliverGridDelegate

SliverGridDelegate定义网格的布局规则：

SliverGridDelegateWithFixedCrossAxisCount（固定列数）：

SliverGridDelegateWithFixedCrossAxisCount({
  required int crossAxisCount,      // 列数
  double mainAxisSpacing = 0,       // 行间距
  double crossAxisSpacing = 0,      // 列间距
  double childAspectRatio = 1,      // 宽高比
})

SliverGridDelegateWithMaxCrossAxisExtent（固定最大宽度）：

SliverGridDelegateWithMaxCrossAxisExtent({
  required double maxCrossAxisExtent,  // 最大宽度
  double mainAxisSpacing = 0,          // 行间距
  double crossAxisSpacing = 0,         // 列间距
  double childAspectRatio = 1,         // 宽高比
})

4.5 GridView.count

GridView.count是GridView.builder的便捷方式：

GridView.count(
  crossAxisCount: 3,
  children: List.generate(15, (index) {
    return Container(
      color: Colors.green[100 + index * 50],
      child: Center(child: Text('$index')),
    );
  }),
)

4.6 GridView.extent

GridView.extent根据最大宽度自动计算列数：

GridView.extent(
  maxCrossAxisExtent: 150,  // 每个格子最大宽度
  children: List.generate(15, (index) {
    return Container(
      color: Colors.orange[100 + index * 50],
      child: Center(child: Text('$index')),
    );
  }),
)

五、实际应用场景

5.1 场景1：联系人列表

ListView.builder(
  itemCount: contacts.length,
  itemBuilder: (context, index) {
    final contact = contacts[index];
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.blue,
        child: Text(contact.name[0]),
      ),
      title: Text(contact.name),
      subtitle: Text(contact.phone),
      trailing: Icon(Icons.chevron_right),
      onTap: () {
        // 跳转到联系人详情
      },
    );
  },
)

5.2 场景2：图片网格

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 4,
    mainAxisSpacing: 4,
    childAspectRatio: 1,
  ),
  itemCount: images.length,
  itemBuilder: (context, index) {
    return Image.network(
      images[index],
      fit: BoxFit.cover,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return Center(child: CircularProgressIndicator());
      },
    );
  },
)

5.3 场景3：无限滚动列表

class InfiniteListView extends StatefulWidget {
  const InfiniteListView({super.key});

  @override
  State<InfiniteListView> createState() => _InfiniteListViewState();
}

class _InfiniteListViewState extends State<InfiniteListView> {
  late ScrollController _scrollController;
  List<String> _items = List.generate(20, (index) => '项目 $index');
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      _loadMore();
    }
  }

  Future<void> _loadMore() async {
    if (_isLoading) return;
    setState(() => _isLoading = true);
    
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 1));
    
    setState(() {
      _items.addAll(List.generate(10, (index) => '新项目 ${_items.length + index}'));
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: _items.length + 1,
      itemBuilder: (context, index) {
        if (index == _items.length) {
          return _isLoading
              ? Center(child: CircularProgressIndicator())
              : SizedBox.shrink();
        }
        return ListTile(title: Text(_items[index]));
      },
    );
  }
}

5.4 场景4：水平滚动列表

ListView(
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.symmetric(horizontal: 16),
  children: List.generate(10, (index) {
    return Container(
      width: 150,
      margin: EdgeInsets.only(right: 12),
      decoration: BoxDecoration(
        color: Colors.blue[100 + index * 100],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(child: Text('卡片 $index')),
    );
  }),
)

5.5 场景5：混合列表

ListView(
  children: [
    // 头部
    Container(
      height: 200,
      color: Colors.blue[200],
      child: Center(child: Text('头部Banner')),
    ),
    
    // 列表项
    ...List.generate(10, (index) {
      return ListTile(title: Text('列表项 $index'));
    }),
    
    // 底部
    Container(
      height: 100,
      color: Colors.green[200],
      child: Center(child: Text('底部信息')),
    ),
  ],
)

六、性能优化

6.1 使用ListView.builder而非ListView

// 不推荐：一次性加载所有子Widget
ListView(
  children: List.generate(1000, (index) => ListTile(title: Text('$index'))),
)

// 推荐：按需加载
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) => ListTile(title: Text('$index')),
)

6.2 使用const构造函数

// 推荐：使用const构造函数
ListView.builder(
  itemBuilder: (context, index) {
    return const ListTile(title: Text('固定文本'));
  },
)

6.3 使用AutomaticKeepAliveClientMixin

class MyListItem extends StatefulWidget {
  const MyListItem({super.key});

  @override
  State<MyListItem> createState() => _MyListItemState();
}

class _MyListItemState extends State<MyListItem> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListTile(title: Text('保持状态的列表项'));
  }
}

6.4 使用RepaintBoundary

ListView.builder(
  itemBuilder: (context, index) {
    return RepaintBoundary(
      child: ComplexWidget(index: index),
    );
  },
)

七、常见问题与解决方案

7.1 问题1：ListView嵌套在Column中无法滚动

问题描述：ListView嵌套在Column中时，ListView高度为0或无法滚动。

解决方案：

Column(
  children: [
    Text('标题'),
    Expanded(
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) => ListTile(title: Text('$index')),
      ),
    ),
  ],
)

7.2 问题2：ListView内容不足时仍可滚动

问题描述：ListView内容较少时，仍然可以滚动。

解决方案：

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

// 或使用shrinkWrap
ListView(
  shrinkWrap: true,
  physics: ClampingScrollPhysics(),
  children: [...],
)

7.3 问题3：GridView滚动时闪烁

问题描述：GridView滚动时，子Widget出现闪烁。

解决方案：

GridView.builder(
  itemBuilder: (context, index) {
    return RepaintBoundary(
      child: Container(
        color: Colors.blue[100],
        child: Center(child: Text('$index')),
      ),
    );
  },
)

7.4 问题4：滚动监听内存泄漏

问题描述：ScrollController没有正确释放导致内存泄漏。

解决方案：

@override
void dispose() {
  _scrollController.dispose();  // 必须释放
  super.dispose();
}

八、最佳实践

8.1 优先使用builder模式

// 推荐
ListView.builder(itemCount: 100, itemBuilder: ...)

// 不推荐
ListView(children: List.generate(100, ...))

8.2 合理设置itemCount

// 推荐：明确设置itemCount
ListView.builder(
  itemCount: items.length,
  itemBuilder: ...,
)

// 不推荐：不设置itemCount（无限列表除外）
ListView.builder(itemBuilder: ...)

8.3 使用ListTile简化列表项

// 推荐：使用ListTile
ListTile(
  leading: Icon(Icons.person),
  title: Text('姓名'),
  subtitle: Text('描述'),
)

// 不推荐：手动构建
Row(
  children: [
    Icon(Icons.person),
    Column(
      children: [Text('姓名'), Text('描述')],
    ),
  ],
)

8.4 避免在build方法中创建ScrollController

// 推荐：在initState中创建
late ScrollController _controller;

@override
void initState() {
  super.initState();
  _controller = ScrollController();
}

// 不推荐：在build中创建
@override
Widget build(BuildContext context) {
  ScrollController controller = ScrollController();  // 每次build都创建新实例
  return ListView(controller: controller);
}

九、总结

通过本文的学习，我们掌握了Flutter中滚动视图的核心组件：

  1. ListView：线性滚动列表，支持垂直和水平滚动
  2. GridView：网格滚动视图，支持固定列数和最大宽度
  3. ScrollController：控制滚动位置和监听滚动事件
  4. ScrollPhysics：控制滚动的物理效果

核心要点：

  • ListView.builder是性能最优的列表创建方式，只渲染可见项
  • GridView.builder是性能最优的网格创建方式
  • ScrollController用于控制滚动和监听滚动事件
  • 合理选择ScrollPhysics实现平台一致的滚动体验

掌握这些组件是构建高效列表和网格界面的基础，合理使用它们可以显著提升应用性能和用户体验。

参考资料

  1. Flutter官方文档 - ListView：https://api.flutter.dev/flutter/widgets/ListView-class.html
  2. Flutter官方文档 - GridView：https://api.flutter.dev/flutter/widgets/GridView-class.html
  3. Flutter官方文档 - ScrollController：https://api.flutter.dev/flutter/widgets/ScrollController-class.html
  4. Flutter官方文档 - ScrollPhysics：https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html
# harmonyos # flutter # 华为 # 学习 # 鸿蒙 # 鸿蒙系统
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

鸿蒙Flutter Positioned定位组件：精确定位子组件

avatar 人工智能6S服务平台
cover

鸿蒙Flutter Wrap流式布局：实现标签云效果

avatar 人工智能6S服务平台
cover

鸿蒙 ArkTS 实战：Energy Device Compare 从节能设备对比到绿色生活工具完整解析

avatar 人工智能6S服务平台