flutter长列表 ListView、GridView、SingleChildScrollView、CustomScrollView区别

组件名称用途/适合场景是否懒加载支持列表结构用法复杂度
SingleChildScrollView适用于内容数量不大、不重复的页面(如表单、静态内容)❌ 否❌ 否⭐⭐
ListView适用于垂直方向的长列表,自动滚动;适合展示大量数据✅ 支持✅ 是⭐⭐
ListView.builder优化版 ListView,适合超长动态列表,按需懒加载构建✅ 强烈推荐✅ 是⭐⭐⭐
GridView适用于网格状布局,如图片列表✅ 支持✅ 是(网格)⭐⭐⭐
CustomScrollView高级滚动视图,组合多个滚动子元素(如 SliverAppBar + SliverList)✅ 支持✅ 是(灵活⭐⭐⭐⭐
PageView水平翻页,用于页面轮播、引导页、Tab 内容切换等✅ 每页懒加载❌ 否⭐⭐
Scrollable(低阶)最底层滚动组件,通常不建议直接使用,除非自定义滚动行为❓ 取决于实现⭐⭐⭐⭐⭐

常见使用场景说明

  1. SingleChildScrollView
    适合非列表型的页面,比如表单、图文页面。
SingleChildScrollView(child: Column(children: [...],),
)
  • 不支持懒加载
  • 所有子项一次性渲染
  • 不建议用于长列表,性能差
  1. ListView / ListView.builder
    适合列表型页面(如聊天记录、新闻列表、商品列表等)
ListView(children: [Text('Item 1'),Text('Item 2'),],
)// 更推荐
ListView.builder(itemCount: 1000,itemBuilder: (context, index) => Text('Item $index'),
)
  • 支持滚动
  • 支持懒加载(builder 模式)
  • 更适合长内容
  1. GridView
    用于网格状内容(如相册、九宫格)
GridView.count(crossAxisCount: 2,children: [...],
)
  • 有滚动能力
  • 可用于横向或纵向
  • 可指定网格数量、间距
  1. CustomScrollView + Slivers
    用于构建更复杂滚动效果,比如顶部可折叠 AppBar + 列表内容
CustomScrollView(slivers: [SliverAppBar(expandedHeight: 200,flexibleSpace: FlexibleSpaceBar(title: Text('标题')),pinned: true,),SliverList(delegate: SliverChildBuilderDelegate((context, index) => ListTile(title: Text('Item $index')),childCount: 50,),),],
)
  • 高度可定制,滚动联动效果
  • 用于复杂的 UI 页面(如首页、动态页)
  1. PageView
PageView(children: [Container(color: Colors.red),Container(color: Colors.green),],
)
  • 适用于引导页、卡片轮播、Tab 页
  • 支持左右/上下滑动
  • 支持手势控制、自动翻页

总结建议

页面类型推荐滚动组件
表单、静态信息页面SingleChildScrollView
聊天、列表、动态加载页面ListView.builder
图片网格、宫格商品GridView
首页、复杂滑动结构页面CustomScrollView
引导页、卡片轮播PageView

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/80484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙OSUniApp 开发的一键分享功能#三方框架 #Uniapp

使用 UniApp 开发的一键分享功能 在移动应用开发中,分享功能几乎是必不可少的一环。一个好的分享体验不仅能带来更多用户,还能提升产品的曝光度。本文将详细讲解如何在 UniApp 框架下实现一个简单高效的一键分享功能,适配多个平台。 各平台分…

Vue-监听属性

监听属性 简单监听 点击切换名字&#xff0c;来回变更Tom/Jerry&#xff0c;输出 你好&#xff0c;Tom/Jerry 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>监听属性</title><!-- …

DeepSeek 赋能物联网:从连接到智能的跨越之路

目录 一、引言&#xff1a;物联网新时代的开启二、DeepSeek 技术揭秘2.1 DeepSeek 是什么2.2 DeepSeek 技术优势 三、DeepSeek 与物联网的融合之基3.1 物联网发展现状与挑战3.2 DeepSeek 带来的变革性突破 四、DeepSeek 在物联网的多元应用场景4.1 智慧电力&#xff1a;开启能源…

3.6/Q1,GBD数据库最新文章解读

文章题目&#xff1a;Global, regional, and national burden of geriatric depressive disorders in people aged 60 years and older: an analysis of the Global Burden of Disease Study 2021 DOI&#xff1a;10.1186/s12991-025-00560-2 中文标题&#xff1a;60 岁及以上人…

LVGL学习笔记

文章目录 一、 LVGL移植教程(GD32)一 并行驱动 LED二三一、 LVGL移植教程(GD32) 参考链接 1.GD32+LVGL移植教程(超详细)——基于GD32F303X系列MCU 一 并行驱动 LED 根据您提供的引脚信号(DCLK、DISP、HSYNC、VSYNC、DE),可以判断这是一款采用 TTL/Parallel RGB 接口…

软件架构之--论微服务的开发方法1

论微服务的开发方法1 摘要 2023年 2月,本人所在集团公司承接了长三角地区某省渔船图纸电子化审查系统项目开发,该项目旨在为长三角地区渔船建造设计院、以及渔船图纸审查机构提供一个便捷的渔船图纸电子化审查服务平台。在此项目中,我作为项目组成员参与项目的建设工作,并…

如何在终端/命令行中把PDF的每一页转换成图片(PNG)

今天被对象安排了一个任务&#xff1a; 之前自己其实也有这个需要&#xff0c;但是吧&#xff0c;我懒&#xff1a;量少拖拽&#xff0c;量大就放弃。但这次躲不过去了&#xff0c;所以研究了一下有什么工具可以做到这个需求。 本文记录我这次发现的使用 XpdfReader 的方法。…

mac安装cast

背景 pycharm本地运行脚本时提示cast没有安装 问题原因 脚本尝试调用cast命令&#xff08;以太坊开发工具foundry中的子命令&#xff09;&#xff0c;但您的系统未安装该工具。 从日志可见&#xff0c;错误发生在通过sysutil.py执行shell命令时。 解决方案 方法1&#xf…

【搭建Node-RED + MQTT Broker实现AI大模型交互】

搭建Node-RED MQTT Broker实现AI大模型交互 搭建Node-RED MQTT Broker实现AI大模型交互一、系统架构二、环境准备与安装1. 安装Node.js2. 安装Mosquitto MQTT Broker3. 配置Mosquitto4. 安装Node-RED5. 配置Node-RED监听所有网络接口6. 启动Node-RED 三、Node-RED流程配置1. …

算法第21天 | 第77题. 组合、216. 组合总和 III、17. 电话号码的字母组合

回溯基础概念 什么是回溯&#xff1f; 如何实现回溯&#xff1f; 第77题. 组合 题目 思路与解法 carl的讲解&#xff1a; 回溯搜索法 class Solution:def combine(self, n: int, k: int) -> List[List[int]]:self.path []self.res []self.backtracking(n, k, 1)retu…

嵌入式硬件篇---拓展板

文章目录 前言 前言 本文简单介绍了拓展板的原理以及使用。

【深度学习基础】从感知机到多层神经网络:模型原理、结构与计算过程全解析

【深度学习基础】从感知机到多层神经网络&#xff1a;模型原理、结构与计算过程全解析 1. 引言 神经网络的重要性&#xff1a; 作为人工智能的核心技术之一&#xff0c;神经网络通过模拟人脑神经元的工作机制&#xff0c;成为解决复杂模式识别、预测和决策任务的利器。从图像分…

sparkSQL读入csv文件写入mysql(2)

&#xff08;二&#xff09;创建数据库和表 接下来&#xff0c;我们去创建一个新的数据库&#xff0c;数据表&#xff0c;并插入一条数据。 -- 创建数据库 CREATE DATABASE spark; -- 使用数据库 USE spark;-- 创建表 create table person(id int, name char(20), age int);-- …

JVM如何处理多线程内存抢占问题

目录 1、堆内存结构 2、运行时数据 3、内存分配机制 3.1、堆内存结构 3.2、内存分配方式 1、指针碰撞 2、空闲列表 4、jvm内存抢占方案 4.1、TLAB 4.2、CAS 4.3、锁优化 4.4、逃逸分析与栈上分配 5、问题 5.1、内存分配竞争导致性能下降 5.2、伪共享&#xff08…

Ubuntu---omg又出bug了

自用遇到问题的合集 250518——桌面文件突然消失 ANS&#xff1a;参考博文

正则表达式与文本处理的艺术

引言 在前端开发领域&#xff0c;文本处理是一项核心技能。正则表达式作为一种强大的模式匹配工具&#xff0c;能够帮助我们高效地处理各种复杂的文本操作任务。 正则表达式基础 什么是正则表达式&#xff1f; 正则表达式是一种用于匹配字符串中字符组合的模式。它由一系列…

初学c语言15(字符和字符串函数)

一.字符串分类函数 头文件&#xff1a;ctype.h 作用&#xff1a;判断是什么类型的字符 函数举例&#xff1a; 函数 符合条件就为真 islower判断是否为小写字符&#xff08;a~z&#xff09;isupper判断是否为大写字符&#xff08;A~Z&#xff09;isdigit十进制数字&#xf…

12-串口外设

一、串口外设的基本概述 1、基本定义 串口通信&#xff0c;通过在通信双方之间以比特位&#xff08;bit&#xff09;的形式逐一发送或接收数据&#xff0c;实现了信息的有效传递。其通信方式不仅简单可靠&#xff0c;而且成本很低。 2、stm32的串口 下面是两个MCU的数据交互&…

NE555双音门铃实验

1脚为地。通常被连接到电路共同接地。 2脚为触发输入端。 3脚为输出端&#xff0c;输出的电平状态受触发器的控制&#xff0c;而触发器受上比较器6脚和下比较器2脚的控制。当触发器接受上比较器A1从R脚输入的高电平时&#xff0c;触发器被置于复位状态&#xff0c;3脚输出低电…

Redis分布式锁实现

概述 为什么要要分布式锁 在并发编程中&#xff0c;我们通过锁&#xff0c;来避免由于竞争而造成的数据不一致问题。 通常&#xff0c;我们以synchronized 、Lock来使用它。Java中的锁&#xff0c;只能保证在同一个JVM进程内中执行 如果需要在分布式集群环境下的话&#xff0…