Flutter 中 Positioned、Align、Center 的使用详解 _ Flutter Widgets

最新推荐文章于 2025-10-21 00:46:21 发布

原创最新推荐文章于 2025-10-21 00:46:21 发布 · 990 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript #前端

程序员专栏收录该内容

490 篇文章

订阅专栏

本文详细探讨了Flutter中的Positioned组件如何用于精确布局，以及Align的使用如何简化对齐。作者还介绍了如何结合不同维度的属性（如left,right,width,height）进行组合，以及Center与Align的关系。文章最后提到了与布局相关的库和资源，适合Android开发者学习和提升。

组合属性

topLeft、topRight、bottomLeft、bottomRight

BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
top: 10,
left: 10,
child: getItem(‘topLeft’),
),
Positioned(
top: 10,
right: 10,
child: getItem(‘topRight’),
),
Positioned(
bottom: 10,
left: 10,
child: getItem(‘bottomLeft’),
),
Positioned(
bottom: 10,
right: 10,
child: getItem(‘bottomRight’),
),
],
),
)

如果我们将 left 和 right 一起使用呢？

BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
right: 10,
child: getItem(‘leftRight’),
),
Positioned(
top: 10,
bottom: 10,
child: getItem(‘topBottom’),
),
],
),
)

leftRight	topBottom

如果我们将left 或 right 与 width 组合呢？

BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
width: 100,
child: getItem(‘leftWidth 100’),
),
Positioned(
right: 10,
width: 100,
child: getItem(‘RightWidth 100’),
),
Positioned(
top: 10,
height: 100,
child: getItem(‘topHeight 100’),
),
Positioned(
bottom: 10,
height: 100,
child: getItem(‘bottomHeight 100’),
),
],
),
)

| (left | right) & width | (top | bottom) & height | | :—: | :—: | | | |

如果同纬度 3 个属性组合呢？

BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
right: 10,
width: 100,
child: getItem(‘leftRightWidth 100’),
)
],
),
)

那肯定是报错啦，刚才看源码的时候已经看到断言说不能这样写啦，因为

left和right 可以确定一个宽度，再设置一个宽度就冲突了

如果不同维度 3 个属性组合呢？

// bottomLeftWidth 100
Positioned(
left: 10,
bottom: 10,
width: 100,
child: getItem(‘bottomLeftWidth 100’),
),
// rightTopBottom
Positioned(
right: 10,
top: 10,
bottom: 10,
child: getItem(‘rightTopBottom’),
)

bottomLeftWidth 100	rightTopBottom

只要是不同维度的随便你怎么组合？

小总结

到这里我们基本对 Positioned 基本的使用就全部聊完了，Positioned 可以对当个子项目进行设置定位和宽高，达到更加精准的参数调配。

Align（对齐）

其实实现我们开头的效果还有更加简单一点的方式，就是使用 Align 进行子项的设置

BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Align(
child: getItem(‘5’),
//对齐到右下角
alignment: Alignment.bottomRight,
),
Align(
child: getItem(‘4’),
//对齐到左下角
alignment: Alignment.bottomLeft,
),
//居中
Align(
child: getItem(‘3’),
// 居中是默认值
alignment: Alignment.center,
),
Align(
child: getItem(‘2’),
//对齐到右上角
alignment: Alignment.topRight,
),
Align(
child: getItem(‘1’),
//对齐到左上角
alignment: Alignment.topLeft,
),
],
),
)