文章目录 一、ExpansionTile 构造方法 二、完整代码示例 三、相关资源 一、ExpansionTile 构造方法 ---- 下面是 ExpansionTile 的构造方法 ; 其中 required...), ), ); } /// 创建列表 , 每个元素都是一个 ExpansionTile 组件 List _buildList(){ List _generateWidget(name)).toList(), ); } /// 生成 ExpansionTile 下的 ListView 的单个组件...GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 :...https://download.csdn.net/download/han1202012/21590425 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
+ Column / Row 的方法比较类似，不过可以直接通过指定 ListView 的 scrollDirection 就可以了。...需要通过一个 Delegate 生成 item，该方法直接通过 builder 生成，同时也可以直接指定 item 的高度 body: ListView.builder( itemBuilder...ExpansionTile 既然讲到了 ListView，在日常开发中，折叠列表也是一个比较常用的，所以这边要提下 ExpansionTile 这个部件，因为相对比较简单，所以直接上代码了 class...GridView 生成列表可以通过 ListView 来实现，那么同样，实现网格列表 Flutter 也提供了 GridView 来实现，实现 GridView 的方法也很多...我数了下，大概有 10...GridView.builder 前面介绍的方法中，生成 item 的方式基本上是通过 List 进行转换的，在 custom 提到了 IndexWidgetBuilder 的生成方式，当然，在 ListView
和尚继续整理 Flutter 中日常用到的小知识点。 1....CachedNetworkImage 缓存图片 对于加载网络图片时，添加一个加载动画或网络图片异常时添加一个错误图片会给用户一个良好的体验，此时 CachedNetworkImage 可以帮我们解决这个问题...CachedNetworkImage 是一个三方 pub 库，引入的基本方式省略； CachedNetworkImage 中有两个属性很重要： placeholder 用来在加载图片时的缓冲过程，可以是动态...Flutter 提供了13种状态，但需注意的是有些是区分 Android 和 iOS 的，使用时需加注意。 ?...ExpansionTile 扩展Tile 和尚在学习过程中尝试了一下 ExpansionTile，是一个可向下扩展空间的 Widget，如效果图。
前言 ---- 在前面的文章中我们介绍了可以展开的带标题控件ExpansionTile的用法，在文章的最后还是按照惯例给大家留下了一个问题。 实现如下效果： ?...可以看到界面整体上是一个listView,在ListView的第二例是一个ExpansionTile，ExpansionTile的内部是多个ListTile，trailing结合自定义动画将“+”icon...旋转22.5°变成了一个“×”，并且在ExpansionTile展开时改变了icon的颜色。...嗯，就是这个效果，可以看到在点击右侧按钮的同时下面body的展开时有动画的哦。...，当有一个item处于打开状态时在点击其他item就没有效果了，但是我想要当我点击其他Item关于之前的Item打开现在Item如何做呢？
ExpansionTile ---- ExpansionTile是什么东西？其实就是一个有标题可以展开的控件而已，其他就跟其他的layout没有很大的差别了。...构造方法： 代码： ---- ExpansionTile({ Key key, this.leading,//和ListTitle类似，在文字前面的Widget @required...的构造方法可以说也是足够的简单，哈。...当然，我们也可以给ExpansionTile设置一个leading或者修改右侧展开关闭图标 leading: Icon(Icons.whatshot,color: Colors.redAccent,),...可以看到我们在文字的左侧放置了一个“火”的图标，把文字的右侧的图标改成了一个向右的小箭头，效果还不错，但是细心的小伙伴会发现右侧的箭头并没有像默认的trailing那样会随着ExpansionTile的展开和关闭来做变换
如需查看文中链接，请点击文章左下的“阅读原文”。 ---- 说到Flutter，可能很多同学都会将它和这几个词关联起来：新兴的、移动端、动态化、跨平台、开发框架。...从去年开始Flutter的热度在不断地上升，那么它对很多同学造成了一个误区：认为Flutter是最近新兴的一个开发框架。...说Flutter是最流行的框架呢，是没有任何问题的，但它并不是一个最近才出现的开发框架。...2018.12 - Flutter1.0发布，它的发布将大家对Flutter的学习和研究推到了一个新的起点 2019.2 - Flutter1.2发布主要增加对web的支持 由此开看：Flutter在逐渐的走向成熟和壮大...JSON解析与复杂模型转换实用技巧 基于shared_preferences的本地存储操作 Flutter进阶提升：玩转列表组件 基于ListView实现水平和垂直方式滚动的列表 基于ExpansionTile
说Flutter是最流行的框架呢，是没有任何问题的，但它并不是一个最近才出现的开发框架。为什么这么说呢？ ?...所有的布局使用一种语言，聚集在一处，Flutter很容易提供高级工具，使布局更简单； 5）开发人员发现Dart特别容易学习，因为它具有静态和动态语言用户都熟悉的特性。 ?...动态化技术 Flutter使用的Dart语言，支持AOT和JIT两种模式，在Dev时候，通过JIT可以实现热重载，开发者可以即时的看到代码修改的效果。...，据官方文档，Flutter可以在支持的设备上达到120FPS，而ReactNative的文档上，只提到了可以达到60FPS（RN是否支持120FPS未深入调研，文档上 RN 可以通过优化 diff 的方法提升渲染效率...基于ListView实现水平和垂直方式滚动的列表 基于ExpansionTile实现可展开的列表 基于GridView实现网格列表 高级功能列表下拉刷新与上拉加载更多功能实现 Flutter进阶提升
零、前言 FlutterUnit是【张风捷特烈】长期维护的一个Flutter集录、指南的开源App 如果你还未食用,可参见总汇集: 【 FlutterUnit 食用指南】 开源篇 欢迎 Star...确实ExpansionTile展开上下会有线，非常难看，所以我未使用ExpansionTile方案 折叠效果的核心代码在源码的: components/project/widget_node_panel.dart...---- 一、AnimatedCrossFade实现方案 核心的组件是: AnimatedCrossFade,可能很少人用，但它是一个十分强大的组件 你可以在FlutterUnit app中进行搜索体验...Flutter Unit基本就是根据这种方法实现的代码面板折叠。 - - ? ?...---- 二、魔改ExpansionTile实现方案 上周六晚8:30在B站直播了ExpansionTile源码的解析。 只要看懂源码，其实魔改一下也是so easy 的。
Flutter Unit 解牛篇 将对项目的一些实现点进行剖析。 很多朋友问我，你代码折叠面板怎么做的?ExpansionTile展开的线去不掉吧?...确实ExpansionTile展开上下会有线，非常难看，所以我未使用ExpansionTile方案 折叠效果的核心代码在源码的: components/project/widget_node_panel.dart...一、AnimatedCrossFade实现方案 核心的组件是: AnimatedCrossFade,可能很少人用，但它是一个十分强大的组件 你可以在FlutterUnit app中进行搜索体验...详见文章: toggle_rotate Flutter Unit基本就是根据这种方法实现的代码面板折叠。...二、魔改ExpansionTile实现方案 上周六晚8:30在B站直播了ExpansionTile源码的解析。 只要看懂源码，其实魔改一下也是so easy 的。
ScrollView在Flutter中等价于什么？ 谁是Flutter的列表组件？ 如何知道点击了列表中哪个item？ 如何动态更新ListView？...在Flutter中，有几种方法可以实现相同的结果 您可以通过使用Column、Row和Stack的组合来实现RelativeLayout的效果。...在Flutter中，最简单的方法是使用ListView。但在Flutter中，一个ListView既是一个ScrollView，也是一个Android ListView。...ListView中，您可以创建一个适配器，然后您可以将它传递给ListView，该适配器将使用适配器返回的内容来展示每一行，从上面代码中不难看出，在Flutter中没有adapter的等价物，我们唯一要做的就是控制这个...一个更新 ListView 的简单方法是，在 setState() 中创建一个新的 List，并把旧 List 的数据拷贝给新的 list。
0x00 分享下动态化探索过程中的几个炮灰方案 Flutter 动态化方案一：静态解析Dart语言，生成UI描述 Dart 本身是描述语言，IDE 的 Outline 工具可以解析 Dart 代码生成树形结构...Flutter 动态化方案二：动态运行 Dart 语言，生产UI描述 和方案一静态解析Dart对比，第二个方案是写一个极其轻量的运行时库，让编写UI的Dart 代码运行了起来，生成树形结构，再序列化为...MXFlutter 高效的动态列表 通过在 JS 侧，ListView 调用 Build 方法时，提前展开 child, 并为 ListView 增加 children 成员变量。...渲染优化1-局部刷新：配置树Diff 一个事实 自动对比两次Widget 无论如何都没有直接创建一个新的快，如果开发者不参与，由框架来自动计算Diff是得不偿失的 可行的方法 牺牲响应式UI框架的设计模式...，释放VM层对象 在Native层使用 JSManagerValue，VM层对象释放后，Native的引用被自动置空 线程问题 参照业界RN等框架的设计，VM层跑在一个单独的后台线程 从Flutter
为了让你的 App 更美观，主题切换已经是一个必不可少的功能了，但如果想在传统的 Android 和 iOS 上分别适配不同的主题相当繁琐。但这一切，在 Flutter 中都非常容易实现。...状态管理：通俗的讲，当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以用 Flutter 中的状态管理来管理统一的状态...因为切换主题通常会在设置界面中出现，所以这里我用了一个ExpansionTile，这是一个可以展开的ListTile，代码如下： …………ExpansionTile( leading: Icon(Icons.color_lens...其中onTap内的代码就是上一节中提到的设置颜色主题的方法，InkWell主要用于提供主题色的点击效果，换成GestureDetector也是可以的。...可以看出，相较于原生应用主题的适配，在 Flutter 中实现换肤的功能简单很多了。
在flutter中，基本上所有的对象都是widget,对于layout来说也不例外。也就是说在flutter中layout也是用代码来完成的，这和其他的用配置文件来描述layout的语言有所不同。...flutter中layout的分类flutter中的layout widget有很多，他们大概可以分为三类，分别是只包含一个child的layout widget，可以包含多个child的layout...Wrap — 可以对子child进行动态调整的widget。可滑动的Sliver widgets有下面几种：CupertinoSliverNavigationBar — 是一种IOS风格的导航bar。...如果你只有一个child，那么就没有必要使用Flex或者Row和Column了，可以考虑使用Align或者Center来对child进行定位。...我们可以在Row中添加一个属性叫做mainAxisAlignment,取值如下：mainAxisAlignment: MainAxisAlignment.spaceEvenly重新运行，生成的图像如下：
在 Flutter 视图布局（一）中文章结束时留下了一个问题，大家有尝试去实现吗？ 如果大家认真看文章的话，我觉得这并不是很难的东西。...源码中说到 ListView 有4中设置子元素的方式： List ListView.builder ListView.separated ListView.custom 第一种 List...BuildContext context, int index ListView.builder 首先还是要翻译一下源码里是怎么解释这个方法的： 使用了 indexedWidgetBuilder 它可以按需生成子元素...ListView.separated 首先还是要翻译一下源码里是怎么解释这方法的： 使用了两个 indexedWidgetBuilder 来处理子元素，itembuilder 是按需生成子元素，separatorbuilder...ListView.custom 没错还是要翻译一下源码里是怎么解释这方法的： 构造函数接受一个 sliverChildDelegate，它提供自定义子模型其他方面的功能。
你会建立什么 您将实施一个简单的移动应用程序，为一家创业公司生成建议名称。 用户可以选择和取消选择名称，保存最好的名称。 该代码一次生成十个名称。 当用户滚动时，会生成新批次的名称。...意见 本示例创建一个Material应用程序。 Material是一种视觉设计语言，在移动设备和网络上是标准的。 Flutter提供了一套丰富的Material小部件。...这是因为配对这个词是在构建方法内部生成的，每次MaterialApp需要渲染时或者在Flutter Inspector中切换平台时都会运行。 ? 问题？ 如果您的应用程序运行不正常，请查找错别字。...接下来，您将添加一个基本构建方法，该方法通过将单词生成代码从MyApp移动到RandomWordsState来生成单词对。...此方法构建显示建议词对的ListView。 ListView类提供了一个构建器属性itemBuilder，一个指定为匿名函数的工厂构建器和回调函数。
widget的任一一个子widget获取共享数据并操作数据，在这里就是可以在ListView方法下的唯一位置获取ListDataViewModel var userPromotionViewModel...4.2 Flutter 数据预加载 为了缩短用户的加载等待时长，我们经常需要一些预加载方法。比如在前一个页面预加载下一个页面的数据，或者在长列表的分页请求时候，可以做分页预加载。...异步任务结束在页面被销毁之后，没有检查State是否还是mounted状态，继续setState()就会出现这个错误。...setState()方法之前检查是否mounted，mounted是一个标示当前Widget树是否已经被渲染的状态值。...ChangeNotifier，在内部重新复写dispose(）方法，同时重新封装方法通知刷新界面，在每次需要通知刷新界面的时候判断当前界面是否已经被销毁。
可滚动组件 当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter 就会提示 Overflow 错误，为此，Flutter 提供了多种可滚动组件，用于显示列表和长布局； 可滚动组件都直接或间接的包含一个...，在 Flutter 中，术语 ViewPort (视口) ，如无特别说明，则是指一个 Widget 的实际显示区域； 例如，一个 ListView 的显示区域的高度是 800 像素，虽然其列表项总高度可能远远超过...ListView.separated 可以在生成的列表项之间添加一个分隔组件，他比 ListView.builder 多了个 sparatorBuilder 参数，该参数是一个分割组件生成器 栗子：基数下面添加红色下划线...方法生成单词；当列表滑动到末尾时，判断是否有下一页，如果有则进行异步获取，并显示 loading，没有则显示没有更多了。...ListView 的自动拉伸，效果如下： 总结 上面主要介绍了 ListView 的公共参数和构造函数，不同的构造对应了不同列表的生成模型，如果需要自定义列表生成模型，可以通过 ListView.custom
Flutter 滑动列表 在 Flutter 里我们常见的滑动列表场景，简单地说其实是由三部分组成： Viewport ： 它是一个 MultiChildRenderObjectWidget 的控件...，其中： SliverConstraints 中有 remainingPaintExtent 可以用来表示剩余的可绘制具体的大小； SliverGeometry 里也有 scrollExtent （可滑动的距离...）、paintExtent（可绘制大小）、layoutExtent （布局大小范围）、visible(是否需要绘制)等参数； 所以通过这部分参数，在 Viewport 里可以实现动态管理，节省资源，根据...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配； ?...image 如上动图所示，可以看到 item0 并没有在橙色区域停止滑动，而是继续往上滑动，这就是因为作为 body 的列表不知道顶部有固定区域。
在前一篇的文章我们学习了ListView和GridView的用法，我们可以使用new 方式和ListView.builder（）、ListView.custom（）的方式来构建这两个Widget，使用ListVIew...静态路由 ---- 在Flutter中有着两种路由跳转的方式，一种是静态路由，在创建时就已经明确知道了要跳转的页面和值。另一种是动态路由，跳转传入的目标地址和要传入的值都可以是动态的。...使用pushNamed方法传入一个在routes定义的名字即可。...所以，我们就需要了解下Flutter中的动态路由了。...动态路由 ---- 在Navigator中还有一个方法是push（）方法，需要传入一个Route对象，在Flutter中我们可以使用PageRouteBuilder来构建这个Route对象。
在item数目比较少的情况下是没有任何问题的，如果item数目比较多的情况下，直接将所有的item都取出来放在ListView中就不太现实了。...幸好，ListView还提供了一个ListView.builder的方法，这个方法会按需进行item的创建，所以在item数目比较多的情况下是非常好用的。...因为这次我们要使用builder,所以没有必要在item生成的时候就创建好widget，我们可以将widget的创建放在ListView的builder中。...还是上面的例子，我们可以在创建items数组的时候就根据i的不同来生成不同的item类型，也可以如下所示，在itemBuilder中根据index的不同来返回不同的item：body: ListView.builder...是我们在应用中会经常用到的一种widget，希望大家能够灵活掌握。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
对象存储
云直播
