鸿蒙 AkrUI 零基础教程第一集

xq95272023-11-14 21:40

前言

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

线性布局（Row/Column）

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。这个比较像flutter里面线性布局 学过flutter的就比较容易理解

横向线性布局

纵向线性布局

基本概念

  • 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
  • 布局子元素：布局容器内部的元素。
  • 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为横向，Column容器主轴为纵向。
  • 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
  • 间距：布局子元素的间距。

具体代码实现

横向线性布局

scss 复制代码 
@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%')
  }
}

纵向线性布局

scss 复制代码 
@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：子元素在水平方向左对齐
less 复制代码 
@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：子元素在水平方向居中对齐

less 复制代码 
@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：子元素在水平方向右对齐
less 复制代码 
@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：子元素在垂直方向顶部对齐。
less 复制代码 
@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：子元素在垂直方向居中对齐
less 复制代码 
@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：子元素在垂直方向底部对齐
less 复制代码 
@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)：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐

less 复制代码 
@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)：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

less 复制代码 
@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)：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐
less 复制代码 
@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)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

less 复制代码 
@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)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

less 复制代码 
@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)：主轴方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

less 复制代码 
@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)：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐

less 复制代码 
@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)：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同

less 复制代码 
@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)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

less 复制代码 
@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)：主轴方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐

less 复制代码 
@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)
  }
}

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

less 复制代码 
@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)：主轴方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

less 复制代码 
@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非常的像 有兴趣的同学可以多尝试哈 今天的文章就讲到这里 。最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢

相关推荐
HwJack202 小时前
HarmonyOS响应式布局与窗口监听：让界面像呼吸般灵动的艺术
ubuntu·华为·harmonyos
王码码20353 小时前
Flutter 组件 inappwebview_cookie_manager 适配 鸿蒙Harmony 实战 - 驾驭核心大 Web 容器缓存隧道、构建金融级政企应用绝对防串号跨域大隔离基座
flutter·harmonyos·鸿蒙·openharmony·inappwebview_cookie_manager
左手厨刀右手茼蒿3 小时前
Flutter 组件 ews 的适配 鸿蒙Harmony 实战 - 驾驭企业级 Exchange Web Services 协议、实现鸿蒙端政企办公同步与高安通讯隔离方案
flutter·harmonyos·鸿蒙·openharmony
键盘鼓手苏苏3 小时前
Flutter 组件 spry 适配鸿蒙 HarmonyOS 实战：轻量化 Web 框架，构建高性能端侧微服务与 Middleware 治理架构
flutter·harmonyos·鸿蒙·openharmony
互联网散修4 小时前
鸿蒙应用开发：图片渐进式加载Canvas渲染案例分享
harmonyos·渐进式加载图片
Swift社区7 小时前
鸿蒙游戏里的 AI Agent 设计
人工智能·游戏·harmonyos
亚历克斯神7 小时前
Flutter 组件 t_stats 的适配 鸿蒙Harmony 实战 - 驾驭高性能统计学运算、实现鸿蒙端海量数据实时态势感知与工业级描述性统计方案
flutter·harmonyos·鸿蒙·openharmony·t_stats
键盘鼓手苏苏7 小时前
Flutter 组件 angel3_orm_mysql 的适配 鸿蒙Harmony 实战 - 驾驭专业 ORM 映射引擎、实现鸿蒙端与 MySQL 数据库的透明映射与高性能 SQL 审计方案
flutter·harmonyos·鸿蒙·openharmony·angel3_orm_mysql
左手厨刀右手茼蒿7 小时前
Flutter 组件 serverpod_swagger 的适配 鸿蒙Harmony 实战 - 驾驭 API 文档自动化、实现鸿蒙端全栈联调与 Swagger UI 动态审计方案
flutter·harmonyos·鸿蒙·openharmony·serverpod_swagger
钛态7 小时前
Flutter 三方库 discord_interactions 的鸿蒙化适配指南 - 在 OpenHarmony 打造高效的社交机器人交互底座
flutter·harmonyos·鸿蒙·openharmony·discord_interactions
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）07“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）08UV安装并设置国内源09中国象棋-html版本10OpenClaw 使用和管理 MCP 完全指南