shrinkWrap：该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。默认情况下，ListView的会在滚动方向尽可能多的占用空间。...当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。...crossAxisSpacing：横轴方向子元素的间距。 childAspectRatio：子元素在横轴长度和主轴长度的比例。...GridView.count GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount，我们通过它可以快速的创建横轴固定数量子元素的...GridView.builder 必须指定的参数有两个： GridView.builder( ...
，在 Flutter 中，术语 ViewPort (视口) ，如无特别说明，则是指一个 Widget 的实际显示区域； 例如，一个 ListView 的显示区域的高度是 800 像素，虽然其列表项总高度可能远远超过...当 ListView 在一个无边界(滚动方向上)的容器中时， shrinkWrap 必须为 true addAutomaticKeepAlives：该属性表示是否将列表项（子组件） 包裹在 AutomaticKeepAlive...复制代码 意思是 ListView 的高度无法确定，所以解决的办法就是给 ListView 设置边界，我们可以使用 SizedBox 指定具体的高度： children: [ Text("商品列表"...但是由于 listView 的高度是固定的，就会导致底部留白，这种情况可以使用屏幕的高度 减去状态类，导航栏，头部的高度。...childAspectRatio：子元素在横轴长度和主轴长度的比例。
在项目中，有时候会有诸如“日历”展示之类的需求，此时单列表ListView控件已经无法满足我们的需要。GridView就是为了满足这样的“二维数组”排列而存在的。...我们需要关注的是gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)。...3列的网格（只需要固定列，行数可根据数据多少自动调节），主轴方向item间隙为20像素，非主轴方向的item间隙为10像素，非主轴方向的内容是主轴方向内容的2倍容量。...GridView.builder(gridDelegate: null, itemBuilder: null), gridDelegate参数在上面已经讲过了，我们主要来看看itemBuilder如何使用...2 : 1),` 实际运用中需要根据实际情况对瀑布流item的高度进行调整。
前面的小节基本上讲完了常用的部件和容器部件，也可以完成很多的界面，但是又一个问题，假如我们要显示一段文字，比如将 一段又臭又长的文字 在界面上显示 1000 次，不难完成吧 // ..省略一些无关代码...)), 如果每个 item 的高度可以确定，那么推荐通过 itemExtent 来设置 item 的高度/宽度，能够加快 ListView 的渲染速度。...，这个数量是只单排的数量 SliverGridDelegateWithMaxCrossAxisExtent 这个是设置最大宽度/高度，在这个值范围内取最大值，比如一排能给你排下 6 个，但是远不到设置的最大值...GridView.builder 前面介绍的方法中，生成 item 的方式基本上是通过 List 进行转换的，在 custom 提到了 IndexWidgetBuilder 的生成方式，当然，在 ListView...在结束前，我们再说下如何通过 ScrollController 来控制 Scrollable 的滚动位置。
水平子组件的内边距； 5. mainAxisSpacing 垂直子组件的内边距； 6. crossAxisCount 一行的子组件的数量； 7. childAspectRatio 子组件的宽高比例；...中高度设置不管用 height:500.0 )); } return list; } @override...（变相的调整了高度） childAspectRatio: 0.8, // 子元素 children: this....（变相的调整了高度） // childAspectRatio: 0.8, // 子元素 children: this....用 GridView.builder 实现网格布局。
GridView.builder 实现网格布局； 常用属性： 1. scrollDirection 滚动方向。值的类型为 Axis； 2. padding 内边距。...值的类型为int； 7. childAspectRatio 子组件的宽高比例。值的类型为double； 8. children 子组件。...中高度设置不管用 height:500.0 )); } return list; } @override...（变相的调整了高度） childAspectRatio: 0.8, // 子元素 children: this....（变相的调整了高度） // childAspectRatio: 0.8, // 子元素 children: this.
根据手势操作滑动固定位的菜单栏完成；和尚简单学习一下； ?...StatefulWidget 小组件，通过 FractionallySizedBox 以父 Widget 为基数，可设置宽高比例的容器构建子内容； 案例尝试 1. builder ScrollableWidgetBuilder...构造器作为必选字段，用于在 DraggableScrollableSheet 中显示可滑动的子内容；其中返回内容需为可滑动的 ScrollableWidget，例如 ListView / GridView...4. expand expand 用于是否填充满父 Widget，若 DraggableScrollableSheet 外层固定高度则不影响；若外层未对高度进行固定，expand 作用于是否填充满父...小扩展 之前在分析 DraggableScrollableSheet 时其源码采用了 FractionallySizedBox 比例容器，和尚简单了解一下，其源码非常简单，通过设置 heightFactor
其中gridDelegate是一个SliverGridDelegate的实例，用来控制子组件在GridView中的布局。...GridView.builder，这个构造函数和默认的构造函数的区别在于childrenDelegate的实现不同，我们来看下GridView.builder中childrenDelegate的实现：...: childAspectRatio, ), 可以设置crossAxisCount的值。...最后一个GridView的构造函数叫做GridView.extent，它和count的构造函数很类似，不过extent提供的是一个maximum cross-axis extent,而不是一个固定的count...举个例子，如果GirdView是竖向滚动的，并且它的width是400 pixels,如果这个时候maxCrossAxisExtent被设置为120，那么一行只能有三列。
，用来设置 GridView item 基本属性。...= 1.0, // item 宽高比，默认1:1 }) Tips：注意设置 item 个数与列间距的配合，如果太大可能会造成页面展示不全等异常情况。...1.2 若此时设置内容 Widget 宽高，会发现依旧是重新打开一个页面，高度从底向上占据所设置高度，且点击空白区不会消失，如图： ?...2.2 若此时设置内容 Widget 宽高，会发现依旧是打开一个半透明页面，高度从底向上占据所设置高度，且点击空白区会消失，如图： ?...2.3 若此时设置内容 Widget 数据量很多，效果如何呢，这就是和尚选择用 GridView 的原因，在现有宽高内进行可滑动操作即可，如图： ?
，同时将每个item的高度强行设置为50。...: childAspectRatio, ), 2.5 GridView.builder() GridView.builder()方法与ListView相似，可以达到当view出现在手机屏幕时才进行加载的目的...3.2 Flutter 中常用的 Sliver Sliver名称 功能 对应的可滚动组件 SliverList 列表 ListView SliverFixedExtentList 高度固定的列表 指定itemExtent...根据原型生成高度固定的列表 指定prototypeItem的ListView SliverFillViewport 包含多给子组件，每个都可以填满屏幕 PageView 除了和列表对应的 Sliver...SliverGrid用来实现网格效果，SliverPadding用来进行填充，SliverSafeArea设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）。
其中gridDelegate是一个SliverGridDelegate的实例，用来控制子组件在GridView中的布局。...GridView.builder，这个构造函数和默认的构造函数的区别在于childrenDelegate的实现不同，我们来看下GridView.builder中childrenDelegate的实现：childrenDelegate...: childAspectRatio, ),可以设置crossAxisCount的值。...最后一个GridView的构造函数叫做GridView.extent，它和count的构造函数很类似，不过extent提供的是一个maximum cross-axis extent,而不是一个固定的count...举个例子，如果GirdView是竖向滚动的，并且它的width是400 pixels,如果这个时候maxCrossAxisExtent被设置为120，那么一行只能有三列。
指定 itemExtent 的值比让子元素决定自身长度在绘制时更高效，特别是在滚动位置频繁变化的状态下，因为设置 itemExtent 可以让滚动系统提前知道列表的长度。...（在懒加载时，如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...如果设置为 0.0，表示关闭预加载 children：列表项集合 semanticChildCount：提供语义信息的孩子的数量 item 数量固定的 listview 示例 listview 构造方法中的参数...（在懒加载时，如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...如果设置为 0.0，表示关闭预加载 semanticChildCount：提供语义信息的孩子的数量 GridView 固定列数 import 'package:flutter/material.dart
：视图窗口内部长度，大小等于屏幕显示的列表长度； extentAfter：列表中未滑入视图窗口部分的长度； atEdge：是否滚动到了可滚动组件的边界。...如果滚动方向是垂直方向，则表示子组件的高度；如果滚动方向为水平方向，则表示子组件的长度。...实现类的简写，用于创建横轴数量固定的网格视图； 4）GridView.extent()：SliverGridDelegateWithFixedCrossAxisCount实现类的简写，用于创建横轴子元素宽度固定的网格视图...在绘制阶段提供画笔，可配置画笔的颜色、样式和粗细等属性。...分层渲染可以降低视图渲染带来的性能开销。 无论是创建组合组件还是创建自绘组件，首先需要考虑如何将复杂的布局简化，把大问题拆分成若干小问题。
屏幕快照 2019-09-19 13.50.30.png 今天学习一下在Flutter中怎么使用GridView，效果如上图。...头部是一个Banner，使用的是第三方的 flutter_swiper: ^1.0.6 四个按钮就是使用的GridView 直接上代码，以下代码就是对四个按钮的封装 import 'package:flutter...poepole_s_icon.png", "images/goods_icon.png", "images/truck_iocn.png" ]; return GridView.builder...titleList[index], imageList[index]); }, //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量...mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio
在搭建 UI 的过程中，经常会出现要求约束宽高比的需求。 比如，把照片变成 16:9 或者 4:3 ，这个时候你会怎么做？ 是动态设置？还是写死宽高？...尝试将子项调整为特定宽高比的 widget。 widget 首先尝试布局约束所允许的最大宽度。通过给定的宽高比来确定小部件的高度，表示为宽度与高度的比率。...把宽高比设置为4:3 看一下： ? 可以看到，确实是按照我们输入的比例来执行的。 与GridView 联动 我们可能遇到更多的需求是：在GridView 中，也要控制住每一张图片的宽高比。...这个时候我们就只需要设置宽高比即可设置合适的宽高。 设置不符合常理的宽高 前面我们设置的都是符合常理的宽高。 比如，我们限制了外部容器的宽高都为100。...第一种情况：宽高比为 2，设置宽为100，那么高会自动算出来为50，这样是合理的。 第二种情况：宽高比为0.5，也就是说高比宽更长，那这个时候我设置宽为100，会是什么样的结果？
先看如何使 State 保持状态。...是不是感觉很神奇，可能一般的介绍文章到这里就结束了，毕竟已经解决了问题。但可惜，这是在我的 bgm 中。...我们也可以反过来想一想，如果某个场景围绕着 State 的生命周期有什么固定逻辑，我们也可以仿照这样的方式，使用一个 mixin 为 State 增加某些功能。...GridView，和 ListView 一样，内部使用 SliverChildBuilderDelegate ?...不过没有对外界暴露设置addAutomaticKeepAlives 的途径，永远为true。 ?
在现代科技发展迅速的时代，我们的电脑、手机、平板等设备里积累了大量的文件，这些文件可能是我们的照片、文档、音频、视频等等。然而，当文件数量增多时，我们如何快速地找到所需的文件呢？...这时，一个简洁、清晰的文件列表就能够帮助我们快速解决这些问题。 本文将探索的内容 在本文中，我们将深入探讨如何使用Flutter构建一个简单而实用的文件列表。...均匀布局 目前我们的文件列表是按照固定数量的文件数来显示的，但是在不同设备上，可能会出现文件块大小不一致的情况，导致布局不够美观。...通过设置overflow为TextOverflow.ellipsis，可以让文本在超出一定长度后自动截断，并显示省略号。...; } 在这段代码中，我们增大了每个文件块的宽度，以确保文件名能够完全显示在文件块内部。
Bob Martins对DIP的定义： 高层模块不应依赖于低层模块，两者应该依赖于抽象。 抽象不不应该依赖于实现，实现应该依赖于抽象。...显然，这不是一个良好的设计，组件之间高度耦合，可扩展性较差，它违背了DIP原则。高层模块Order类不应该依赖于低层模块SqlServerDal，AccessDal，两者应该依赖于抽象。...在上述的实例中，Order类所依赖的对象SqlServerDal的创建和绑定是在Order类内部进行的。事实证明，这种方法并不可取。...既然，不能在Order类内部直接绑定依赖关系，那么如何将SqlServerDal对象的引用传递给Order类使用呢？ ?...根据DIP原则，我们知道高层模块不应该依赖于低层模块，两者应该依赖于抽象。那么构造函数的参数应该是一个抽象类型。
二、网页重构 在实际工作中，UI设计师在设计网页的过程中，会留存很多网页中图片的源文件，我们在还原设计稿的时候，直接让设计师把网页相关的图片给我们即可。...高度自适应问题 网页中的很多位置是不应该设置固定高度的： 例如列表容器的高度应该根据列表元素的个数决定其高度，列表元素个数越多，列表高度越高。 列表容器是不应该设置高度的。...还有文章容器的整体高度，也应该根据内容的增多而逐渐增高。 在布局的时候，这些效果都不应该设置高度。...宽度自适应问题 在第07节中我们了解到，块元素默认情况独立成行，严谨的说，应该是： 块元素默认情况下占父级元素宽度的100% 因此，在网页制作中，如果块元素（例如div，ul，li等），我们希望其宽度占容器元素的...如果是body标签自己的块元素，不设置宽度，其实际宽度会随着浏览器宽度的变化而变化，这样就实现了元素适应浏览器的宽度。 例如融职教育首页的头部，就是一个适应网页宽度的容器。
领取专属 10元无门槛券
手把手带您无忧上云
