Flutter教学目录持续更新中

Github源代码持续更新中

1.OverflowBox介绍

对其子项施加不同约束的widget，它可能允许子项溢出父级。

2.OverflowBox属性

alignment = Alignment.center：位置
minWidth：最小宽度，如果子控件宽度小于这个值，按这个值显示
maxWidth：最大宽度，如果子控件宽度大于这个值，按这个值显示
minHeight：最小高度，如果子控件高度小于这个值，按这个值显示
maxHeight：最大高度，如果子控件高度大于这个值，按这个值显示
child：
如果OverflowBox不设置约束，那么OverflowBox将使用他父控件的约束；如果OverflowBox的子控件尺寸大于OverflowBox父控件，且OverflowBox的约束也大于OverflowBox父控件，这时候OverflowBox子项就会溢出显示。
需要注意的是OverflowBox自己是没有宽高的，他的属性都是对子控件的约束而已，OverflowBox的尺寸是由他的父控件约束来决定的。这一点跟SizedOverflowBox是不一样的。SizedOverflowBox我们会在下一节讲，可以跟OverflowBox最个对比。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OverflowBox'),
      ),
      body: Container(
        color: Colors.blue,
        height: 200,
        child: OverflowBox(
          alignment: Alignment.topCenter,
          minWidth: 20,
          maxWidth: 200,
          maxHeight: 400,
          minHeight: 20,
          child: Container(
            width: 50,
            height: 300,
            color: Colors.amber,
          ),
        ),
      ),
    );
  }

下一节：Layout组件之SizedOverflowBox