Flutter（52）：Layout组件之FractionallySizedBox

Flutter教学目录持续更新中

Github源代码持续更新中

1.FractionallySizedBox介绍

一个widget，它把它的子项放在可用空间的一小部分。其内部实现是有RenderFractionallySizedOverflowBox完成的。可以使用百分比控制子控件大小。

2.FractionallySizedBox属性

• alignment = Alignment.center：
• widthFactor：宽度因子
• heightFactor：高度因子
• child：

3.注意点

• 因子需要>=0
• 大于1会使FractionallySizedBox超出父空间
• 因子为空的时候会铺满怎么父控件
• FractionallySizedBox的宽/高=因子*（父控件宽/高-padding）

4.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

5.使用

1602742199238.jpg

  _myChild() {
    return Container(
      width: 80,
      height: 80,
      color: Colors.red,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FractionallySizedBox'),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(10),
              color: Colors.blue,
              width: 100,
              height: 100,
              child: FractionallySizedBox(
                child: _myChild(),
                widthFactor: 0.5,
                heightFactor: 0.5,
                alignment: Alignment.center,
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(10),
              color: Colors.blue,
              width: 100,
              height: 100,
              child: FractionallySizedBox(
                child: _myChild(),
                alignment: Alignment.center,
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(10),
              color: Colors.blue,
              width: 100,
              height: 100,
              child: FractionallySizedBox(
                child: _myChild(),
                widthFactor: 2,
                alignment: Alignment.center,
              ),
            ),
          ],
        ),
      ),
    );
  }

下一节：Layout组件之IntrinsicWidth/IntrinsicHeight

Flutter（53）：Layout组件之IntrinsicWidth/IntrinsicHeight

Flutter教学目录持续更新中

Github源代码持续更新中