Flutter（52）：Layout组件之Fractionall
2020-10-15 本文已影响0人
starryxp
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
