Flutter之SizedBox学习使用

最新推荐文章于 2024-05-25 09:44:59 发布

weixin_33716154

最新推荐文章于 2024-05-25 09:44:59 发布

阅读量1.3w

点赞数 1

文章标签：移动开发

原文链接：https://juejin.im/post/5c2723d9f265da611a47f137

版权

本文详细介绍了Flutter中的SizedBox控件，包括其不同构造方法如SizeBox(), SizeBox.expand(), SizeBox.fromSize(), FractionallySizedBox()等，以及它们在布局中的应用场景。SizedBox常用于限制子控件大小、设置间隔和控制相对位置。实践部分展示了如何利用SizedBox和random_pk库进行布局设计，并提供了代码示例和源码链接。" 100672764,8829506,JPA原生使用教程,"['JPA使用', 'ORM框架', '数据库操作', 'Java开发', '持久层']

摘要由CSDN通过智能技术生成

sizebox_learning

主要是学习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，就是可以代替padding和container，然后用来设置两个控件之间的间距，比如在行或列中就可以设置两个控件之间的间距主要是可以比使用一个padding或者container简单方便（在Flutter中可能用不同的控件可以实现到相同的目的，尽量使用越简单的widget来实现）

实践

在Column中构造不同的SizedBox。

这里我利用了random_pk库,这是一个可以生成随机颜色的Container,方便我观察控件的布局区域。

这个库我也经常在开发中使用，挺方便的一个库。

Column buildColumn() {
    return new Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        new SizedBox(
          width: 100,
          height: 100,
          child: new RandomContainer(
            child: new Text("指定height和width"),
          ),
        ),
        new SizedBox(
          width: 100,
          height: 100,
        ),
        new SizedBox(
          width: 100,
          child: new RandomContainer(
            child: new Text("指定width"),
          ),
        ),
        new SizedBox(
          height: 100,
          child: new RandomContainer(
            child: new Text("指定height"),
          ),
        ),
        new ConstrainedBox(
          constraints: BoxConstraints(minHeight: 50),
          child: new RandomContainer(
            child: new Text("ConstrainedBox,minHeight: 50"),
          ),
        ),

        new RandomContainer(
          width: 100,
          height: 100,
          child: new OverflowBox(
            maxWidth: 200,
            maxHeight: 200,
            child: new RandomContainer(
              width: 300,
              height: 200,
              child: new Text("OverflowBox"),
            ),
          ),
        ),

        new LimitedBox(
          maxHeight: 100,
          child: new RandomContainer(
            height: 200,
            width: double.infinity,
            child: new Text("LimitedBox"),
          ),
        )
      ],
    );
  }
复制代码

 /*
  一般的用法
  Sizebox会强制它的孩子的大小
   */
  buildSizebox() {
    return new RandomContainer(
      child: new SizedBox(
        width: 100,
        height: 100,
        child: new FlutterLogo(),
      ),
    );
  }

  /*
   * Sizebox.expand
   *会充满sizebox的父控件
   */
  RandomContainer buildSizeboxExpand() {
    return new RandomContainer(
        child: new SizedBox.expand(
      child: new FlutterLogo(),
    ));
  }

  /*
   * Sizebox的另外一种使用方法.
    参数是Size
   * 比如下面利用屏幕的size信息进行设置SizeBox的大小
   */