阅读 439

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

这是我参与更文挑战的第13天,活动详情查看: 更文挑战

前言

上一篇我们聊了 Flutter 中的「层布局」Stack,但是也仅仅聊了他的属性及其效果就写了 2000 多字,这一篇我们着重聊如何对 Stack 中子项进行精细化的位置布局。

你如何布局?

下面的效果,在 Stack 中你可以想到几种方法布局出来?
image.png

其中一种方式

我其中一种方法是如下代码布局的。

BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // 设置填充方式展接受父类约束最大值
    fit: StackFit.expand,
    children: [
      Positioned(
        child: getItem('5'),
        //对准右下角
        bottom: 0,
        right: 0,
      ),
      Positioned(
        child: getItem('4'),
        //对准左下角
        bottom: 0,
        left: 0,
      ),
      //居中
      Center(
        child: getItem('3'),
      ),
      Positioned(
        child: getItem('2'),
        //对准右上角
        top: 0,
        right: 0,
      ),
      Positioned(
        child: getItem('1'),
        //对准左上角
        top: 0,
        left: 0,
      ),
    ],
  ),
)
复制代码

这里有个 Center Widget 稍后就会聊到

getItem

为了方便看的更加清晰,还是每篇都贴一下 getItem 的代码,大多都相同,可能变化较大的 Widget 为了效果略微有些不同

  /// 获取子项目(这类使用了选择参数)
  Widget getItem(String index,
      {double? width = 60, double? height = 60, Color color = Colors.orange}) {
    return Container(
      // 宽高设置 60
      width: width,
      height: height,
      // 设置背景色
      color: color,
      // 设置间隙
      margin: EdgeInsets.all(2),
      // 设置子项居中
      alignment: Alignment.center,
      // 设置子项
      child: Text('$index'),
    );
  }
复制代码

Positioned(定位组件)

上面展示的一种方式中,我们用到了 left、top、right、bottom 4 个定位属性,我们看看源码,其实还有 width、height 属性
image.png
而且这里断言设置了left、right、widthtop、bottom、height 三个属性必须有 1 个为空,接下来我们会聊到为什么。

单属性

BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // 设置填充方式展接受父类约束最大值
    fit: StackFit.expand,
    children: [
      Positioned(
        left: 10,
        child: getItem('left 10'),
      ),
      Positioned(
        right: 10,
        child: getItem('right 10'),
      ),
      Positioned(
        width: 80,
        child: getItem('width 80'),
      ),
      Positioned(
        top: 10,
        child: getItem('top 10'),
      ),
      Positioned(
        bottom: 10,
        child: getItem('bottom 10'),
      ),
      Positioned(
        height: 80,
        child: getItem('height 80'),
      ),
    ],
  ),
)
复制代码
left、right、widthtop、bottom、height
image.pngimage.png

组合属性

  • 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'),
      ),
    ],
  ),
)
复制代码

image.png

  • 如果我们将 leftright 一起使用呢?
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'),
      ),
    ],
  ),
)
复制代码
leftRighttopBottom
image.pngimage.png
  • 如果我们将leftrightwidth 组合呢?
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 | | :---: | :---: | | image.png | image.png |

  • 如果同纬度 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'),
)
复制代码

image.png

bottomLeftWidth 100rightTopBottom
image.pngimage.png

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

小总结

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

Align(对齐)

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

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,
      ),
    ],
  ),
)
复制代码

对于 Align 中的 alignment 属性我们已经聊过很多了,这里就不多聊了,都是一样的意思。这里我们间 3 号,居中方式改成了 Align 的方式,开头我们使用的 Center 接下来给大家介绍一下。

Center(居中)

我们为什么可以将 Center 替换成 Align 而效果是一样的呢?我们看看源码就会明白了。

Center 源码

image.png

Align 源码

image.png
看到这里就明白了吧,其实 Center 就是 Align 的一个子类,然后啥也没干,其实我们可以叫他别名,因为 Alignalignment 属性默认值就是居中的。

源码仓库

基于 Flutter 🔥 最新版本

参考链接

关注专栏

  • 此文章已收录到下面👇 的专栏,可以直接关注
  • 更多文章继续阅读|系列文章持续更新

👏 欢迎点赞➕收藏➕关注,有任何问题随时在下面👇评论,我会第一时间回复哦

文章分类
Android
文章标签