【Flutter】图片、内容、滚动空间溢出调整

空间超出提示

10年的陈仓网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整陈仓建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“陈仓网站设计”,“陈仓网站推广”以来，每个客户项目都认真落实执行。

注释 ：Flutter Incorrect use of ParentDataWidget

问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。

解决方案：保持： Expanded、Flexible 只在 Row、Column 等组件内，不在其他组件内使用。

控件Row有一个水平的布局方向，但是内容已经超出了可显示的范围。

建议我们使用有弹性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，还可以使用具体滚动属性的控件比如ListView代替

1、类似图片加载失败,然后溢出挤压空间，可以用Container包裹一下

直接使用，如果图片地址失效，就会溢出

直接使用,图片链接失效引起

2、类似这种超出

A RenderFlex overflowed by 48 pixels on the right.

3、类似这种Column滚动超出!

实现页面滑动需要用到SingleChildScrollView组件，SingleChildScrollView和Android中ScrollView类似

问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。

解决方案：保持：Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。

flutter中流式布局

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。栅栏系统（网格系统），用户标签等。在Flutter中主要有Wrap和Flow两种Widget实现。

在介绍Row和Colum时，如果子widget超出屏幕范围，则会报溢出错误，在Flutter中通过Wrap和Flow来支持流式布局，溢出部分则会自动折行。

上述有很多属性和Row的相同，其意义其实也是相同的，这里我就不一一介绍了，主要介绍下不同的属性：

我们一般很少会使用Flow，因为其过于复杂，需要自己实现子widget的位置转换，在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。Flow有如下优点：

我们对六个色块进行自定义流式布局：

实现TestFlowDelegate:

可以看到我们主要的任务就是实现paintChildren，它的主要任务是确定每个子widget位置。由于Flow不能自适应子widget的大小，我们通过在getSize返回一个固定大小来指定Flow的大小，实现起来还是比较麻烦的。

Flutter Row Column 布局溢出的问题

大家在学习Flutter的时候，刚刚开始学习布局应该会各种遇到溢出。比如在用到Row或者Column经常会遇到布局溢出的问题。

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.

This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

SingleChildScrollView和Expanded做为布局防止布局溢出

Flutter（5）：基础组件之Row/Column

Row：在水平方向上排列子widget的列表。

Column：在垂直方向上排列子widget的列表。

注意：这两个属于多子节点空间，可以将children排列成一行/一列，但是自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start。

其中MainAxisAlignment枚举值：

center：将children放置在主轴的中心；

end：将children放置在主轴的末尾；

spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；

spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；

spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；

start：将children放置在主轴的起点；

其中spaceAround、spaceBetween以及spaceEvenly的区别，就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。

MainAxisSize：在主轴方向占有空间的值，默认是max。

MainAxisSize的取值有两种：

max：根据传入的布局约束条件，最大化主轴方向的可用空间；

min：与max相反，是最小化主轴方向的可用空间；

CrossAxisAlignment：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。

CrossAxisAlignment枚举值有如下几种：

baseline：在交叉轴方向，使得children的baseline对齐；

center：children在交叉轴上居中展示；

end：children在交叉轴上末尾展示；

start：children在交叉轴上起点处展示；

stretch：让children填满交叉轴方向；

TextDirection：阿拉伯语系的兼容设置，一般无需处理。

VerticalDirection：定义了children摆放顺序，默认是down。

VerticalDirection枚举值有两种：

down：从top到bottom进行布局；

up：从bottom到top进行布局。

top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。

TextBaseline：使用的TextBaseline的方式，有两种，前面已经介绍过。

这个是Row/Column的内的小控件，可以用来实现权重的布局

这边使用一个Container，里面是Row，使用Expanded对子节点进行权重处理，如果不使用Expanded，直接放入其他控件也是可以的，只是无法设置权重

对于内容过长的时候，会有溢出提示：

MainAxisAlignment.center：将children放置在主轴的中心；

MainAxisAlignment.start：将children放置在主轴的起点；

MainAxisAlignment.end：将children放置在主轴的末尾；

MainAxisAlignment.spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；

MainAxisAlignment.spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；

MainAxisAlignment.spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；

下一章我们学习基础组件之Image

Flutter：Row中文字太长导致溢出

Text("long text...") 中文字过长会换行显示。

但如果放置在Row()中 Row(children:[Text("long text...")]) 文字就不会换行显示，还可能会报错某一侧长度溢出了多少像素。

这时给Text组件包裹一层Expanded就可以换行显示。

Row(children:[Expanded(child:Text("long text..."))])

或者用Flexible 也可以。

Row(children:[Flexible (child:Text("long text..."))])

Expanded/Flexible 会限制Row的宽度不要那么长。

本文标题：flutter溢出,flutter 回弹效果
分享网址：http://azwzsj.com/article/dsdpedi.html