Flutter布局：LimitedBox、Offstage、OverflowBox、SizedBox

LimitedBox（限定宽高布局）

LimitedBox是将child限制在其设定的最大宽高中的，但是这个限定是有条件的。当LimitedBox最大宽度不受限制时，child的宽度就会受到这个最大宽度的限制，同理高度。

属性

  const LimitedBox({
    Key key,
    this.maxWidth = double.infinity,//最大宽度
    this.maxHeight = double.infinity,//最大高度
    Widget child,
  })

例子1

void main() => runApp(new MaterialApp(home: new MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          child: LimitedBox(
            maxWidth: 10, //Text 有自身的约束所以这里设置的maxWidth ，maxHeight 无效
            maxHeight: 100,
            child: Text(
              'color: IntrinsicHeight IntrinsicHeight IntrinsicHeight IntrinsicHeight',
              style: TextStyle(
                  fontSize: 28,
                  color: Colors.white,
                  backgroundColor: Colors.green),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

例子2

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: Row(
        children: [
          Container(
            color: Colors.grey,
            width: 100.0,
          ),
          LimitedBox(
            maxWidth: 150.0, //设置最大宽度 限定child在此范围内
            child: Container(
              color: Colors.lightGreen,
              width: 250.0,
            ),
          ),
        ],
      ),
    );
  }
}

Offstage(显示隐藏布局)

一个布局 Widget，可以控制其子元素的显示和隐藏。

Offstage的布局行为完全取决于其offstage参数

• 当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
• 当offstage为false，当前控件则跟平常用的控件一样渲染绘制；

另外，当Offstage不可见的时候，如果child有动画，应该手动停掉，Offstage并不会停掉动画。

Column(
  children: <Widget>[
    new Offstage(
      offstage: offstage,
      child: Container(color: Colors.blue, height: 100.0),
    ),
    new CupertinoButton(
      child: Text("点击切换显示"),
      onPressed: () {
        setState(() {
          offstage = !offstage;
        });
      },
    ),
  ],
)

OverflowBox（溢出父view布局）

OverflowBox这个控件，允许child超出parent的范围显示

属性

const OverflowBox({
    Key key,
    this.alignment = Alignment.center,//对齐方式
    this.minWidth,//最小宽度
    this.maxWidth,//最大宽度
    this.minHeight,//最小高度
    this.maxHeight,//最大高度
    Widget child,
  })

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: Container(
        color: Colors.green,
        width: 200.0,
        height: 200.0,
        padding: const EdgeInsets.all(5.0),
        child: OverflowBox(
          alignment: Alignment.topLeft,
          maxWidth: 300.0,
          maxHeight: 500.0,
          child: Container(
            color: Color(0x33FF00FF),
            width: 400.0,
            height: 400.0,
          ),
        ),
      ),
    );
  }
}

SizedBox

一个特定大小的盒子。这个 Widget 强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL，则此 Widget 将调整自身大小以匹配该维度中的孩子的大小。

属性

const SizedBox({ 
		Key key, 
		this.width,//宽
		 this.height,//高
		  Widget child })

例子

new SizedBox(
  width: 100,
  height: 100,
  child: new Container(
         color: Colors.red,
        child: new Text("指定height和width"),
  ),
),