Flutter Widget(2):单节点Widget

1.Padding

Padding作为基础控件,功能非常单一,给子节点设置padding属性。Flutter中并没有单独的Margin控件,在Container中有margin属性,实质上也是由Padding实现的。

 const Padding({
    Key key,
    @required this.padding,
    Widget child,
  }) : assert(padding != null),
       super(key: key, child: child);
  • padding:padding的类型为EdgeInsetsGeometry,EdgeInsetsGeometry是EdgeInsets以及EdgeInsetsDirectional的基类,一般都是使用EdgeInsets。

使用场景
如果在单一的间距场景,使用Padding比Container的成本要小一些,毕竟Container里面包含了多个widget。Padding能够实现的,Container都能够实现,只不过Container更加的复杂。

2.Align

设置child的对齐方式,例如居中、居左居右等,并根据child尺寸调节自身尺寸。Container中的align属性,也是使用Align去实现的。它能够实现的功能,Container都能实现。

 Align(
      alignment: Alignment.bottomRight,
      widthFactor: 5.0,
      heightFactor: 5.0,
      child: new Text("Align"),
)
  • alignment:对齐方式
  • widthFactor:宽度因子,如果设置的话,Align的宽度就是child的宽度乘以这个值,不能为负数。
  • heightFactor:高度因子,如果设置的话,Align的高度就是child的高度乘以这个值,不能为负数。

3.Center

Center继承自Align,只是将alignment设置为Alignment.center,其他属性和逻辑都与Align完全一样

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
        body: Container(
          child: Center(
            widthFactor: 5.0,
            heightFactor: 5.0,
            child: new Text("Align"),
          ),
        ),

4.FittedBox

FittedBox在自己的尺寸范围内缩放并且调整child的位置,与ImageView的ScaleType类似

  • 如果外部有约束的话,按照外部约束调整自身尺寸,然后缩放调整child,按照指定的条件进行布局;
  • 如果没有外部约束条件,则跟child尺寸一致,指定的缩放以及位置属性将不起作用。
          new Container(
            color: Colors.amberAccent,
            width: 300.0,
            height: 300.0,
            child: new FittedBox(
              fit: BoxFit.fill,
              alignment: Alignment.topLeft,
              child: new Container(
                color: Colors.red,
                child: new Text("FittedBox"),
              ),
            ),
          )

5.AspectRatio

AspectRatiode 的作用是调整child的宽高比,AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展,widget的高度是由宽度和比率决定的,类似于BoxFit中的contain,按照固定比率去尽量占满区域。

  • aspectRatio:宽与高的比例
          new Container(
            width: 360.0,
            child: new AspectRatio(
              aspectRatio:1.5,
              child: new Container(
                color: Colors.grey,
              ),
            ),
          )

6.ConstrainedBox

给child添加额外的约束条件,例如设置最小宽高,尽可能的占用区域等等

const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity //最大值,尽可能占用区域
  });

7.UnconstrainedBox

不添加任何约束条件到child上,让child按照其原始的尺寸渲染。

8.BaseLine

根据child的baseline,来调整child的位置,比如让多个大小不一的Widget在同一水平线上

  • 如果child有baseline,则根据child的baseline属性,调整child的位置;
  • 如果child没有baseline,则根据child的bottom,来调整child的位置。
  • baseline:baseline数值,必须要有,从顶部算。
  • baselineType:bseline类型,也是必须要有的,目前有两种类型:
    • alphabetic:对齐字符底部的水平线;
    • ideographic:对齐表意字符的水平线。
          new Row(
            children: [
              new Baseline(
                baseline: 100.0,
                baselineType: TextBaseline.alphabetic,
                child: new Text(
                  'TjTjTj',
                  style: new TextStyle(
                    fontSize: 20.0,
                    textBaseline: TextBaseline.alphabetic,
                  ),
                ),
              ),
              new Baseline(
                baseline:100.0,
                baselineType: TextBaseline.alphabetic,
                child: new Container(
                  width: 30.0,
                  height: 30.0,
                  color: Colors.grey,
                ),
              ),
              new Baseline(
                baseline: 100.0,
                baselineType: TextBaseline.alphabetic,
                child: new Text(
                  'RyRyRy',
                  style: new TextStyle(
                    fontSize: 35.0,
                    textBaseline: TextBaseline.alphabetic,
                  ),
                ),
              ),
            ],
          )

9.FractionallySizedBox

FractionallySizedBox控件会根据现有空间,来调整child的尺寸,child就算设置了具体的尺寸数值,也不起作用。

  • alignment:对齐方式,不能为null。
  • widthFactor:宽度因子
  • heightFactor:高度因子

当设置了具体的宽高因子,具体的宽高则根据现有空间宽高 * 因子,有可能会超出父控件的范围,当宽高因子大于1的时候;当没有设置宽高因子,则填满可用区域;

          new Container(
            color: Colors.blue,
            height: 200.0,
            width: 200.0,
            child: new FractionallySizedBox(
              alignment: Alignment.bottomLeft,
              widthFactor: 1.5,
              heightFactor: 0.5,
              child: new Container(
                color: Colors.red,
              ),
            ),
          )

10.IntrinsicHeight 和 IntrinsicWidth

这个控件的作用,是将可能高度宽度不受限制的child,调整到一个合适并且合理的尺寸,会存在效率问题,能别使用就尽量别使用。

11.LimitedBox

限定的最大高度或宽度,默认值是double.infinity,不能为负数。

    LimitedBox(
      maxWidth: 150.0,
      child: Container(
        color: Colors.blue,
        width: 250.0,
      ),
    ),

12.Offstage

一个布局widget,可以控制其子widget的显示和隐藏

  • 当offstage为true,当前控件不会被绘制在屏幕上,不会响应点击事件,也不会占用空间;
  • 当offstage为false,当前控件则跟平常用的控件一样渲染绘制
  new Offstage(
      offstage: false,
      child: Container(color: Colors.blue, height: 100.0),
    ),

13.OverflowBox

OverflowBox这个控件,允许child超出parent的范围显示

  • alignment:对齐方式。
  • minWidth:允许child的最小宽度。如果child宽度小于这个值,则按照最小宽度进行显示。
  • maxWidth:允许child的最大宽度。如果child宽度大于这个值,则按照最大宽度进行展示。
  • minHeight:允许child的最小高度。如果child高度小于这个值,则按照最小高度进行显示。
  • maxHeight:允许child的最大高度。如果child高度大于这个值,则按照最大高度进行展示。
Container(
            color: Colors.green,
            width: 100.0,
            height: 100.0,
            padding: const EdgeInsets.all(5.0),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 200.0,
              maxHeight: 400.0,
              child: Container(
                color: Color(0x33FFFFFF),
                width: 300.0,
                height: 300.0,
              ),
            ),
          )),

14.SizedBox

一个特定大小的盒子。这个widget强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL,则此widget将调整自身大小以匹配该维度中的孩子的大小。

  • child不为null时,如果设置了宽高,则会强制把child尺寸调到此宽高;如果没有设置宽高,则会根据child尺寸进行调整;
  • child为null时,如果设置了宽高,则自身尺寸调整到此宽高值,如果没设置,则尺寸为0;
        Container(
            color: Colors.green,
            padding: const EdgeInsets.all(5.0),
            child: SizedBox(
              width: 200.0,
              height: 200.0,
              child: Container(
                color: Colors.red,
                width: 100.0,
                height: 300.0,
              ),
            ),
          )

15.SizedOverflowBox

一个具有特定大小的小部件,但将其原始约束传递给其子级,这可能会溢出。

  • 尺寸部分。通过将自身的固定尺寸,传递给child,来达到控制child尺寸的目的;
  • 超出部分。可以突破父节点尺寸的限制,超出部分也可以被渲染显示,与OverflowBox类似。

16.Transform

在绘制子widget之前应用转换的widget,平移、旋转、缩放都可以使用的到。如果只是单纯的进行变换的话,用Transform比用Container效率会更高。

const Transform({
  Key key,
  @required this.transform,
  this.origin,
  this.alignment,
  this.transformHitTests = true,
  Widget child,
})
  • transform:一个4x4的矩阵。
  • origin:旋转点,相对于左上角顶点的偏移。默认旋转点是左上角顶点。
  • alignment:相对于坐标系原点的对齐方式
  • transformHitTests:点击区域是否也做相应的改变。

另外三种构造函数

  • Transform.rotate:可以对子widget进行旋转变换
  • Transform.translate:接收一个offset参数,可以在绘制时沿x、y轴对子widget平移指定的距离。
  • Transform.scale:可以对子Widget进行缩小或放大

17.CustomSingleChildLayout

一个自定义的拥有单个子widget的布局widget,我们自定义一些单节点布局控件的时候,可以考虑使用它。

CustomSingleChildLayout提供了一个控制child布局的delegate,这个delegate可以控制这些因素:

  • 可以控制child的布局constraints;
  • 可以控制child的位置;
  • 在parent的尺寸不依赖于child的情况下,可以决定parent的尺寸。

你可能感兴趣的:(Flutter Widget(2):单节点Widget)