鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

视频课免费课排行榜短视频直播课软考学堂

全部课程软考华为认证厂商认证 IT技术 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）原创

愚公搬代码

发布于 2023-12-22 23:02

883浏览

0收藏

最新收录于

愚公系列-HarmonyOS教学课程

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

文章目录

🚀前言
🚀一、Row/Column

🔎1.线性布局
🔎2.间距
🔎3.对齐方式

🦋3.1 水平对齐
🦋3.2 垂直对齐

🔎4.排列方式

🦋4.1 水平排列
🦋4.2 垂直排列

🔎5.自适应拉伸

🦋5.1 水平拉伸

🔎6.自适应缩放

🦋6.1 权重
🦋6.2 百分比

🔎7.Scroll组件自适应延伸

🦋7.1 列自适应延伸
🦋7.2 行自适应延伸

🚀二、登录案例

🚀前言

HarmonyOS的布局组件是一组用于构建用户界面布局的组件，包括线性布局、相对布局、网格布局等。这些组件帮助开发者以简单和灵活的方式管理和组织应用程序中的视图，并支持多种不同的设备屏幕尺寸和方向。使用HarmonyOS的布局组件可以提高应用程序的可读性和可维护性，并帮助快速构建适应不同设备的用户界面。

常见页面结构图：
#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区
不就元素组成：

🚀一、Row/Column

🔎1.线性布局

线性布局（LinearLayout）是一种常用的UI布局方式，通过线性容器 Row 和 Column 构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column 容器内子元素按照垂直方向排列，Row 容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用 Row 或 Column 容器创建线性布局。线性布局的优点是可以根据不同的排列需求创建灵活的布局，同时也方便管理子元素的位置和大小。

容器组件	排列方向	特点
Column	垂直	子元素按垂直方向排列
Row	水平	子元素按水平方向排列

Column容器内子元素排列示意图：
#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区
Row容器内子元素排列示意图：

🔎2.间距

Column({ space: 20 }) 
Row({ space: 35 })
1.
2.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🔎3.对齐方式

🦋3.1 水平对齐

Column({}) {}.alignItems(HorizontalAlign.Start)
1.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🦋3.2 垂直对齐

Column({}) {}.alignItems(VerticalAlign.Top)
1.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🔎4.排列方式

🦋4.1 水平排列

Column({}) {}.justifyContent(FlexAlign.Start)
1.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🦋4.2 垂直排列

Row({}) {}.justifyContent(FlexAlign.Start)
1.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🔎5.自适应拉伸

🦋5.1 水平拉伸

因为自适应一般是讲宽度，其实高度也行，但原理一样

Column({}) {}.width('100%')
1.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🔎6.自适应缩放

🦋6.1 权重

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

      Text('2:5:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(5)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🦋6.2 百分比

@Entry
@Component
struct WidthExample {
  build() {
    Column() {
      Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🔎7.Scroll组件自适应延伸

🦋7.1 列自适应延伸

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, item => item)
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🦋7.2 行自适应延伸

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Row() {
        ForEach(this.arr, (item) => {
          Text(item.toString())
            .height('90%')
            .width(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ left: 10 })
        })
      }.height('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Horizontal) // 滚动方向横向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

🚀二、登录案例

build() {
  Column({space:20}) {
    Image( 'logo .png')
    TextInput({placeholder:'用户名'})
    TextInput({placeholder:'密码'})
      .type(InputType.Password)
      .showPasswordIcon(true)
    Button('登录')
    Row(){
      Checkbox()
      Text('记住我')
        .fontColor('#36D')
    }
  }
  .height('100%')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

执行效果：

#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 005-ArkUI组件（Row/Column）-鸿蒙开发者社区

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2023-12-22 23:02:31修改

赞

收藏

回复

举报

回复

相关推荐

【2021年1月14日公开课】HarmonyOS组件的分布式适配和应用畅想

董昱 • 1.6w浏览 • 2回复
直播预告丨Hello HarmonyOS进阶系列课程重磅来袭，4月27日开播

HarmonyOS开发者 • 7770浏览 • 0回复
OpenHarmony社区运营报告（2022年11月）

OpenHarmony开发者 • 9712浏览 • 1回复
【结果公布】领航计划——2023年开源社区优质创作者激励

鸿蒙活动小助手 • 3.8w浏览 • 11回复
OpenHarmony社区运营报告（2023年2月）

OpenHarmony开发者 • 4271浏览 • 0回复
OpenHarmony社区运营报告（2023年3月）

OpenHarmony开发者 • 7478浏览 • 0回复
2023年《书友会》启航，欢迎推荐OpenHarmony/HarmonyOS技术书籍

鸿蒙活动小助手 • 7559浏览 • 5回复
#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 001-工具安装和Helloworld案例

愚公搬代码 • 9543浏览 • 0回复
#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 002-ArkTS语言（基本语法）

愚公搬代码 • 7163浏览 • 0回复
#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 003-ArkTS语言（状态管理）

愚公搬代码 • 7299浏览 • 0回复
#星计划#【愚公系列】2023年11月 HarmonyOS教学课程 004-ArkTS语言（渲染控制）

愚公搬代码 • 6423浏览 • 0回复
#星计划#浅谈ArkUI之Web组件的基础用法

董昱 • 7834浏览 • 4回复
#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件（Stack）

愚公搬代码 • 6415浏览 • 0回复
#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）

愚公搬代码 • 6057浏览 • 0回复
#星计划#HarmonyOS开发实例—蜜蜂AI助手

早起睡不够 • 8704浏览 • 3回复
#星计划#坚果的2023年终总结-激流勇进的一年

鸿蒙坚果 • 8152浏览 • 0回复
#星计划#鸿蒙跨平台框架来了ArkUI-X【坚果派-咸鱼】

翻生咸鱼 • 1.7w浏览 • 3回复
HarmonyOS NEXT ArkUI 容器组件 Column 与 Row

鱼弦CTO • 3000浏览 • 0回复
HarmonyOS开发：深入解析Column和Row布局的对齐方式与间距设置

小_铁 • 1731浏览 • 0回复

这个用户很懒，还没有个人简介

觉得TA不错？点个关注精彩不错过

帖子

视频

声望

粉丝

关注

最近发布

#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex） 2023-12-24 21:47:24发布
#星计划#【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件（Stack） 2023-12-23 23:00:30发布

热门推荐

【有奖互动活动】# HarmonyOS 连接·突破# 我在现场活动 96回复

#HarmonyOS连接·突破# 问题征集活动 40回复

鸿蒙Flutter开发知识地图 0回复

聊聊 2025 年最值得关注的 IT 技术趋势，一起来投票！ 11回复

鸿蒙性能优化之卡顿优化 1回复

相关问题

HarmonyOS应用开发系列官方课程有高级课程吗？ 3回答

HarmonyOS ArkUI中Column、Row、Flex组件中使用Blank不支持子组件 1回答

HarmonyOS row或column，子组件位置单独设置 1回答

Column组件中放了Row子组件，当Row中的内容过长时，会显示在Column以外的区域 1回答

如何获取当前的年、月、日？ 1回答

上一篇： #星计划#【愚公系列】2023年11月 HarmonyOS教学课程 004-ArkTS语言（渲染控制）

下一篇： #星计划#【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件（Stack）

社区精华内容

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载