Flutter-基础组件三

1）Container

常用属性：

2）Padding

作为一个基础的控件，功能非常单一，给子节点设置padding属性。

Padding的布局分为两种情况：

源码：

2）Align

Align的布局行为分为两种情况：

源码：

3）Center

Center继承自Align,，只不过是将alignment设置为Alignmentcenter，其他属性例如widthFactor、heightFactor，布局行为，都与Align完全一样。

源码：

4）FittedBox

布局行为分两种情况：

FittedBox会在自己的尺寸范围内缩放并且调整child位置，使得child适合其尺寸。

源码：

示例：

5）SizedBox

SizedBox布局行为：

源码：

示例：

1）Flex

d性布局允许子组件按照一定比例来分配父容器空间。Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现d性布局。

Expanded组件可以使Row、Column、Fiex等子组件在其主轴上方向展开并填充可用的空间。

源码：

示例：

2）Row、Column

将children排列成一行或者一列，自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

源码：

Flex的构造函数就比Row和Column的多了一个参数。Row跟Column的区别，正是这个direction参数的不同。当为Axishorizontal的时候，则是Row，当为Axisvertical的时候，则是Column。

示例：

3）Stack

Stack可以类比web中的absolute，绝对布局。对于绘制child的顺序，则是第一个child被绘制在最底端，后面的依次在前一个child的上面，类似于web中的z-index。如果想调整显示的顺序，则可以通过摆放child的顺序来进行。

源码：

Positioned:

源码：

left、top 、right、bottom分别代表离Stack左、上、右、底四边的距离。

示例：

Stateful（有状态） 和 stateless（无状态） widgets

stateless widget 没有内部状态 Icon、 IconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类。

stateful widget 是动态的 用户可以和其交互 (例如输入一个表单、 或者移动一个slider滑块),或者可以随时间改变 (也许是数据改变导致的UI更新) Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他们都是 StatefulWidget的子类。

StatefulWidget类

具有可变状态的小部件。

状态是（1）在构建窗口小部件时可以同步读取的信息，以及（2）在窗口小部件的生命周期内可能会更改的信息。这是小工具实施者的责任，以确保国家的及时通知当这种状态的改变，使用StatesetState。

有状态窗口小部件是一个窗口小部件，它通过构建一个更具体地描述用户界面的其他窗口小部件来描述用户界面的一部分。构建过程以递归方式继续，直到用户界面的描述完全具体（例如，完全由RenderObjectWidget组成，其描述具体的RenderObject）。

当您描述的用户界面部分可以动态更改时（例如由于具有内部时钟驱动状态或依赖于某些系统状态），状态窗口小部件非常有用。对于仅依赖于对象本身中的配置信息以及窗口小部件膨胀的 BuildContext的组合，请考虑使用 StatelessWidget。

StatefulWidget实例本身是不可变的，并且将它们的可变状态存储在由createState方法创建的单独State对象中 ，或者存储在State订阅的对象中，例如Stream或ChangeNotifier对象，其引用存储在StatefulWidget的最终字段中本身。

框架在膨胀StatefulWidget时 调用createState，这意味着如果该窗口小部件已插入到多个位置的树中，则多个State对象可能与同一StatefulWidget关联。同样，如果StatefulWidget从树中移除，后来在树再次插入时，框架将调用createState再创建一个新的国家目标，简化的生命周期状态的对象。

如果StatefulWidget的创建者使用GlobalKey作为其 键，则StatefulWidget在从树中的一个位置移动到另一个位置时保持相同的State对象。由于具有GlobalKey的窗口小部件可以在树中的至多一个位置使用，因此使用GlobalKey的窗口小部件最多只有一个关联元素。当通过将与该窗口小部件关联的（唯一）子树从旧位置移植到新位置（而不是在该位置重新创建子树）时，框架利用此属性将全局键从树中的一个位置移动到另一个位置时利用此属性。新的位置）。与StatefulWidget关联的State对象与子树的其余部分一起被移植，这意味着State对象在新位置被重用（而不是被重新创建）。但是，为了有资格进行嫁接，必须将窗口小部件插入到从旧位置移除它的同一动画帧中的新位置。

StatefulWidget有两个主要类别。

首先是其中一个分配资源StateinitState并在他们的处置Statedispose，但不依赖于InheritedWidget S或致电StatesetState。这些小部件通常在应用程序或页面的根目录中使用，并通过ChangeNotifier， Stream或其他此类对象与子小部件进行通信。遵循这种模式的有状态小部件相对便宜（就CPU和GPU周期而言），因为它们构建一次然后永不更新。因此，它们可能有一些复杂和深刻的构建方法。

第二类是使用StatesetState或依赖于 InheritedWidget的小部件。这些通常会在应用程序的生命周期内重建多次，因此最小化重建此类窗口小部件的影响非常重要。（他们也可以使用StateinitState或 StatedidChangeDependencies并分配资源，但重要的是他们重建。）

可以使用几种技术来最小化重建有状态窗口小部件的影响：

StatelessWidget类

一个不需要可变状态的小部件。

无状态窗口小部件是一个窗口小部件，它通过构建一个更具体地描述用户界面的其他窗口小部件来描述用户界面的一部分。构建过程以递归方式继续，直到用户界面的描述完全具体（例如，完全由RenderObjectWidget组成，其描述具体的RenderObject）。

当您描述的用户界面部分不依赖于对象本身的配置信息以及窗口小部件膨胀的BuildContext时，无状态窗口小部件非常有用。对于可以动态更改的组合，例如由于具有内部时钟驱动状态或依赖于某些系统状态，请考虑使用StatefulWidget。

无状态窗口小部件的构建方法通常仅在以下三种情况下调用：第一次将窗口小部件插入树中，窗口小部件的父窗口更改其配置时，以及何时依赖于更改的InheritedWidget。

如果窗口小部件的父级将定期更改窗口小部件的配置，或者它依赖于经常更改的继承窗口小部件，则优化构建方法的性能以保持流畅的呈现性能非常重要。

可以使用几种技术来最小化重建无状态窗口小部件的影响：

下面这种情况下，为 InkWell 设置的 splashColor 不会生效：

需要用 Material 去除背景色，然后将颜色设置在 InkWell 外部：

在 Dialog builder 中使用 WillPopScope 禁用返回键返回：

注意：使用此方法同时也会禁用 iOS 上的手势滑动返回功能，推荐判断平台后再使用。

修改对话框中的复选框状态，最简便的方法是通过 Element 中的 markNeedsBuild 方法：

当然，更推荐的做法是通过 StatefulBuilder ，然后就可以在 Dialog 中调用 setState 方法了，不过在调用 setState 时需要判断 Dialog 是否已经关闭，否则会造成 setState() called after dispose() 的错误，可以通过添加一个标志位来解决，如下：

在 Web 中加载网络有时会失败，遇到这样的报错： Exception caught by image resource service ，造成该错误的原因通常是，跨域了（见 跨域资源共享 ）。最简单的解决办法是， 使用 HTML 渲染加载 ，而不是默认的 CanvasKit。

Flutter 中所有的 list 默认都是没有 ScrollBar 的，必须使用 ScrollBar 组件。ScrollBar 组件通过监听 ScrollView 的 ScrollNotification 来刷新位置，所以 List 的长度必须是固定的。

当使用 WebView 等高度不定的组件时会出现内容被截断的情况，通常可以使用 NestedScrollView 来解决该问题，需要在 WebView 外部嵌套 SingleChildScrollView。

虽然使用了缓存，而且也是用 builder 加载的，但是发现一个现象：滑动屏幕后短暂消失并重新加载了。高度很高时这种现象更加明显，其原因是超出屏幕范围一定距离的组件被重新渲染了。解决方法是在 ListView 上设置 cacheExtent 参数:

该参数的作用是改变超出屏幕高度后继续渲染的范围（以像素为单位），比如设置成 9999 后意味着超出屏幕 10000 像素以内的内容都会被保留下来。

借助 IntrinsicHeight 组件：

另外，IntrinsicHeight 还可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 显示内在元素的高度 ，从而避免元素因为约束的存在而不显示或者高度太高（比如在使用了 Column 或者 Row 的时候）。

在通过 Uri 的 queryParameters 获取 query 参数时，发现有些链接会抛出下面异常：

造成该异常的原因是 Uri 默认使用 utf-8 解码超链接字符串，如果链接中包含非 utf-8 字符，就会造成上面的错误，相关 issue 见： issue #31621 。目前该 issue 处于 open 的状态，暂时的解决办法是，在所有使用到 queryParameter 的地方用 trycatch 捕捉可能抛出的异常。

Flutter 开发非常依赖各种官方或第三方的插件，而在使用这些插件时多少都会遇到一些问题，大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。

目前该库没有加载完成的回调（见 issue #545 ），不过我们可以通过在 imageBuilder 中来添加回调：

这是一个应用内更新插件，安卓 10 以上安装时需要在 manifest 中添加以下内容：

目前功能最强大的 WebView 插件，基本能满足绝大部分移动端网页加载的需求，而且可定制化程度高。

一般通过 CookieManager 修改 Cookie，拦截请求并修改请求对象的 Header 不会生效。

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平台设置 InAppWebViewOptions ，而且需要注意，由于设置 userAgent 后会覆盖默认的 UserAgent，所以如果需要在默认的 UserAgent 上添加其它参数，iOS 上需要通过 InAppWebViewControllergetDefaultUserAgent() 获取默认 UserAgent 参数，而 Android 不需要添加。

如果源或者请求是 >

Flutter中控件的高宽和字体大小时，使用的是逻辑像素，并非是实际的物理像素。

flutter中的屏幕适配

假设设计图的大小为1080 1920，上面一个的高度为 80 90，则它在设备上的高宽为

对于android手机，一般以宽度为基准计算UI的高宽，因为android手机的宽度一般就是750，1080等几个尺寸，但是高的尺寸就有很多。

推荐一个别人封装好的一个用于屏幕适配的库

Flutter屏幕适配方案插件-完美解决屏幕适配

以上就是关于Flutter-基础组件三全部的内容，包括:Flutter-基础组件三、Flutter_定义控件StatefulWidgets和StatelessWidget、Flutter 开发笔记等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！