diego-ph-222506-unsplash.jpg
概述
ConstrainedBox即创建一个Widget，该Widget对其子child施加附加约束。之前在constrain也有简单使用，即该组件一般集成在constrain中使用。
构造函数
ConstrainedBox({
Key key,
@required this.constraints,
Widget child
})
- constraints 其类型为BoxConstraints，一些基本的约束：
[RenderBox]布局的不可变布局约束。
如果且仅当以下所有关系成立时，[Size]才会遵从[BoxConstraints]：
[minWidth] <= [Size.width] <= [maxWidth]
[minHeight] <= [Size.height] <= [maxHeight]
约束本身必须满足这些关系：
0.0 <= [minWidth] <= [maxWidth] <= [double.infinity]
0.0 <= [minHeight] <= [maxHeight] <= [double.infinity]
[double.infinity]是每个约束的合法值(比如想要获取最大的扩展宽度，可以将宽度值设为double.infinity)
constraints构造函数
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity
})
- minWidth 满足约束条件的最小宽度
- maxWidth 满足约束条件的最大宽度；可能是[double.infinity]（1.0 / 0.0）
- minHeight 满足约束条件的最小高度
- maxHeight 满足约束条件的最大高度；可能是[double.infinity]（1.0 / 0.0）
- child 受约束的子child
示例代码
// ConstrainedBox
import 'package:flutter/material.dart';
class ConstrainedBoxLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('ConstrainedBox')
),
body: Center(
child: Container(
width: 300,
height: 400,
decoration: BoxDecoration(
border: Border.all()
),
//利用UnconstrainedBox 消除之前限制
child: UnconstrainedBox(
// 对child进行约束，
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: 30,
minWidth: 30,
maxHeight: 150,
maxWidth: 150
),
child: Container(
width: 110,
height: 110,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
),
)
)
),
),
),
);
}
}
实例效果
103113975F8D87CCB4B3BD8A71572944.png
