场景

想要在一个父布局当中实现一个两个组件，一个在左上角一个在右上角的效果。我尝试了如下办法：

  • 父布局设置为Column

我在Flutter开发中，经常使用的容器布局应当是Container（容器），但是ArkUI没有类似的组件，只能一个个布局组件的尝试。

Column（列布局）是让子组件竖向排列，在我的预想中，我只需要将第一个子组件加一个Alignment.start，第二个子组件加一个Alignment.end就可以实现我的想法。但是当我把这两个属性值放入align属性的时候，子组件总是居中。

  • 父布局设置为Row

Row（行布局）与Column出现的效果一致

  • 父布局设置为Stack

Stack（层叠布局）与Flutter中的Stack非常相似，我用起来也比较容易上手。但是毕竟不是一个组件。Stack一般与绝对定位配合使用，但是Flutter里面可以根据上下左右四个参数来定位一个组件的位置，鸿蒙里面只有xy，这就比较苦恼人了。

总的来说，能通过不断改变position中x 、y的值来实现我想要的效果，但是在不同的屏幕上并不适用。

  • 父布局设置为Flex

Flex(弹性布局）应该参考了web前端的语法，因为我比较擅长flutter，所以我在写web前端的时候，Flex被我拿来当row布局或者Column布局用，哈哈。这里也不多做赘述。因为我在写鸿蒙的时候它也确确实实发挥了上述作用，和Row布局和Column布局不同的是，子组件不居中了。

最终实现

最终我发现了另外一个属性，alignself，每个组件都有一个这个属性，原来以前一直用align来调整子组件的位置是错误的，哈哈这里做个记录。