ArkUI 学习之位置设置：align（容器内子元素对齐方式）

align

align(value: Alignment)

设置容器元素绘制区域内的子元素的对齐方式。

！！！注意：只在Stack、Button、Marquee、StepperItem、Text、TextArea、TextInput、FolderStack中生效，其中和文本相关的组件Marquee、Text、TextArea、TextInput的align结果参考textAlign。不支持textAlign属性的组件则无法设置水平方向的文字对齐。

 

说明：

在Stack中该属性与alignContent效果一致，只能设置子组件在容器内的对齐方式。

 

参数：

参数名	类型	必填	说明
value	Alignment	是	默认值：Alignment.Center

 

示例：

@Entry
@Component
struct TestIndex {
  build() {
    Column({ space: 20 }) {
      /** Top */
      Column({space:5}){
        Stack() {
          Text('TopStart').backgroundColor(Color.Yellow).width('80%')
          Text('TopStart').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.TopStart)

        Stack() {
          Text('Top').backgroundColor(Color.Yellow).width('80%')
          Text('Top').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.Top)

        Stack() {
          Text('TopEnd').backgroundColor(Color.Yellow).width('80%')
          Text('TopEnd').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.TopEnd)
      }

      /** 中部 */
      Column({space:5}) {
        Stack() {
          Text('Start').backgroundColor(Color.Yellow).width('80%')
          Text('Start').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.Start)

        Stack() {
          Text('Center').backgroundColor(Color.Yellow).width('80%')
          Text('Center').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.Center)

        Stack() {
          Text('End').backgroundColor(Color.Yellow).width('80%')
          Text('End').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.End)
      }

      /** Bottom */
      Column({space:5}){
        Stack() {
          Text('BottomStart').backgroundColor(Color.Yellow).width('80%')
          Text('BottomStart').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.BottomStart)

        Stack() {
          Text('Bottom').backgroundColor(Color.Yellow).width('80%')
          Text('Bottom').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.Bottom)

        Stack() {
          Text('BottomEnd').backgroundColor(Color.Yellow).width('80%')
          Text('BottomEnd').backgroundColor(Color.Pink).width('70%')
        }.width('100%').height(70).backgroundColor(Color.Gray).align(Alignment.BottomEnd)
      }
    }.height('100%')
  }
}