Flutter（56）：Layout组件之OverflowBox

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

Flutter（58）：Layout组件之SizedOverflowBox

Flutter教学目录持续更新中

Github源代码持续更新中