Flutter（57）：Layout组件之SizedOverflowBox

Flutter教学目录持续更新中

Github源代码持续更新中

1.SizedOverflowBox介绍

一个特定大小的widget，但是会将它的原始约束传递给子控件，它可能会溢出。

2.SizedOverflowBox属性

• size：
• alignment = Alignment.center：
• child：

3.Alignment

• Alignment.topLeft = Alignment(-1.0, -1.0)：
• Alignment.topCenter = Alignment(0.0, -1.0)：
• Alignment.topRight = Alignment(1.0, -1.0)：
• Alignment.centerLeft = Alignment(-1.0, 0.0)：
• Alignment.center = Alignment(0.0, 0.0)：
• Alignment.centerRight = Alignment(1.0, 0.0)：
• Alignment.bottomLeft = Alignment(-1.0, 1.0)：
• Alignment.bottomCenter = Alignment(0.0, 1.0)：
• Alignment.bottomRight = Alignment(1.0, 1.0)：
• Alignment()
• Alignment.lerp()
  关于Alignment之前已经介绍过了：Flutter（44）：Layout组件之Container

4.使用

image.png

          Container(
            color: Colors.blue,
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),

5.OverflowBox与SizedOverflowBox的区别

不了解OverflowBox可以看一下：Flutter（56）：Layout组件之OverflowBox

• OverflowBox自己是没有宽高的，SizedOverflowBox是有的，尺寸就是size所设置的，下面这个例子就可以看得出来，SizedOverflowBox的父控件Container的尺寸就是100*50，Container自身没有约束，那么它就会调节自己为子控件大小，但是OverflowBox的父控件Container宽度却是屏幕宽度，由此可见OverflowBox自己是没有宽高的。
• SizedOverflowBox是会将原始约束传递给子控件，但是OverflowBox就不会了

          Container(
            color: Colors.blue,
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.blue,
            constraints: BoxConstraints(
              maxHeight: 50,
            ),
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.blue,
            height: 50,
            constraints: BoxConstraints(
              maxHeight: 50,
            ),
            child: OverflowBox(
              alignment: Alignment.topCenter,
              minWidth: 20,
              maxWidth: 100,
              maxHeight: 100,
              minHeight: 20,
              child: Container(
                width: 50,
                height: 120,
                color: Colors.amber,
              ),
            ),
          )

image.png

• 这里可以看到OverflowBox自身是没有尺寸的，但是SizedOverflowBox是有的
• OverflowBox跟SizedOverflowBox的父控件在有BoxConstraints约束的时候，SizedOverflowBox将约束传递给了子控件，导致子控件受到约束后无法溢出，但是OverflowBox却没有

下一节：Layout组件之SizedBox

Flutter（57）：Layout组件之SizedBox

Flutter教学目录持续更新中

Github源代码持续更新中