当前位置：首页 > news >正文

开源 Arkts 鸿蒙应用开发（四）布局和常用控件

news 来源：原创 2025/6/19 7:24:23

文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发，公司安排开发app，临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。

相关链接：

开源 Arkts 鸿蒙应用开发（一）工程文件分析-CSDN博客

开源 Arkts 鸿蒙应用开发（二）封装库.har制作和应用-CSDN博客

开源 Arkts 鸿蒙应用开发（三）Arkts的介绍-CSDN博客

开源 Arkts 鸿蒙应用开发（四）布局和常用控件-CSDN博客

推荐链接：

开源 java android app 开发（一）开发环境的搭建-CSDN博客

开源 java android app 开发（二）工程文件结构-CSDN博客

开源 java android app 开发（三）GUI界面布局和常用组件-CSDN博客

开源 java android app 开发（四）GUI界面重要组件-CSDN博客

开源 java android app 开发（五）文件和数据库存储-CSDN博客

开源 java android app 开发（六）多媒体使用-CSDN博客

开源 java android app 开发（七）通讯之Tcp和Http-CSDN博客

开源 java android app 开发（八）通讯之Mqtt和Ble-CSDN博客

开源 java android app 开发（九）后台之线程和服务-CSDN博客

开源 java android app 开发（十）广播机制-CSDN博客

开源 java android app 开发（十一）调试、发布-CSDN博客

开源 java android app 开发（十二）封库.aar-CSDN博客

推荐链接：

开源C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客

开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-CSDN博客

开源 C# .net mvc 开发（三）WEB内外网访问(VS发布、IIS配置网站、花生壳外网穿刺访问)_c# mvc 域名下不可訪問內網,內網下可以訪問域名-CSDN博客

开源 C# .net mvc 开发（四）工程结构、页面提交以及显示_c#工程结构-CSDN博客

开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-CSDN博客

本章节内容如下：

1. 常用布局

2. 常用控件

一、常用布局

1.1 线性布局，子元素沿水平（Row）或垂直（Column）方向排列

// 水平排列
Row({ space: 10 }) {Text('Item 1').fontSize(16)Text('Item 2').fontSize(16)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)// 垂直排列
Column({ space: 20 }) {Text('Header').fontSize(24)Text('Content').fontSize(16)
}.padding(16)

1.2 弹性布局，支持动态调整子元素大小、对齐方式（justifyContent、alignItems）

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {Text('Item 1').width('30%').height(50).backgroundColor(0xF5DEB3)Text('Item 2').width('60%').height(50).backgroundColor(0xD2B48C)
}.width('100%').height('100%')

1.3 层叠布局，子元素可重叠（如模态框、浮动按钮）。

Stack() {Image('bg.jpg').width('100%').height('100%')Text('Overlay').fontSize(20).position({ x: '50%', y: '50%' })
}

1.4 栅格布局，支持网格化布局，适用于多列展示

@Entry
@Component
struct GridExample {@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green]build() {Column() {GridRow({columns: 4, // 4列布局gutter: {x: 10, y: 10} // 间距}) {GridCol({span: 1}) { // 每个子项占1列Row().width("100%").height("50vp")}.backgroundColor(Color.Red)GridCol({span: 1}) { // 每个子项占1列Row().width("100%").height("50vp")}.backgroundColor(Color.Orange)GridCol({span: 1}) { // 每个子项占1列Row().width("100%").height("50vp")}.backgroundColor(Color.Yellow)GridCol({span: 1}) { // 每个子项占1列Row().width("100%").height("50vp")}.backgroundColor(Color.Green)GridCol({span: 1}) { // 每个子项占1列Row().width("100%").height("50vp")}.backgroundColor(Color.Red)}}}
}

二、常用控件

常用控件通常有Text、Button、TextInput、Image、Progress、Radio、Toggle

综合实例

@Entry
@Component
struct GridExample {@State username: string = ''@State password: string = ''build() {Column({ space: 20 }) {Text('用户登录').fontSize(24).alignSelf(ItemAlign.Start)TextInput({ text: this.username, placeholder: '用户名' }).border({ width: 1, color: 0xD9D9D9 }).borderRadius(8)TextInput({ text: this.password, placeholder: '密码' }).type(InputType.Password).border({ width: 1, color: 0xD9D9D9 }).borderRadius(8)Button('登录').width('100%').backgroundColor(0x007DFF).onClick(() => console.log('Login clicked'))Image('https://fc1tn.baidu.com/it/u=3941267013,1794140007&fm=202&mola=new&crop=v1').objectFit(ImageFit.Cover).width(100).height(100)Progress({ value: 50, total: 100, type: ProgressType.Ring })// 单选框Radio({ value: 'Option 1', group: 'group1' })// 开关Toggle({ type: ToggleType.Switch, isOn: true })}.padding(24)}
}