目录
1.Container
一个结合绘制、定位、调整大小能力的容器小部件。
属性：
alignment → AlignmentGeometry:子部件对齐方式
constraints → BoxConstraints:适用于子部件的其它约束
decoration → Decoration:背景描述
foregroundDecoration → Decoration：前景描述
margin → EdgeInsetsGeometry:部件外边距
padding → EdgeInsetsGeometry:部件内边距
示例：
Container(
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
// color: Colors.teal.shade700,
alignment: Alignment.center,
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 230.0,
),
decoration:BoxDecoration(
image:DecorationImage(
image: NetworkImage('https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d8d48aa8a151f3dedcb2bf64a4eff0ec/4610b912c8fcc3ce863f8b519c45d688d53f20d0.jpg'),
fit: BoxFit.cover
),
),
child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
foregroundDecoration: BoxDecoration(
color:Color(0x55ffffff),
),
transform: Matrix4.rotationZ(0.1),
)去掉前景 添加前景
注：
decoration和color不能同时存在否则会报错
特点：
1.如果部件内没有子部件，没有width,height约束，并且父容器无限制约束则Container会尝试尽可能小
2.如果部件无子部件，无aligment对齐方式，有width,height约束或者有constraints约束则容器将在这些约束和父对象约束的组合下尽可能小
3.如果部件无子部件、width、height、约束和对齐方式，但父对象提供有界约束，则容器将展开以适应父容器提供的约束。
4.如果部件存在对齐方式，并且父容器提供了无边界约束，那么容器会根据子部件调整自身的大小
5.如果部件存在对齐方式，并且父容器提供有界约束，那么部件将尝试展开以适应父容器约束，然后根据对齐方式将子对象放置在自身相应位置。否则，部件有子部件，但没有高度、宽度、约束和对齐方式，容器将约束从父项传递到子项，并调整自身大小以匹配子项。
2.Padding
指定内边距的部件
效果同Container的padding属性
属性
padding → EdgeInsetsGeometry：内边距大小
示例
为了显示padding的效果我这在Padding外层包裹了Container容器以显示padding背景色
Container(
width: 400,
height: 400,
color: Colors.blue,
child:Padding(
padding: const EdgeInsets.all(30.0),
child: Container(color: Colors.red,),
),
); 
3.Center
使子部件居中的小部件
属性
heightFactor → double：高度因子
widthFactor → double：宽度因子
示例
Center(//展示部分
widthFactor: 2.0,//宽度因子
heightFactor: 2.0,//高度因子
child: Container(
width: 100,
height: 100,
color: Colors.red,),
),
)因子2.0（center是子部件宽高2倍） 因子3.0（center是子部件宽高3倍）
4.Align
一个控制子部件与自身对齐方式的部件
属性
alignment → AlignmentGeometry：子部件与自身对齐方式
heightFactor → double：高度因子
widthFactor → double：宽度因子
示例
示例1：
Align(//展示部分
alignment: Alignment.bottomRight,//相对于中心的偏移量 效果同 Alignment(1.0,1.0)
widthFactor: 2.0,//宽度因子 宽度是子控件两倍
heightFactor: 2.0,//高度因子 高度是子控件两倍
child: Container(
width: 100,
height: 100,
color: Colors.red,),
), 
5.FittedBox
一个根据规则对子部件进行缩放的部件
属性
alignment → AlignmentGeometry：子部件对齐方式
示例
FittedBox(
alignment:Alignment.center,//子部件对齐方式
fit: BoxFit.contain,//子部件填充方式
child: Container(
color: Colors.red,
child: Text("123"),
),
),这里只展示3种效果
fit:BoxFit.contain fit:BoxFit.cover fit:BoxFit.fill
6.AspectRatio
一个试图固定子部件宽高比的部件
属性
aspectRatio → double：子部件宽高比
示例
AspectRatio(
aspectRatio: 2.0,
child: Container(
color: Colors.red,
),
), 
注：部件首先尝试布局约束所允许的最大宽度（父部件宽度）。通过将给定的宽高比应用于宽度来确定小部件的高度，表示为宽度与高度的比率。
例如，16：9宽度：高度纵横比的值为16.0 / 9.0。如果最大宽度为无穷大，则通过将纵横比应用于最大高度来确定初始宽度。
现在考虑第二个例子，这次宽高比为2.0，布局约束要求宽度介于0.0和100.0之间，高度介于0.0和100.0之间。我们将选择宽度为100.0（允许的最大值）和50.0的高度（以匹配宽高比）。
在相同的情况下，如果纵横比为0.5，我们还将选择宽度100.0（仍然是允许的最大值），我们将尝试使用200.0的高度。不幸的是，这违反了限制条件，因为孩子的身高最高可达100.0像素。然后，窗口小部件将获取该值并再次应用纵横比以获得50.0的宽度。约束允许该宽度，子节点的宽度为50.0，高度为100.0。如果不允许宽度，则窗口小部件将继续迭代约束。如果在查阅每个约束之后窗口小部件找不到可行的大小，则窗口小部件最终将选择满足布局约束但不满足宽高比约束的子窗口的大小。
7.ConstrainedBox
一个对其子部件添加额外约束的部件
属性
constraints → BoxConstraints：额外约束
效果通 Container constraints属性
8.Baseline
一个根据孩子的基线定位孩子的部件
属性
baseline → double：以此部件顶部为基准定位基准线位置
baselineType → TextBaseline：基线类型
示例
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Baseline(
baseline: 200.0, //从顶部开始计算 父部件的位置
baselineType: TextBaseline.alphabetic, //字符表意字符与基准线对齐
child: Text("a"),
),
Baseline(
baseline: 200.0,
baselineType: TextBaseline.ideographic,//字符底部与基准线对齐
child: Text(
"p",
style: TextStyle(fontSize: 80),
),
),
Baseline(
baseline: 200.0,
baselineType: TextBaseline.alphabetic,
child: Text(
"g",
style: TextStyle(fontSize: 60),
),
),
],
);左图为运行结果 右图是方便理解
1为baseline值
2为“a”，“g” 字符底部
3为基准线
alphabetic对齐方式为表意字符与基准线对齐 "a","g"字符
ideographic对齐方式为字符底部与基准线对齐 “p”字符
9.FractionallySizedBox
一个可以将子级限定在总可用空间的一小部分的部件
属性
alignment → AlignmentGeometry：子部件对齐方式
heightFactor → double：高度因子
widthFactor → double：宽度因子
示例
Container(
width: 300,
height: 300,
color: Colors.blue,
child: FractionallySizedBox(
alignment: Alignment.center, //子部件对齐方式
widthFactor: 0.5, //宽度因子 0.5倍
heightFactor: 0.5, //高度因子 0.5倍
child: Container(
color: Colors.red,
),
),
); 
10.IntrinsicHeight
一个可以将子部件大小调整至自适应高度的部件
注：官方说法此开销相对比较大
属性
示例
对比一下就可以发现这个部件的用处
示例1
IntrinsicHeight(
child: Container(
color: Colors.red,
alignment: Alignment.center,
child: Text('123'),
),
);示例2
Container(
color: Colors.red,
alignment: Alignment.center,
child: Text('123'),
);示例1（高度调整至子部件大小） 示例2（Container 默认填充剩余空间）
11.IntrinsicWidth
用法同上IntrinsicHeight
不同点属性
stepHeight → double：若非NULL则强制子项的高度为此值的倍数
stepWidth → double：若非NULL则强制子项的宽度为此值的倍数
示例
示例中 限制Container宽高为110 但实际红色区域宽高为 200
IntrinsicWidth(
stepWidth: 100,//子控件宽度必须为100的倍数
stepHeight: 100,//子控件高度必须为100的倍数
child: Container(
width: 110,
height: 110,
color: Colors.red,
alignment: Alignment.center,
child: Text('123'),
),
); 
扫一扫
2135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
