[toc]

Widget

在 Flutter 中 Everything's a Widget。

啥都别说先莽一遍，在Flutter中构建布局

可视化调试

Flutter 开发中没有实时预览，刚上手编写 UI 界面时对组件的大小或位置不好把握。这个时候开启可视化调试为组件加上标注，可以更好的学习和[图片上传失败...(image-41ff07-1564558939474)][图片上传失败...(image-3fab06-1564558949839)]

理解组件的使用。

在 main() 方法中加入 debugPaintSizeEnabled = true; 并导入 rendering.dart 然后启动程序。

所有的盒子都会得到一个明亮的深青色边框，padding（来自widget如Padding）显示为浅蓝色，子widget周围有一个深蓝色框， 对齐方式（来自widget如Center和Align）显示为黄色箭头. 空白（如没有任何子节点的Container）以灰色显示

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

其他参数：

• debugPaintBaselinesEnabled:对于具有基线的对象，文字基线以绿色显示，表意(ideographic)基线以橙色显示
• debugPaintPointersEnabled：该标志打开一个特殊模式，任何正在点击的对象都会以深青色突出显示。 这可以帮助您确定某个对象是否以某种不正确地方式进行hit测试（Flutter检测点击的位置是否有能响应用户操作的widget）,例如，如果它实际上超出了其父项的范围，首先不会考虑通过hit测试
• debugPaintLayerBordersEnabled：该标志用橙色或轮廓线标出每个层的边界
• debugRepaintRainbowEnabled： 只要合成图层重绘时，这会使该层被一组旋转色所覆盖

参考 https://flutterchina.club/debugging/ 调试应用

布局 Widget

布局 Widget 就是 Flutter 中的容器，类似 Android 中的 layout（ViewGroup）。 Flutter 中布局 Widget 可以分为三类：

• 拥有单个子元素的布局 widget

• 拥有多个子元素的布局 widget

• Layout helpers

拥有单个子元素的布局 widget

官方文档中拥有单个子元素的布局 widget 如下表。

Widget	作用
Container	一个拥有绘制、定位、调整大小的 widget
Padding	会给其子 widget 添加指定的填充
Center	将其子 widget 居中显示在自身内部的 widget
Align	它可以将其子 widget 对齐，并可以根据子 widget 的大小自动调整大小
FittedBox	按自己的大小调整其子 widget 的大小和位置
AspectRatio	试图将子 widget 的大小指定为某个特定的长宽比
ConstrainedBox	对其子项施加附加约束的 widget
Baseline	根据子项的基线对它们的位置进行定位的 widget
FractionallySizedBox	把它的子项放在可用空间的一小部分
IntrinsicHeight	将它的子 widget 的高度调整其本身实际的高度
IntrinsicWidth	它的子 widget 的宽度调整其本身实际的宽度
LimitedBox	当其自身不受约束时才限制其大小的盒子
Offstage	可以控制其子 widget 的显示和隐藏
OverflowBox	对其子项施加不同约束的 widget，它可能允许子项溢出父级
SizedBox	一个特定大小的盒子。这个 widget 强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL，则此 widget 将调整自身大小以匹配该维度中的孩子的大小
SizedOverflowBox	一个特定大小的 widget，但是会将它的原始约束传递给它的孩子，它可能会溢出
Transform	在绘制子 widget 之前应用转换的 widget
CustomSingleChildLayout	一个自定义的拥有单个子 widget 的布局 widget

拥有多个子元素的布局 widget

Widget	作用
Row	在水平方向上排列子widget的列表
Column	在垂直方向上排列子widget的列表
Stack	可以允许其子widget简单的堆叠在一起
IndexedStack	从一个子widget列表中显示单个孩子的Stack
Flow	一个实现流式布局算法的widget
Table	为其子widget使用表格布局算法的widget
Wrap	可以在水平或垂直方向多行显示其子widget
ListBody	一个widget，它沿着一个给定的轴，顺序排列它的子元素
ListView	可滚动的列表控件。ListView是最常用的滚动widget，它在滚动方向上一个接一个地显示它的孩子。在纵轴上，孩子们被要求填充ListView
CustomMultiChildLayout	使用一个委托来对多个孩子进行设置大小和定位的小部件

Layout helpers

LayoutBuilder 构建一个可以依赖父窗口大小的widget树

参考 https://flutterchina.club/widgets/layout/