简介
flutter 中的 layout 有很多,基本上看 layout 的名字就晓得这个 layout 到底是做什么用的。比如说这些 layout 中的 Box,从名字就晓得这是一个 box 的布局,不过 flutter 中的 box 还有很多种,明天咱们来介绍最罕用的 LimitedBox,SizedBox 和 FittedBox。
LimitedBox
LimitedBox 是一种限度大小的 Box,先来看下 LimitedBox 的定义:
class LimitedBox extends SingleChildRenderObjectWidget
能够看到 LimitedBox 继承自 SingleChildRenderObjectWidget,示意 LimitedBox 中能够有一个 single child。
那么 LimitedBox 个别用在什么中央呢?
思考在一个可滚动列表的状况下,比方 ListView, 因为他是 unbounded 的,如果 ListView 的子 widget 是 Container 的话,Container 会尽可能的小,这很显著不是咱们所想要的,咱们以上面的代码为例:
Widget build(BuildContext context) {
return ListView(
children: [for(var i=0; i < 10 ; i++)
Container(color: list[i % 4],
)
],
);
}
在 ListView 中,咱们增加了一个 Container, 这些 Container 中只设置了 color,并且并未设置任何大小,那么将会失去上面的界面:
能够看到当初看到的界面是空白的。
当然,你能够给 Container 设置 height 属性来达到对应的目标:
Widget build(BuildContext context) {
return ListView(
children: [for(var i=0; i < 10 ; i++)
Container(
height: 100,
color: list[i % 4],
)
],
);
}
或者应用 LimitedBox 来达到同样的成果:
Widget build(BuildContext context) {
return ListView(
children: [for(var i=0; i < 10 ; i++)
LimitedBox(
maxHeight: 100,
child: Container(
// height: 100,
color: list[i % 4],
),
)
],
);
}
咱们能够失去上面的界面:
SizedBox
SizedBox 从名字就晓得是给 box 一个指定的 size。
先来看下 Sizedbox 的定义:
class SizedBox extends SingleChildRenderObjectWidget
能够看到 SizedBox 继承自 SingleChildRenderObjectWidget,示意它能够蕴含一个 child widget。
而后再来看下它的构造函数:
const SizedBox({Key? key, this.width, this.height, Widget? child})
SizedBox 次要承受 width,height 和它的 child widget。SizedBox 次要用来强制它的 child widget 的 width 和 height 保持一致。
咱们来看一个具体的例子:
Widget build(BuildContext context) {
return SizedBox(
width: 200.0,
height: 200.0,
child: Container(color: Colors.blue,),
);
}
下面的例子中咱们指定了固定 SizedBox。最初失去的界面如下:
事实上 SizedBox 的 width 和 height 并不一定是固定的值,咱们能够将他们设置为 double.infinity,示意 child widget 会尽可能的填充。
比方上面的例子:
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
height: double.infinity,
child: Container(color: Colors.blue,),
);
}
展现的界面是这样的:
SizedBox 也提供了一个 expand 办法来提供相似的性能:
Widget build(BuildContext context) {
return SizedBox.expand(
child: Container(color: Colors.blue,),
);
}
下面的代码和应用 double.infinity 是等价的。
SizedBox 还能够不蕴含任何 child, 在这种状况下,SizedBox 示意的就是一个空白 gap。
FittedBox
FittedBox 就是填充 box 的意思,能够依照指定的 fit 规定来填充它的 child。
先来看下 FittedBox 的定义:
class FittedBox extends SingleChildRenderObjectWidget {
FittedBox 继承自 SingleChildRenderObjectWidget,示意它也只蕴含一个 child。
再看下 FittedBox 的构造函数:
const FittedBox({
Key? key,
this.fit = BoxFit.contain,
this.alignment = Alignment.center,
this.clipBehavior = Clip.none,
Widget? child,
})
FittedBox 有几个十分有意思的参数,首先是 fit,示意如何填充 Box, 它是一个 BoxFit 对象,BoxFit 有几个值,用来形容 fix 的形式。
比方 fill 示意填充到 box 中,不论之前 child 的长宽比,而 contain 示意的是尽可能的蕴含 child。
alignment 是一个 AlignmentGeometry,示意的是 child 的排列形式。
clipBehavior 示意的是 Box 和 child 重叠的时候的剪切形式。
咱们看一个具体的例子:
Widget build(BuildContext context) {
return FittedBox(
fit: BoxFit.fill,
child: Image.asset('images/head.jpg'),
);
}
下面例子中,咱们应用了 BoxFit.fill 来填充,咱们看下具体的成果:
总结
这几个 box 是咱们在日常的工作中常常会用到的 box。大家能够熟练掌握。
本文的例子:https://github.com/ddean2009/learn-flutter.git
更多内容请参考 www.flydean.com
最艰深的解读,最粗浅的干货,最简洁的教程,泛滥你不晓得的小技巧等你来发现!
欢送关注我的公众号:「程序那些事」, 懂技术,更懂你!