Flutter快速上手10：高级布局之网格 GridView

用于创建二维网格列表。

为企业提供网站设计制作、成都网站制作、网站优化、营销型网站、竞价托管、品牌运营等营销获客服务。创新互联拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

GridView.count 是在交叉轴上创建固定个数的网格，crossAxisCount为必须的属性，表示交叉轴网格的个数，而GridView.extent是在交叉轴上创建最大可容纳的网格，maxCrossAxisExtent是必须的属性，表示交叉轴上网格的最大的宽度。

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2

我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~

Flutter踩坑之旅

记录下自己踩过的坑,怕忘了

一.TextField:

1.去掉输入数字的计数:decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉获取和失去焦点时边框改变颜色的效果:decoration内border: InputBorder.none,

3.去边框时设置BorderSide的width为0或color: Colors.transparent后依然存在边框时,需要设置为borderSide: BorderSide.none

4.设置背景色需要在decoration内     filled:true,   fillColor: Colors.blue同时设置才会显示

二.Uint8List类型和string类型,Listint的转换

连续两次base64解码时,参数只能使用string类型,但是base64解码后是Uint8List类型,此时需要将Uint8List类型转换为string类型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint转Uint8List:读取接口时获取的数据是Listint的图片数据,想显示时需要转成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.报错:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

这是因为dio请求返回的数据默认是以json的格式读取的,而返回的数据是密文形式,需要修改dio的Options的responseType为ResponseType.PLAIN,这样返回的数据就以字符串形式处理.

四.去掉点击控件背景出现的水波纹效果,即去掉md的效果:

在main.dart的MaterialApp内的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局设置占满全屏却无效的问题

使用Scaffold的body的布局默认是沉浸式的,将状态栏一起包含了,可以通过在body后添加一层SafeArea即可.

布局设置double.infinity占满全屏高度却无效,大部分情况都是因为某一级的父布局的高度已经有了限制,所以设置充满屏幕只会充满父布局,有些widget默认是按内容填充类似wrap_content就会导致写布局的过程中自己没有限制高度但最后的布局不是自己想要的,可以给各个父布局设置不同背景颜色来查看是从哪儿开始被限制了高度来排查问题.

六.占满剩余空间,类似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator设置进度值的颜色为单一颜色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.给LinearProgressIndicator设置圆角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多层column且内容的高度都不确定需要占满剩余空间,需要每层的column的内容都嵌套一层expanded来申明每层都占满剩余的空间,否则最里面的内容层需要指定高度,不然会报错

九.Container设置最小/大宽度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑动的widget嵌套:

1.解决滑动冲突:内层嵌套的滑动widget设置physics:NeverScrollableScrollPhysics()

2.解决滑动嵌套ui显示不出来或者报错,内层的滑动widget设置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓运行报错Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties内添加android.enableJetifier=true和android.useAndroidX=true并点击右上角的open for editing in android studio,运行成功后就可以了

十二.使用textfield时的文字ui总是很高

使用了maxlength且只是在textfield的InputDecoration设置counterStyle的颜色为透明使下面的计数文字消失会导致文字ui很高,counter的计数文字只是颜色是透明但依然在布局中占了位置所以导致文字很高,直接使用counterText:""即可

十三.使用ListView报错Vertical viewport was given unbounded height

需要将ListView放入Expanded内部

double.infinity 到底有啥用？

做 Android 的朋友都知道，在 Android 中，限定子元素大小的方法有三种，分别是 match_parent 、 wrap_content 、 fixed size 。如果使用 ConstraintLayout，还会有 match_constraint 。

这些值被设置到子元素的 layout_width 和 layout_height，由父元素解析生成 LayoutParams 设置给子元素，并在父元素的 measure 过程中使用它们以及父元素得到的 measureSpec 来确定子元素的大小。虽然子元素的大小最终由父元素决定，但父元素几乎不会违背子元素对自身大小的期望。因此你可以认为在 Android 中子元素的大小可以由子元素自己决定 。子元素想要什么大小，给自身的 layout_width 和 layout_height 指定不同的值即可。

而在 Flutter 中，就完全不一样了。Flutter 积极组合的设计，希望一切布局都尽量通过组合的方式来实现。组合优于继承这是真理，但 Flutter 却走向了极端。连指定子元素的大小、padding、margin、translate、background 等等都需要通过嵌套来实现，这就是导致嵌套地狱的根源。

以指定子元素的大小为例，你需要给子元素套一层 SizedBox，通过它来限定子元素的大小。基于此，你可以理解为在一般情况下， Flutter 中子元素的大小无法由子元素自己决定，始终由其父元素决定 ，这和 Android 有本质的区别。

Flutter 也没有提供 match_parent 来让子元素撑满父元素， wrap_content 来让子元素内容有多大就撑多大。但是它提供了 double.infinity。我们一般使用它来让子元素撑满父元素。但其实 double.infinity 也用来表示 wrap_content 。这得从 Flutter 的布局过程说起。

Flutter 的布局过程总结起来就三句话：

这里有一个很重要的点是， 子元素的大小永远不能违背父元素的约束 ，否则就会抛异常。子元素为自身的 size 赋值时，会触发以下检测：

为了避免这个异常，子元素在设置自身 size 之前，会先尝试满足父元素的约束：

这样就能保证设置的 size 永远满足父元素的约束，不引发异常。

当你使用 double.infinity 尝试撑满父元素时，这里的 contentWidth 值为 double.infinity，但 constraints.constrainWidth 会返回父元素的宽度，这就起到了 match_parent 的作用。这里的隐含意思是子元素的大小不可能真的为无限大，因为没有任何一个 UI 框架能渲染无限大的东西，因为那意味着无限大的资源消耗。

wrap_content 又是咋回事呢？其实也是同样的道理。

当父元素对子元素没有大小要求时，会向子元素传递宽松约束，即只限制最大的大小，一般为父元素的大小。意思是子元素想要多大就给多大，但不能超过自身大小。但有些 Widget 就没有这个限制，它们允许子元素的大小超过自己的大小，因此它们给子元素传递的最大大小为 double.infinity。但子元素测量自己时，发现父元素给的最大大小为 double.infinity，不可能真的将自身大小设置为 double.infinity，因为 Flutter 没法渲染无限大的东西。如果你尝试着这么做，同样会抛异常。所以一般情况下，子元素会直接将 double.infinity 当作 wrap_content 处理，向父元素反馈自己的内容大小。

所以总结下来就是：

当然一切的原因都在于 Flutter 设计之初没有考虑像 Android 那样用 -1 来表示 match_parent ，-2 来表示 wrap_content 。如果这么做的话，就没有 double.infinity 什么事了。

多数时候你都可以使用 double.infinity 来达到 match_parent 的效果，但也不总是这样。你永远如法用它来自下而上的达到 wrap_content 的效果。因为它只能自上而下。真想让子元素自身大小为 wrap_content ，那就结合支持 wrap_content 的 Widget 比如 Center 使用吧。或者使用 Flutter ConstraintLayout 。它自带了 matchParent 、 wrapContent 、 fixedSize 、 matchConstraint 的支持。

当前名称：flutter宽度撑满,flutter 包大小
网页URL：http://myzitong.com/article/dsddijh.html