Flutter深入浅出组件篇---ConstrainedBoxBoxConstraintsUnconstrainedBox
Posted Jimi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter深入浅出组件篇---ConstrainedBoxBoxConstraintsUnconstrainedBox相关的知识,希望对你有一定的参考价值。
ConstrainedBox
ConstrainedBox介绍
主要目的是对其子组件添加额外的约束,有时候子组件需要自动调整宽度和高度,以达到最佳的适配设计,那么这时候使用ConstrainedBox
是最佳的选择。
示例代码
本文中很多效果都没有截图,可下载源代码运行项目 源代码地址,或者通过视频教程查看 视频教程地址
ConstrainedBox属性和说明
ConstrainedBox
只有两个属性,constraints
用来对子组件添加额外约束,child
被约束的子组件。
字段 | 属性 | 描述 |
---|---|---|
constraints | BoxConstraints | 对子组件添加额外约束 |
child | Widget | 被约束的子组件 |
ConstrainedBox基本使用
ConstrainedBox
的使用非常简单,接下来我们重点来关注BoxConstraints
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 100,
minHeight: 30,
),
child: Container(
color: Colors.orangeAccent,
child: Text("ConstrainedExample"),
),
)
BoxConstraints
BoxConstraints介绍
BoxConstraints
对 RenderBox
布局的不可变布局约束,而 RenderBox
是二维笛卡尔坐标系中的渲染对象,想深入了解 RenderBox
BoxConstraints属性和说明
总共四个属性
字段 | 属性 | 描述 |
---|---|---|
minWidth | double | 最小宽度,默认0.0 |
maxWidth | double | 最大宽度,默认double.infinity |
minHeight | double | 最小高度,默认0.0 |
maxHeight | double | 最大高度,默认double.infinity |
BoxConstraints基本使用
ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
maxWidth: 200,
minHeight: 30,
maxHeight: 100
),
child: Container(
color: Colors.orangeAccent,
child: Text("ConstrainedExample"),
),
)
BoxConstraints方法和说明
1、tight()
容器的宽度和高度取决于传进来的size
,设定多大就是多大。
BoxConstraints.tight(Size size)
: minWidth = size.width,
maxWidth = size.width,
minHeight = size.height,
maxHeight = size.height;
2、tightFor()
宽度和高度是可选参数,在不传入的情况下能大则大,在传入参数时设定多大就是多大。
const BoxConstraints.tightFor({
double? width,
double? height,
}) : minWidth = width ?? 0.0,
maxWidth = width ?? double.infinity,
minHeight = height ?? 0.0,
maxHeight = height ?? double.infinity;
3、tightForFinite()
宽度和高度默认给最大值,在不传参数的时候能大则大,在传入参数的时候能紧则紧。
const BoxConstraints.tightForFinite({
double width = double.infinity,
double height = double.infinity,
}) : minWidth = width != double.infinity ? width : 0.0,
maxWidth = width != double.infinity ? width : double.infinity,
minHeight = height != double.infinity ? height : 0.0,
maxHeight = height != double.infinity ? height : double.infinity;
4、loose()
最大宽度和最大高度限定于传入的size
,未超出能紧则紧
BoxConstraints.loose(Size size)
: minWidth = 0.0,
maxWidth = size.width,
minHeight = 0.0,
maxHeight = size.height;
5、expand()
宽度和高度是可选参数,在不传入时依赖于父组件, 占用父组件剩余的全部空间,在传入时设定多大就是多大。
const BoxConstraints.expand({
double? width,
double? height,
}) : minWidth = width ?? double.infinity,
maxWidth = width ?? double.infinity,
minHeight = height ?? double.infinity,
maxHeight = height ?? double.infinity;
UnconstrainedBox
UnconstrainedBox
不会对子组件产生任何限制,允许其子组件按照本身大小绘制,那么在我们的平时开发过程中用到该组件会相对较少,一般用于去除多重限制 的时候会有一些帮助。
比如AppBar
中 actions
属性的按钮大小是固定的,如果想要修改就可以借助 UnconstrainedBox
去除父元素的限制。
AppBar(
title: Text("ConstrainedExample"),
actions: [
UnconstrainedBox(
child: Container(
width: 20,
height: 20,
color: Colors.pink,
child: IconButton(onPressed: () {}, icon: Icon(Icons.alarm), iconSize: 20, padding: EdgeInsets.zero,),
),
),
IconButton(onPressed: () {}, icon: Icon(Icons.add)),
],
)
总结
ConstrainedBox
会根据子组件的需要自动调整宽度和高度以达到最佳的适配效果,如果确切知道组件需要设定多少宽高那么ConstrainedBox
就不在适合。 BoxConstraints
为 ConstrainedBox
额外增加的附加选项,尽可能达到业务需求。UnconstrainedBox
使用场景非常少,主要用于去除多重限制。
以上是关于Flutter深入浅出组件篇---ConstrainedBoxBoxConstraintsUnconstrainedBox的主要内容,如果未能解决你的问题,请参考以下文章