1 ConstrainedBox、SizedBox、UnconstrainedBox 介绍
1)、ConstrainedBox 用于对子组件添加额外的约束。例如,如果你想让子组件的最小高度是 80 像素
ConstrainedBox({
Key key,
@required this.constraints,
Widget child,
})
我们可以看到这里有个 constraints
final BoxConstraints constraints;
class BoxConstraints extends Constraints {
this.maxWidth = double.infinity,
this.maxHeight = double.infinity,
}) : assert (minWidth != null),
assert (maxWidth != null),
assert (minHeight != null),
assert (maxHeight != null);
我们可以看到 BoxConstraints 继承 Constraints,然后一些属性设置。
有多重 ConstrainedBox 限制时,对于 minWidth 和 minHeight 来说,是取父子中相应数值较大的
2)、SizedBox:用于给子元素指定固定的宽高
3)、UnconstrainedBox
:不会对子组件产生任何限制,它允许其子组件按照其本身大小绘制
一般用来去掉父约束
2 测试代码
测试 1、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text('hello flutter'),
),
body: Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: double.infinity,
minHeight: 100
),
child: Container(
width: 50,
height: 50,
color: Colors.green,
),
),
),
),
);
}
}
测试 2、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
title: Text('hello flutter'),
),
body: Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 200,
minHeight: 100
),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
minHeight: 200
),
child: Container(
width: 50,
height: 50,
color: Colors.green,
),
),
),
),
),
);
}
}
测试 3、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
title: Text('hello flutter'),
),
body: Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 200,
minHeight: 100
),
child: UnconstrainedBox(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 50,
minHeight: 50
),
child: Container(
width: 10,
height: 15,
color: Colors.red,
),
),
),
),
),
),
);
}
}