Flutter学习日记-布局

我嘞giaogiao
612 阅读3分钟

1.SizeBox 固定尺寸

  • 一般的SizeBox()构造方法:传width、height、child,SizedBox会强制设置它的孩子的宽度或者高度为指定值
  • SizeBox.expand():可以使SizedBox的大小充满parent的布局，相当于设置了SizedBox的宽度和高度为double.infinity(无穷大)。
  • SizeBox.fromSize():创建一个指定Size的SizedBox
  • FractionallySizedBox():可以用百分比来控制sizebox的大小。widthFactor，heightFactor参数就是相对于父控件的比例。 alignment：可以设置sizebox在父控件里面的相对位置。
  • SizedOverflowBox():通过设置Size，允许它的child控件，溢出它的父控件，进行绘制，不会报OverFlow的错误。
  • OverflowBox()：通过设置最大最小的宽高，OverflowBox允许它的child控件，溢出它的父控件，进行绘制，不会报OverFlow的错误。
  • LimtedBox():一个可以限制子控件的最大宽高的控件，child只能在这区域内进行绘制

SizeBox使用场景：

  • 一般是用来限制孩子控件的大小。

  • 还有这么一种场景也可以使用SizeBox，就是可以代替padding和container，然后 用来设置两个控件之间的间距，比如在行或列中就可以设置两个控件之间的间距 主要是可以比使用一个padding或者container简单方便 （在Flutter中可能用不同的控件可以实现到相同的目的，尽量使用越简单的widget来实现）

2.Alignment(x,y) 指定位置:

比如：

static const Alignment center = Alignment(0.0, 0.0);

static const Alignment centerRight = Alignment(1.0, 0.0);

..

这是系统默认几种情况，我们可以实际情况，自定义Alignment(x,y)值

3.Stack -Positioned

Stack({
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})
  • alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
  • textDirection：和Row、Wrap的textDirection功能一样，都用于决定alignment对齐的参考系即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。
  • fit：此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小(默认值)，StackFit.expand表示扩伸到Stack的大小。
  • overflow：此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时（默认值），超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

Positioned：

const Positioned({
  Key key,
  this.left, 
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。width和height用于指定定位元素的宽度和高度，注意，此处的width、height 和其它地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位widget，举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理。

4.AspectRatio

aspectRatio:16:9,以子部件最大的宽，根据设置的宽高比来调整子部件的高度

5.ConstrainedBox-带限制的盒子

constraints:BoxConstraints

new ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 100.0,
    minHeight: 100.0,
    maxWidth: 150.0,
    maxHeight: 150.0,
  ),
  child: new Container(
    width: 200.0,
    height: 200.0,
    color: Colors.red,
  ),
);

在一个宽高200.0的Container上添加一个约束最大最小宽高的ConstrainedBox，实际的显示中，则是一个宽高为150.0的区域。

布局还有：

Container之前学习日记中有记录，就不赘述了

Flutter学习日记Remix

Padding

在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

太多了，还有部分没有记录，不常用的就不加进来了，容易晕

作为iOS开发者，还是iOS的约束布局方式香，虽然安卓布局也逐渐跟上来了，还是略逊一筹

flutter这个布局容器盒子什么的，还得慢慢来

默念：flutter 一切皆widget

                   路漫漫其修远兮，吾将上下而求索
                        ——致程序员逝去的青春
avatar
文章
阅读
粉丝