首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter响应式编程:StreamsBLoC

适用于: StreamSubscription - 当您不再需要收听Stream时,取消订阅; StreamController - 当你不再需要StreamController时,关闭它; 这同样适用于...如何基于由Stream提供数据构建Widget? Flutter提供了一个非常方便StatefulWidget,称为StreamBuilder。...显示电影列表(显示无限列表技巧说明) 要显示符合过滤条件电影列表,我们使用GridView.builder(ListPage)或ListView.builder(ListOnePage)作为无限滚动列表...提醒一下,GridView.builderListView.builder都将itemCount作为输入,如果提供了item数量,则表示要根据itemCount数量来显示列表。...此外,GridView.builderListView.builder只在认为必须在视口中呈现某个项目(索引)时才调用itemBuilder。

4.1K90
您找到你想要的搜索结果了吗?
是的
没有找到

Flutter》-- 6.高级组件

参阅书籍: 《Flutter跨平台开发入门与实践》-- 向治洪(著) 6. 高级组件 6.1 可滚动组件 对于列表长布局显示溢出问题,可以使用Flutter提供可滚动组件来处理。...目前,可滚动组件中大部分组件都支持基于Sliver延迟构建模型,如ListViewGridView。...ListView.builder相比,ListView.separated多了一个separatorBuilder属性,该属性可以在生成列表项之间添加一条分割线。...ListView.custom适用于自定义列表场景。...构造函数一共有5个: 1)GridView():默认构造函数,适用于元素个数有限场景,会一次性全部渲染children属性中子元素组件; 2)GridView.builder():适用于构建大量或无限长列表

10.5K20

ListView&GirdView

那么我们今天就来介绍下Flutter列表组件ListView网格组件GirdView,嗯,果然是Google家亲儿子,连名字都Android里一模一样。...在Flutter中有三种构建ListView方式,刚才介绍是最简单一种,但是却不是最常用,因为它仅仅适用于已知数量或者较少数量Item情况。...下面来看下GridView GridView ---- GirView用法ListView类似,只不过由于GridView可以在一列或者一行显示多个Item,所以在构造方法中就多了个参 GridView...当然,GridView你也可以使用builder()custom()方式实现 import 'package:flutter/material.dart'; void main() { runApp...小结 ---- ListView就是我们常用列表视图 GridView就是我们常用宫格视图 ListViewGridView都可以使用new 或者builder()custom()方法来创建对象

1.7K20

Flutter 构建完整应用手册-列表 顶

基础列表 显示数据列表是移动应用程序基本模式。 Flutter包含ListView部件,使列表变得轻而易举!...创建一个ListView 使用标准ListView构造函数非常适合包含少量项目的列表。 我们还将使用内置ListTile部件来为我们项目提供一个可视结构。...使用长列表 标准ListView构造函数适用于小列表。 为了处理包含大量项目的列表,最好使用ListView.builder构造函数。...对于这个任务,我们将使用GridView部件。 开始使用网格最简单方法是使用GridView.count构造函数,因为它允许我们指定我们想要行数或列数。...在这个例子中,我们将生成一个100个部件列表,在列表中显示它们索引。 这将帮助我们可视化GridView工作原理。

2.5K20

Flutter开发:Gridview使用

Flutter开发中,表格组件是经常要用到,表格展示数据也是App开发过程中不可缺少需求功能,其实Gridview属性ListView属性很接近,那么本篇文章就来聊聊Flutter开发中表格组件...this.gridDelegate,@required IndexedWidgetBuilder itemBuilder) 适用于widget数量多时候,通过GridView.builder使用,...) GridView.custom使用,通过两个代理方法gridDelegatechildrenDelegate来创建Gridview,其中gridDelegate是进行布局代理,控制每列或每行子...widget数量,以及上下左右间距宽高比例;childrenDelegate代理方法有两种实现方式,在使用时候需要注意二者区别。...Gridview简单使用实例,具体操作如下所示: 1、dart文件具体实现源码 import 'package:flutter/material.dart'; import 'package:portal

58610

Flutter开发-可滚动组件

为此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表长布局。...ListView大多数参数都是相同,它们含义也都相同,如有疑惑读者可以翻阅ListView一节,在此不再赘述。...Flutter中提供了两个SliverGridDelegate子类SliverGridDelegateWithFixedCrossAxisCountSliverGridDelegateWithMaxCrossAxisExtent...上面我们介绍GridView都需要一个widget数组作为其子元素,这些方式都会提前将所有子widget都构建好,所以只适用于子widget数量比较少时,当子widget比较多时,我们可以通过GridView.builder...因此,为了能让可滚动组件能CustomScrollView配合使用,Flutter提供了一些可滚动组件Sliver版,如SliverList、SliverGrid等。

4.4K20

Flutter | 滚动组件,ListViewGridVIew

可滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表长布局; 可滚动组件都直接或间接包含一个...可滚动组件中有很多都支持 Sliver 延时构建模型,如 ListViewGridView ,但是也有不支持改模型 SingleChildScrollView 主轴纵轴 在滚动组件坐标描述中,... ListView 参数大多数都是相同,含义也都是相同,有疑问可以翻到上面查看 gridDelegate:类型是 SliverGridDelegate,他作用是控制 GridView 如何排列...childAspectRatio:所指子元素横轴主轴长度比为最终长度比 其他参数都上面的一样 GridView( gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent...Widget数组 作为其子元素,这些方式会提前创建好 widget,只适用于 widget 数量较小时候,当 widget 比较多时候,可以通过 GridView.builder 来动态创建子 Widget

8.4K20

Flutter 布局常用 widgets(Common layout widgets)

简单列举总结一下常用布局widget。 Flutter有丰富layout组件库。其中有一些是常用库。 下面的widget分为两类:标准组件来自Material Components特殊组件。...GridView 将多个widget放在一个可滑动表格中。 ListView 将多个widget放在一个可滑动列表中。 Stack 在一个widget上面盖上另一个widget。...允许指定子项最大像素宽度 示例1 - 用GridView.extent GridView.extent指定子项占据最大宽度 import 'package:flutter/material.dart...ListView 小结 把子视图装进列表中 水平或竖直都可以 支持滑动 相比于Column,可选配置比较少,但更易用并且支持滑动 Android中ListView差别不大 示例1 把ListTile...默认情况下,Card把自己尺寸缩小为0像素。可以用SizedBox来指定card尺寸。 FlutterCard有圆角阴影效果。修改elevation可改变阴影效果。

1.3K30

Flutter 黏贴卡动画效果

原文地址:https://medium.com/flutterdevs/slimycard-animated-in-flutter-700f92b8f382 设计非常出色动画会使UI感觉更直觉,应用程序具有光滑外观感觉...Flutter动画支持使实现各种动画类型变得容易。许多小部件,特别是“Material”小部件,都伴随着其设计规范中所描述标准运动效果,但是与此同时,也可以自定义这些效果。...我们将看到如何在flutter应用程序中实现使用slimy_card包制作动画粘纸卡。...在StreamBuilder中,添加一个initialData;SlimyCard支持Streams(BLoC)提供其实时状态。为此,将SlimyCard 包在StreamBuilder中。...在容器中,我们将添加高度,宽度装饰图像。我们还将添加两个文本并将它们包装到中心。

2.1K20

Flutter 实践 MVVM

Flutter 实践 MVVM 在做Android或iOS开发时,经常会了解到MVC,MVPMVVM。MVVM在移动端一度被非常推崇,虽然也有不少反对声音,不过MVVM确实是不错设计架构。...在做flutter开发时,刚学习时写很随意,什么东西都写一起,也不去考虑解耦等问题。但是实际生产开发是不能这样做,否则项目稍大就无法维护。...iOS里,也可以通过ReactiveCocoa来实现数据双向绑定。 而在Flutter中,我们可以借助Stream&Sink来实现数据变更通知,StreamBuilder来做View层绑定。...StreamBuilder 上述StreamSink还只是纯数据层面的,要想UI相关Widget关连起来,还有需要StreamBuilder帮助。...主要就是引入了StreamWidget,StreamBuilder,然后更新了一下ViewModelView数据绑定方式,总体来说还是比较简单

9.8K70

Flutter 入门指北之滑动部件(超详细)

来实现,Flutter 也提供了类似的部件 ListView 实现 ListView 方法主要有 通过 ListView 设置 children 属性实现 通过 ListView.custom 实现...如果不指定高度/宽度,ListView 需要根据每个 item 来计算 ListView 高度,这个计算过程是需要消耗时间资源 ListView.builder 该方法同 custom 类似,custom...:奇数位偶数位之间用黑色分割线,偶数位奇数位之间用红色分割线 // 需要分割线时候才使用,不能指定 item 高度 body: ListView.separated( itemBuilder...GridView 生成列表可以通过 ListView 来实现,那么同样,实现网格列表 Flutter 也提供了 GridView 来实现,实现 GridView 方法也很多...我数了下,大概有 10...因为 GridView ListView 亮着都是可滑动部件,直接拼接肯定会有「滑动冲突」,所以 Flutter 就提供了一个粘合剂,CustomScrollView,那么 Flutter 如何实现呢

2.4K30

Flutter可滑动组件

Flutter可滑动组件 1. ListView 1.1 ListView介绍 移动端数据量比较大时,一般都是通过列表来进行展示,比如商品数据、聊天列表、通信录、朋友圈等。...在Flutter中,我们也有对应列表Widget,就是ListView。 注意:在Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动视图。...在Flutter中我们可以使用GridView来实现,使用方式ListView也比较相似。...2.2 默认构造函数 使用默认构造函数来创建GridView时,ListView相比,需要传入一个特殊参数:gridDelegate。...Flutter官方文档中提到,ListView默认构造器建议在需要展示元素个数较少时使用,在展示元素数量较多时,建议使用ListView.builder() 方法构造视图。

7.1K30

Flutter GridView 网格控件

在项目中,有时候会有诸如“日历”展示之类需求,此时单列表ListView控件已经无法满足我们需要。GridView就是为了满足这样“二维数组”排列而存在。...1、默认构造函数 GridView({ //与ListView相同参数 Axis scrollDirection = Axis.vertical, bool reverse = false...[], }) GridView大部分参数与ListView是一样,请参见系列文章《Flutter ListView 列表控件》。...Flutter中提供了两个子类:SliverGridDelegateWithFixedCrossAxisCountSliverGridDelegateWithMaxCrossAxisExtent,我们可以直接使用...---- 6、StaggeredGridView.countBuilder 瀑布流 StaggeredGridView不是Flutter提供GridView组件,而是专门为实现瀑布流而存在flutter_staggered_grid_view

1.7K20

Android解决ScrollView下嵌套ListViewGridView中内容显示不全问题

最近为公司做一个Demo里面用到了ScrollView嵌套了GridViewListView,然而在嵌套时候我发现GridViewListView都是不能完全显示,显示基本上都是单行数据,最后查找资料翻阅文档看到原因是...ListViewGridView绘制过程中在ScrollView中无法准确测量自身高度,而且listVIewGridView抢占了焦点,使得ListViewGrideView具有自身显示效果...</LinearLayout </ScrollView 显示效果是这样其中ListviewGridView是可以滑动就是显示不全 ?...); } 下面是GridView方法ListView测量方法基本一样 但是listView是单行条目的不用在担心列问题问GridView则是需要进行自己分行自己分列 所以要注意一下...gridView) { // 获取GridView对应Adapter ListAdapter adapter = gridView.getAdapter(); if

2.3K20

Flutter 性能优化一些路径思考

图片Flutter 渲染流程在优化 Flutter 应用性能之前,首先很有必要了解其渲染流程,理解这个流程对于性能优化至关重要。图片Flutter 渲染流程主要分为三个阶段:构建、布局绘制。...例如,我们可以使用ListView.builder来构建列表,而不是使用ListView。...因为ListView.builder只会构建屏幕上可见widget,而ListView则会构建所有的widget。2....例如,我们可以使用FutureBuilder或StreamBuilder来实现懒加载,这样就可以避免一次性加载所有的数据,从而减少内存使用。...如果我们考虑从H5角度进行优化,我也非常建议使用小程序替代H5,让过往开发小程序直接运行在 Flutter 开发应用中,同样一个功能业务需一次小程序开发,即可实现在除了微信端其它 App 中也运行起来

45220
领券