Screenshot_1618537132.png 如果做这个筛选界面的时候,刚开始最外层用Column嵌套一个Container(红色部分)和ListView。...出现的问题就是不能滚动。...解决办法 在Listview和GridView外面嵌套一个Expanded,不能滚动是因为Container尺寸计算的问题,Expande就是listview有多大就有多大。...( physics: NeverScrollableScrollPhysics(), scrollDirection: Axis.vertical, // 水平滚动...crossAxisSpacing: 6.0, //每列的间距 ), itemCount: widget.data.subjectDtos.length
现如今打开一个 App,比如头条、微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。 ?...如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件。...ListView 主要有以下几种使用方式 ListView ListView.builder ListView.separated ListView.custom ListView ListView 是最简单直接的方式...正常来说,前面三个已经可以满足我们的日常使用需求了,无需自定义。 总结,上面主要讨论了 ListView 的几个构造函数及用法,讨论如何实现常见的滚动列表。...完成的代码,可见list_view.dart 。 最后 笔者最近在学习flutter,会持续地记录自己的学习过程,并放在 github 上。 以上就是本文的全部内容,希望对大家的学习有所帮助。
这样的需求,在iOS中是用UITableView实现的;而在Flutter中,实现这种需求的则是列表控件ListView。...但是从上图的运行效果可以看到,由于屏幕的宽高有限,同一时间用户只能看到3个Widget。也就是说,是否一次性提前构建出所有要展示的子Widget,于用户而言并没有什么视觉上的差异。...在Flutter中,有一个专门的控件CustomScrollView,用来处理多个需要自定义滚动效果的Widget。...以一个有着封面头图的列表为例,我们希望封面头图和列表这两层视图的滚动联动起来,当用户滚动列表时,头图会根据用户的滚动手势,进行缩小与展开。...总结 在处理展示一组连续、可滚动的视图元素的场景中,Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。
已经有了的东西都有: 一个ListView listView 一个List dataList Context context 需要实现的东西是: 一个DataListViewAdapter...,当进行如下调用时,就能在列表上显示出数据: listView.setAdapter(new DataListViewAdapter(context, dataList)); 我们需要实现一个扩展了BaseAdapter...的类,代码如下: listDatas) { _context = context; _dataList = listDatas; } /* * 获取数据集的总数
前面的小节基本上讲完了常用的部件和容器部件,也可以完成很多的界面,但是又一个问题,假如我们要显示一段文字,比如将 一段又臭又长的文字 在界面上显示 1000 次,不难完成吧 // ..省略一些无关代码...如果需要在每个 item 之间添加分割线,那么通过以上的方式实现就比较困难了,所以 Flutter 提供了 separated 方法用来快速构建带有分割线的 ListView 加入我们的 item 之间的分割线需要如下样式...ExpansionTile 既然讲到了 ListView,在日常开发中,折叠列表也是一个比较常用的,所以这边要提下 ExpansionTile 这个部件,因为相对比较简单,所以直接上代码了 class...GridView.builder 前面介绍的方法中,生成 item 的方式基本上是通过 List 进行转换的,在 custom 提到了 IndexWidgetBuilder 的生成方式,当然,在 ListView...在结束前,我们再说下如何通过 ScrollController 来控制 Scrollable 的滚动位置。
上拉加载更多 ---- 在 FLutter 中 , 所有的列表都支持设置一个 ScrollController 类型的参数 , 设置 ScrollController , 用于控制上拉加载更多内容 ;...在 initState 方法中执行该操作 , 相应的在 dispose 方法中 , 执行 ScrollController 对象的 dispose 方法 ; @override void initState...() { /// 为滚动控制器添加监听 _scrollController.addListener(() {}); super.initState(); } 最后 , 在 ListView.../docs/ Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) GitHub 上的 Flutter 开源示例 : https://download.csdn.net...GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 :
GridView 将多个widget放在一个可滑动的表格中。 ListView 将多个widget放在一个可滑动的列表中。 Stack 在一个widget上面盖上另一个widget。...Material Components Card 将一些相近的信息装进一个有圆角和阴影的盒子里。 ListTile 一个Row中装载最多3行文字;可选则在前面或尾部添加图标。...GridView 用GridView来将widget放入一个2维的列表中。 GridView提供了2个预装配好的列表,也可以自己建立自定义列表。 GridView支持滚动。...ListView ListView能以列的形式展示数据。当内容超过渲染范围时,自动提供滚动的功能。...Stack 小结: 用来在当前widget上面再盖上一层widget Stack children中的第一个widget放在最下,后面的widget会一层层盖上去 Stack的内容不支持滚动 可以裁剪超出范围的子
english_words: ^3.1.0 在添加完新的依赖包后,当你进行保存时 VS Code 会自动进行依赖包的更新和下载,还是比较方便的,就不需要手动进行更新命令了。...02 - ListView 关于 ListView 还是要先认真看下源码,这次可不能那么鲁莽。 仔细一看,这属性还挺多。不着急,那我们分别都来看一看。...简单来说(翻译一下),通常在可滚动列表的容器中子项都会被装在重绘边界之内,以便列表在滚动时不需要将它们进行重绘。...其中的难点还是在于 ListView.custom 的实现上,他需要你自己去实现列表相关的所有东西:监听滚动、渲染子元素的方式、销毁子元素等等。...最后总结 flutter 基本上为你考虑了一些相关场景使用的实现,所以可以很方便的使用这些内容,但是考虑过细自然也就会觉得需要了解的内容就过多。
6.1.1 Scrollable组件 在Flutter中,一个可滚动的组件直接或间接包含一个Scrollable组件,它是可滚动组件的基础组件。...在实际使用过程中,Flutter提供了SliverList、SliverGrid等可滚动组件的Sliver版本。...和ListView.builder相比,ListView.separated多了一个separatorBuilder属性,该属性可以在生成的列表项之间添加一条分割线。...,为了不造成滚动时的冲突,需要对子组件添加禁止滚动属性。...SliverGridDelegateWithMaxCrossAxisExtent({ @required this.maxCrossAxisExtent,//子元素在横轴上的最大长度 this.mainAxisSpacing
默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,如当滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,如当滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。...指定 itemExtent 的值比让子元素决定自身长度在绘制时更高效,特别是在滚动位置频繁变化的状态下,因为设置 itemExtent 可以让滚动系统提前知道列表的长度。...ListView 分页加载 工程 yaml 文件中要添加 english_words 的依赖 # The following adds the Cupertino Icons font to your...默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,如当滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。
,里面的widget可以在主轴上滚动。...当ListView在一个无边界(滚动方向上)的容器中时,shrinkWrap必须为true。...注意:上面这些参数并非ListView特有,在本章后面介绍的其它可滚动组件也可能会拥有这些参数,它们的含义是相同的。...实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型(自身不能再滚动),而后者包含滚动模型 ,也正因如此,CustomScrollView才可以将多个Sliver...简书https://www.jianshu.com/p/af0b1e3fb044 在 pubspec.yaml 中添加依赖 //pub方式 dependencies: flutter_easyrefresh
布局 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。...值得注意的是,页面切换时,由于 State 对象在视图树中的位置发生了变化,需要先暂时移除后再重新添加,重新触发组件构建,因此这个函数也会被调用。...以一个有着封面头图的列表为例,我们希望封面头图和列表这两层视图的滚动联动起来,当用户滚动列表时,头图会根据用户的滚动手势,进行缩小和展开。...ListView 绑定,才可以进行滚动信息的监听,进行相应的滚动控制。...通过 NotificationListener 则: 可以监听其子 Widget 中的任意 ListView; 不仅可以得到这些 ListView 的当前滚动位置信息,还可以获取当前的滚动事件信息 。
默认情况下,Flutter 会根据具体的平台分别使用不同的 ScrollPhysics 对象,应用不同的显示效果,在 IOS 上会出现弹性效果,而在 android 上则会出现微光效果,如果你想在所有的平台下使用同一个效果...这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为,例如,Scaffold 正是使用这种机制在 IOS 上实现了点击导航栏回到顶部的功能 Scrollbar Scrollbar 是一个 Material...,在 Flutter 中,术语 ViewPort (视口) ,如无特别说明,则是指一个 Widget 的实际显示区域; 例如,一个 ListView 的显示区域的高度是 800 像素,虽然其列表项总高度可能远远超过...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 ,如 false 时,初始位置在头,反之则在 尾 primary:指是否使用 widget 树中默认的 PrimaryScrollController...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件的 Sliver 版,如 SliverList,SliverGrid 等,实际上 Sliver
虽然我们号称多功能,但是组件本质任然只是一个ListView,所以提供的能力应该是围绕可以滚动的列表出发。结合闲鱼的文章与个人的日常使用,我认为ListView还欠缺下面几种能力。...1、滚动到指定index 我们在Flutter中可以通过使用ScrollController控制ListView滚动到指定的位置,但这里的位置是基于offset(偏移像素)而非index,实际开发中我们常常会用到跳转指定...PS:(上面的功能都已经实现了~~) 二、高性能的ListView组件要解决哪些场景?...上面是对于功能的设计,那么从性能角度闲鱼在文章中也提到了我们遇到的一些问题: 1、LoadMore场景下的增量更新 我们在使用ListView的时候,往往会配合刷新组件做加载更多的功能。...2、Element的缓存 3、分帧上屏 三、每种功能的实现方案 在明确了功能需求之后,我并没有着急动手开发,而是先思考这些功能的在实现上的基本方案以及他们之间的联系(本期以功能分析为主,下期会进行性能上的分析
您可以为widget构造函数指定相对于父组件的布局规则。 推荐参考在StackOverflow上的一个在Flutter中构建RelativeLayout的例子。 如何使用widget定义布局属性?...在Android中,我们可以使用FrameLayout布局进行分层。 Flutter 使用Stack widget 控制子widget在一层。...ScrollView在Flutter中等价于什么? 在Android中,ScrollView允许您包含一个子控件,以便在用户设备的屏幕比控件内容小的情况下,使它们可以滚动。...在 iOS 中,你给 view 包裹上 ScrollView 来允许用户在需要时滚动你的内容。在 Flutter 中,最简单的方法是使用 ListView widget。...list中要展示的数据。
在 Flutter 中,布局和绘制工作实际上是在 Widget 的另一个子类 RenderObjectWidget 内完成的。...ListView 的组件控制器则是 ScrollControler,我们可以通过它来获取视图的滚动信息,更新视图的滚动位置。...与 ScrollController 不同的是,NotificationListener 是一个 Widget,为了监听滚动类型的事件,我们需要将 NotificationListener 添加为 ListView...Flutter 需要原生环境才能运行,但是有些资源我们需要在 Flutter 框架运行之前提前使用,比如要给应用添加图标,或是希望在等待 Flutter 框架启动时添加启动图,我们就需要在对应的原生工程中完成相应的配置...在之前的ListView学习中,介绍了 ScrollNotification 的使用方法:ListView 在滚动时会分发通知,我们可以在上层使用 NotificationListener 监听 ScrollNotification
前言 随着 Flutter越来越火热,我相信越来越多的小伙伴都跃跃欲试。但是一个很重要的问题是,很多第三方 SDK,如微信SDK,都无法在Flutter上直接使用。...引入 在pubspec.yaml文件中添加如下代码: dependencies: fluwx: ^0.0.1 初始化 Fluwx.registerApp(RegisterModel(appId:...所有字段名字和官方文档基本是一致的。图片处理图片仅支持png和jpg。 目前所有需要图片的地方支持网络图片及assets图片。 使用assets图片需要添加assets://。... 也可以在assets图片添加?package=package_name以读取指定包的图片。 未来可能支持file://。...注册完成后,请在对应平台添加如下代码: 在Android上:FluwxShareHandler.setWXApi(wxapi) 在iOS上:isWeChatRegistered = YES;你也可以取消注册你的
前言 随着 Flutter越来越火热,我相信越来越多的小伙伴都跃跃欲试。但是一个很重要的问题是,很多第三方 SDK,如微信SDK,都无法在Flutter上直接使用。...引入 在pubspec.yaml文件中添加如下代码: dependencies: fluwx: ^0.0.1 初始化 Fluwx.registerApp(RegisterModel(appId: "...注册完成后,请在对应平台添加如下代码: 在Android上: FluwxShareHandler.setWXApi(wxapi) 在iOS上: isWeChatRegistered = YES; 你也可以取消注册你的...所有字段名字和官方文档基本是一致的。 图片处理 图片仅支持png和jpg。 目前所有需要图片的地方支持网络图片及assets图片。 使用assets图片需要添加assets://。... 也可以在assets图片添加?package=package_name以读取指定包的图片。 未来可能支持file://。
然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。...第6步:把它放在一起 在最后一步,你将这些碎片组装在一起。 这些小部件安排在ListView中,而不是列中,因为在小设备上运行应用程序时,ListView会自动滚动。...如果要添加填充,边距,边框或背景色,请使用容器来命名其某些功能。 在这个例子中,每个文本小部件放置在容器中以添加边距。 整个行也被放置在容器中以在行的周围添加填充。 本例中的其余UI由属性控制。...标准小部件 Container: 向边框添加填充,边距,边框,背景颜色或其他装饰。 GridView: 放置小部件作为可滚动的网格。 ListView: 将小部件列为可滚动列表。...Dart code:来自Flutter Gallery的grid_list_demo.dart ListView ListView是一个类似列的小部件,它的内容对于其渲染框太长时会自动提供滚动。
在过去的这段时间里,踊跃出了很多关于flutter的技术文章和开源项目例子,基本上每天都有,同比RN刚出来时,热情度远超RN。...ListView大家应该都用过,只是需要记住一点,列表再跳转详情时需要记录当前列表的滚动位置,只需加入以下代码即可: key: new PageStorageKey('key-name') Hero...动画,在详情页面里,用了2处Hero动画,Hero动画是在route切换过程中执行的动画。...大家都知道,flexibleSpace里的CollapseMode.parallax属性可以在屏幕滚动时把title移动到appBar里,可实际上,布局是定制的,实现不了官方的那种效果,于是通过监听ScrollController...并计算滚动位置的方式修改state属性让appBar的title根据滚动位置显示隐藏。
领取专属 10元无门槛券
手把手带您无忧上云