本文正在参与「金石方案 . 瓜分6万现金大奖」
前言
在 Flutter 的开发中，最常见的便是层层的组件嵌套，因此不可避免会遇到子组件如何适配父组件的问题。比方，按钮的可点击区域是否要占满整个父组件？图片是居中仍是居左？这些问题可以经过 Flutter 供给的FittedBox 组件来解决。
FittedBox 简介
FittedBox 组件规划的目的便是让其子组件与父级组件进行适配，包含对齐、缩放、裁剪和溢出处理。
const FittedBox({
Key? key,
this.fit = BoxFit.contain,
this.alignment = Alignment.center,
this.clipBehavior = Clip.none,
Widget? child,
})
如上所示，FittedBox 的定义很简洁，只有下面四个特点：
-
fit：子组件和父组件的适配形式，BoxFit 枚举，包含了不处理（none）、尽量包含（contain），拉伸填满（fill），宽度方向填满（fitWidth），高度方向填满（fitHeight）和缩小到父组件内（scaleDown)，详细适配的款式可以看官方的文档 不同 BoxFit 款式。 -
alignment：子组件与父组件的对齐方法，包含居中（center）、左边居中(centerLeft)、右侧居中(centerRight)，顶部居中（topCenter）、底部居中（bottomCenter）等。 -
clipBehavior：超出后的裁剪形式，即子组件溢出父组件后要不要裁剪，不裁剪的话子组件可能会超出父组件的显现规模。 -
child：要适配的子组件。
运用示例
咱们来看一张图片在不同适配参数下的效果，这儿咱们可以在底部切换不同的适配形式，留意这儿咱们运用了裁剪来防止溢出，clipBehavior参数为 Clip.antiAlias。可以看到图片随着不同的形式显现的区域、对齐也会不同，这就给咱们供给了子组件适配很大的灵活性。
var _fit = BoxFit.none;
var _alignment = Alignment.center;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: const Text('FittedBox'), backgroundColor: Colors.red[400]!),
body: Center(
child: Container(
width: MediaQuery.of(context).size.width - 30.0,
height: 160.0,
color: Colors.blue,
child: FittedBox(
alignment: _alignment,
fit: _fit,
clipBehavior: Clip.antiAlias,
child: Image.asset('images/girl.jpeg'),
),
),
),
bottomSheet: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DropdownButton(
items: const [
DropdownMenuItem<BoxFit>(
value: BoxFit.none,
child: Text('BoxFit.none'),
),
DropdownMenuItem<BoxFit>(
value: BoxFit.contain,
child: Text('BoxFit.contain'),
),
DropdownMenuItem<BoxFit>(
value: BoxFit.fill,
child: Text('BoxFit.fill'),
),
DropdownMenuItem<BoxFit>(
value: BoxFit.cover,
child: Text('BoxFit.cover'),
),
DropdownMenuItem<BoxFit>(
value: BoxFit.fitHeight,
child: Text('BoxFit.fitHeight'),
),
DropdownMenuItem<BoxFit>(
value: BoxFit.fitWidth,
child: Text('BoxFit.fitWidth'),
),
DropdownMenuItem<BoxFit>(
value: BoxFit.scaleDown,
child: Text('BoxFit.scaleDown'),
),
],
value: _fit,
onChanged: (fit) {
setState(() {
_fit = fit as BoxFit;
});
},
),
DropdownButton(
items: const [
DropdownMenuItem<Alignment>(
value: Alignment.center,
child: Text('Alignment.center'),
),
DropdownMenuItem<Alignment>(
value: Alignment.centerLeft,
child: Text('Alignment.centerLeft'),
),
DropdownMenuItem<Alignment>(
value: Alignment.centerRight,
child: Text('Alignment.centerRight'),
),
DropdownMenuItem<Alignment>(
value: Alignment.topCenter,
child: Text('Alignment.topCenter'),
),
DropdownMenuItem<Alignment>(
value: Alignment.bottomCenter,
child: Text('Alignment.bottomCenter'),
),
DropdownMenuItem<Alignment>(
value: Alignment.topLeft,
child: Text('Alignment.topLeft'),
),
],
value: _alignment,
alignment: AlignmentDirectional.center,
onChanged: (alignment) {
setState(() {
_alignment = alignment as Alignment;
});
},
),
],
),
);
}
红包界面
下面咱们来用 FittedBox 做一个红包界面效果，如下图所示。
FittedBox 将一个 Container 贴在了顶部居中方位。详细完成代码如下所示。
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: const Text('FittedBox'), backgroundColor: Colors.red[400]!),
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
Container(
width: 240.0,
height: 400.0,
color: Colors.red,
child: FittedBox(
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
clipBehavior: Clip.antiAlias,
child: Container(
height: 50.0,
width: 160.0,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(160.0),
bottomRight: Radius.circular(160.0)),
color: Colors.red[800],
),
),
),
),
ClipOval(
child: Container(
width: 80,
height: 80,
alignment: Alignment.center,
color: Colors.yellow[700],
child: const Text(
'開',
style: TextStyle(
fontSize: 42.0,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
),
),
],
),
),
);
}
总结
本篇介绍了 Flutter 中的布局组件 FittedBox 的运用。FittedBox 是一个十分简略、但有用的组件，经过它，咱们可以将子组件按必定的方法适配到父组件完成所需要的布局，然后简化开发中的布局款式的代码编写。
本篇源码已上传至：有用组件相关代码。
我是岛上码农，微信大众号同名。如有问题可以加自己微信沟通，微信号：
island-coder。：觉得有收成请点个赞鼓励一下！
：保藏文章，便利回看哦！
：谈论沟通，互相进步！
本文正在参与「金石方案 . 瓜分6万现金大奖」
