鸿蒙 AkrUI 零基础教程第一集-六虎

前语

各位同学有段时刻没有见面由于一向很忙所以就你没有去更新博客。最近有在学习这个鸿蒙的ark ui开发由于鸿蒙不是发布了一个鸿蒙next的测试版别明年会启动纯血鸿蒙运用所以我就想提早给大家写一些博客文章

线性布局（Row/Column）

线性布局（LinearLayout）是开发中最常用的布局，经过线性容器 Row和Column构建。线性布局是其他布局的根底，其子元素在线性方向上（水平方向和笔直方向）依次摆放。线性布局的摆放方向由所选容器组件决定，Column容器内人元素依照笔直方向摆放，Row容器内人元素依照水平方向摆放。依据不同的摆放方向，开发者可选择运用Row或Column容器创建线性布局。这个比较像flutter里面线性布局学过flutter的就比较简单理解

横向线性布局

纵向线性布局

基本概念

布局容器：具有布局才能的容器组件，能够承载其他元素作为其子元素，布局容器会对其子元素进行尺度计算和布局摆放。
布局子元素：布局容器内部的元素。
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴摆放。Row容器主轴为横向，Column容器主轴为纵向。
穿插轴：笔直于主轴方向的轴线。Row容器穿插轴为纵向，Column容器穿插轴为横向。
间隔：布局子元素的间隔。

具体代码实现

横向线性布局

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 20 }) {
        Row().width('90%').height(50).backgroundColor(0xFF0000)
        Row().width('90%').height(50).backgroundColor(0xFF0000)
        Row().width('90%').height(50).backgroundColor(0xFF0000)
      }.width('100%')
    }
    .height('100%')
  }
}

纵向线性布局

@Entry
@Component
struct Index {
  build() {
      Row({ space: 35 }) {
        Text('space: 35').fontSize(15).fontColor(Color.Gray)
        Row().width('10%').height(150).backgroundColor(0xFF0000)
        Row().width('10%').height(150).backgroundColor(0xFF0000)
        Row().width('10%').height(150).backgroundColor(0xFF0000)
      }.width('90%')
    }
    .height('100%')
  }
}

布局子元素在穿插轴上的对齐方法

在布局容器内，能够经过alignItems特点设置子元素在穿插轴（摆放方向的笔直方向）上的对齐方法。且在各类尺度屏幕中，表现一致。其间，穿插轴为笔直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。 alignSelf特点用于控制单个子元素在容器穿插轴上的对齐方法，其优先级高于alignItems特点，假如设置了alignSelf特点，则在单个子元素上会掩盖alignItems特点。

HorizontalAlign.Start：子元素在水平方向左对齐

@Entry
@Component
struct Index {
 build() {
   Column({}) {
     Column() {
     }.width('80%').height(50).backgroundColor(0xF5DEB3)
     Column() {
     }.width('80%').height(50).backgroundColor(0xD2B48C)
     Column() {
     }.width('80%').height(50).backgroundColor(0xF5DEB3)
   }.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')
 }
}

HorizontalAlign.Center：子元素在水平方向居中对齐


@Entry
@Component
struct Index {
  build() {
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')
  }
}

HorizontalAlign.End：子元素在水平方向右对齐


@Entry
@Component
struct Index {
  build() {
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')
  }
}

Row容器内人元素在笔直方向上的摆放

VerticalAlign.Top：子元素在笔直方向顶部对齐。

@Entry
@Component
struct Index {
  build() {
   // VerticalAlign.Center：子元素在笔直方向居中对齐
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')
  }
}

VerticalAlign.Center：子元素在笔直方向居中对齐


@Entry
@Component
struct Index {
  build() {
   // VerticalAlign.Bottom：子元素在笔直方向底部对齐。
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).alignItems(VerticalAlign.Center).backgroundColor('rgb(242,242,242)')
  }
}

VerticalAlign.Bottom：子元素在笔直方向底部对齐

@Entry
@Component
struct Index {
  build() {
  // VerticalAlign.Bottom：子元素在笔直方向底部对齐
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')
  }
}

布局子元素在主轴上的摆放方法

在布局容器内，能够经过justifyContent特点设置子元素在容器主轴上的摆放方法。能够从主轴起始位置开端排布，也能够从主轴结束位置开端排布，或许均匀分割主轴的空间

Column容器内人元素在主轴上的摆放

justifyContent(FlexAlign.Start)：元素在主轴方向首端对齐，第一个元素与行首对齐，一起后续的元素与前一个对齐


@Entry
@Component
struct Index {
  build() {
    //justifyContent(FlexAlign.Start)：元素在主轴方向首端对齐，第一个元素与行首对齐，一起后续的元素与前一个对齐
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)
  }
}

justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的间隔与最终一个元素与行尾间隔相同。


@Entry
@Component
struct Index {
  build() {
  //justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的间隔与最终一个元素与行尾间隔相同
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)
  }
}

justifyContent(FlexAlign.End)：元素在主轴方向尾部对齐，最终一个元素与行尾对齐，其他元素与后一个对齐

@Entry
@Component
struct Index {
  build() {
  //justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素与行首对齐，最终一个元素与行尾对齐
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)
  }
}

justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素与行首对齐，最终一个元素与行尾对齐。


@Entry
@Component
struct Index {
  build() {
  //justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素与行首对齐，最终一个元素与行尾对齐
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)
  }
}

justifyContent(FlexAlign.SpaceAround)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素到行首的间隔和最终一个元素到行尾的间隔是相邻元素之间隔离的一半。

@Entry
@Component
struct Index {
  build() {
    //justifyContent(FlexAlign.SpaceAround)：主轴方向均匀分配元素，相邻元素之间隔离相同。
    // 第一个元素到行首的间隔和最终一个元素到行尾的间隔是相邻元素之间隔离的一半。
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)
  }
}

justifyContent(FlexAlign.SpaceEvenly)：主轴方向均匀分配元素，相邻元素之间的间隔、第一个元素与行首的间隔、最终一个元素到行尾的间隔都彻底相同。

@Entry
@Component
struct Index {
  build() {
  //justifyContent(FlexAlign.SpaceEvenly)：主轴方向均匀分配元素，
    // 相邻元素之间的间隔、第一个元素与行首的间隔、最终一个元素到行尾的间隔都彻底相同
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)
  }
}

Row容器内人元素在主轴上的摆放

justifyContent(FlexAlign.Start)：元素在主轴方向首端对齐，第一个元素与行首对齐，一起后续的元素与前一个对齐


@Entry
@Component
struct Index {
  build() {
    //justifyContent(FlexAlign.Start)：元素在主轴方向首端对齐，第一个元素与行首对齐，一起后续的元素与前一个对齐。
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)
  }
}

justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的间隔与最终一个元素与行尾间隔相同


@Entry
@Component
struct Index {
  build() {
   // justifyContent(FlexAlign.Center)：元素在主轴方向中心对齐，第一个元素与行首的间隔与最终一个元素与行尾间隔相同
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)
  }
}

justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素与行首对齐，最终一个元素与行尾对齐。


@Entry
@Component
struct Index {
  build() {
   // justifyContent(FlexAlign.End)：元素在主轴方向尾部对齐，最终一个元素与行尾对齐，其他元素与后一个对齐。
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)
  }
}

justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素与行首对齐，最终一个元素与行尾对齐

@Entry
@Component
struct Index {
  build() {
    //justifyContent(FlexAlign.Spacebetween)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素与行首对齐，最终一个元素与行尾对齐
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)
  }
}


@Entry
@Component
struct Index {
  build() {
  //justifyContent(FlexAlign.SpaceAround)：主轴方向均匀分配元素，相邻元素之间隔离相同。第一个元素到行首的间隔和最终一个元素到行尾的间隔是相邻元素之间隔离的一半
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)
  }
}

justifyContent(FlexAlign.SpaceEvenly)：主轴方向均匀分配元素，相邻元素之间的间隔、第一个元素与行首的间隔、最终一个元素到行尾的间隔都彻底相同

@Entry
@Component
struct Index {
  build() {
    //justifyContent(FlexAlign.SpaceEvenly)：主轴方向均匀分配元素，相邻元素之间的间隔、第一个元素与行首的间隔、最终一个元素到行尾的间隔都彻底相同。
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)
  }
}

最终总结

arkui 写法和flutter非常的像有兴趣的同学能够多尝试哈今天的文章就讲到这儿。最终呢期望我都文章能帮助到各位同学工作和学习假如你觉得文章还不错费事给我三连关注点赞和转发谢谢

鸿蒙 AkrUI 零基础教程第一集

前语

线性布局（Row/Column）

横向线性布局

纵向线性布局

基本概念

具体代码实现

横向线性布局

纵向线性布局

布局子元素在穿插轴上的对齐方法

Row容器内人元素在笔直方向上的摆放

布局子元素在主轴上的摆放方法

Column容器内人元素在主轴上的摆放

Row容器内人元素在主轴上的摆放

最终总结

相关文章

三思系列：Glide 4.X加载过程一文掌握 | Glide（二）

透彻！android binder机制原来是这样的

Android一些项目知识点整理

湖仓一体架构在火山引擎 LAS 的探索与实践

作者信息