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

空间超出提示

成都创新互联公司专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，联通服务器托管，联通服务器托管，成都多线服务器托管等服务器托管服务。

注释 ：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了解之可滑动组件

Flutter官方并没有对Widget进行官方分类，对其分类主要是为了对Widget进行功能区分。

当组件内容超过当前显示窗口时，如果没有特殊处理，Flutter则会提示Overflow错误。为此，Flutter提供了多种可滚动组件用于显示列表和长布局。

在可滚动组件的坐标描述中，通常将滚动方向称为主轴，非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理。

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！为此，Flutter中提出一个Sliver（中文为“薄片”的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个“薄片”（Sliver），只有当Sliver出现在视口中时才会去构建它，这种模型也称为“基于Sliver的延迟构建模型”。

可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView。

在很多布局系统中都有ViewPort的概念，在Flutter中，术语ViewPort（视口），如无特别说明，则是指一个Widget的实际显示区域。例如: 一个ListView的显示区域高度是800像素，虽然其列表项总高度可能远远超过800像素，但是其ViewPort仍然是800像素。

可滚动组件都直接或间接包含一个Scrollable组件

如果要给可滚动组件添加滚动条，只需将Scrollbar作为可滚动组件的任意一个父级组件。

沿一个方向线性排布所有子组件。支持基于Sliver的延迟构建模型。

ListView高度边界无法确定时会异常。

默认构造函数有一个children参数，它接受一个Widget列表。

实际上通过此方式创建的ListView和使用SingleChildScrollView+Column的方式没有本质的区别。

适合只有少量的子组件的情况，因为这种方式需要将所有children都提前创建好（这需要做大量工作），而不是等到子widget真正显示的时候再创建，也就是说通过默认构造函数构建的ListView没有应用基于Sliver的懒加载模型。

例

例

例（水平滚动）

适合列表项比较多（或者无限）的情况，因为只有当子组件真正显示的时候才会被创建，也就说通过该构造函数创建的ListView是支持基于Sliver的懒加载模型的。

例

例

例（不同类型的item）

ListView.separated可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割组件生成器。

例

例

类似于Android中的ScrollView，它只能接收一个子组件。

通常内容不会超过屏幕太多时使用SingleChildScrollView，这是因为它不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。

例（将大写字母A-Z沿垂直方向显示）

一个二维网格列表

GridView和ListView的大多数参数都是相同的。

横轴为固定数量子元素。

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount。

例

例（GridView.count）

该子类实现了一个横轴子元素为固定最大长度的layout算法

例

当子widget比较多时，可以通过GridView.builder来动态创建子widget。

GridView.builder 必须指定的参数有两个，其中itemBuilder为子widget构建器。

例

举个例子，假设有一个页面，顶部需要一个GridView，底部需要一个ListView，而要求整个页面的滑动效果是统一的，即它们看起来是一个整体。如果使用GridView+ListView来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的。

所以这时就需要一个"胶水"，把这些彼此独立的可滚动组件"粘"起来，而CustomScrollView的功能就相当于“胶水”。

Sliver有细片、薄片之意，在Flutter中Sliver通常指可滚动组件子元素。在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了，如果直接将ListView、GridView作为CustomScrollView是不行的，因为它们本身是可滚动组件而并不是Sliver。

因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。

实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型 ，也正因如此，CustomScrollView才可以将多个Sliver"粘"在一起，这些Sliver共用CustomScrollView的Scrollable，所以最终才实现了统一的滑动效果。

例（SliverList）

例（SliverGrid）

可以用ScrollController来控制可滚动组件的滚动位置

例

滚动位置恢复

ScrollPosition

ScrollController控制原理

滚动监听

例

完美解决flutter 键盘遮挡/超出(overflow）的坑

一个正常的app,一般都会有登录,注册,密码修改等基本功能界面,如上图的界面再正常不过了吧.这里面就会遇到键盘超出的坑

oh ~~

说实话,我也在网上找了一些解决键盘超出,覆盖的方法,大概有2种方法

在Scaffold里面添加属性resizeToAvoidBottomPadding,设置为false.就是内容不会随键盘弹出而滚动

在有textField的外面包裹一层SingleChildScrollView,这样内容就会随键盘弹出而滚动

前面2个方法基本可以解决大部分的坑了,但有一种坑还是解决不了,就是像开篇那样的效果,上面有textField,底部有提交按钮,你就会发现有各种bug在里面, 最终的解决方案用到了一个第三方库

包裹一层KeyboardAvoider,并且设置属性autoScroll: true,这样就可以完美解决问题,看最终效果图

分享题目：flutter超出滑动,flutter禁止滑动返回
链接地址：http://chengdu.cdxwcx.cn/article/dsgpode.html