HarmonyOS 界面开发基础篇

news2024/11/13 23:13:49

一、布局思路

ArkUI(方舟开发框架)是一套 构建 鸿蒙应用 界面 的框架。

构建页面的最小单位就是“组件”。

组件分类

  1. 基础组件：界面呈现的基础元素。
    如：文字、图片、按钮等。
  2. 容器组件：控制布局排布。
    如：Row行、Column列等。

布局思路

  1. 先排版、再放内容。
  2. build有且只能有一个根元素，且是容器组件

组件语法

  1. 容器组件：行Row、列Column
容器组件() {
  // 内容
}

  1. 基础组件：文字Text、图片
基础组件(参数)

案例

// 构建 → 界面
  build() {
    // 布局思路:先排版、再放内容
    Column() {
      // 内容
      Text('小说简介')
      Row(){
        Text('都市')
        Text('生活')
        Text('情感')
        Text('男频')
      }
    }
  }

二、组件的属性方法

需求：美化组件外观效果

组件() {
  .属性方法1(参数)
  .属性方法2(参数)
  .属性方法3(参数)
  ……
}

 // 构建 → 界面
  build() {
    // 布局思路:先排版、再放内容
    Column() {
      // 内容
      Text('小说简介')
        .width('100%')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .height(50)
      Row(){
        Text('都市')
          .width(50)
          .height(30)
          .backgroundColor(Color.Orange)
        Text('生活')
          .width(50)
          .height(30)
          .backgroundColor(Color.Pink)
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }

三、字体颜色

.fontColor(颜色值)

Text('小说简介')
  .fontColor(Color.Red)
  .fontColor('#df3c50')
build() {
  //   今日头条置顶新闻
    Column(){
      Text('学鸿蒙，就来汇潮学院~')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .height(50)
        Row(){
          Text('置顶')
            .fontColor('#c79286')
            .width(50)
          Text('新华社')
            .width(60)
            .fontColor(Color.Gray)
          Text('4680评论')
            .fontColor(Color.Gray)
        }
      .width('100%')
    }
    .width('100%')
  }

四、文字溢出省略号、行高

1.文字溢出省略号 （设置文本超长时的显示方式）

.textOverflow({
  overflow:TextOverflow.xxx
})

注意：需要配合 .maxLines(行数) 使用

Text('方舟...')
  .textOverflow({
    overflow({
      overflow:TextOverflow.Ellipsis
    })
    .maxLines(2)

2.行高

.lineHeight(数字)

3.案例

build() {
    Column(){
      Text('HarmonyOS 开发初体验')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .lineHeight(50)
      Text('ArkUI开发框架是方舟开发框架的简称，它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架，它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具，帮助开发者提升应用界面开发效率 30%，开发者只需要使用一套 TS / JS API，就能在多个 HarmonyOS / OpenHarmony 设备上提供既丰富又流畅的用户界面体验。')
        .width('100%')
        .lineHeight(24)
        .textOverflow({
          overflow:TextOverflow.Ellipsis
        })
        // 必须配合maxLines才有效果
        .maxLines(2)
    }
    .width('100%')
  }

五、Image 图片组件

作用：界面中展示图片

语法：Image(图片数据源) 支持 网络图片 和 本地图片资源

Column(){
  Image($r('app.media.图片))
}

  1. 网络图片的加载
Column(){
    Image('https://img-home.csdnimg.cn/images/20240711093848.png')
}

  1. 本地图片的加载
Column(){
    Image($r('app.media.product'))
}

六、输入框和按钮

1.输入框

TextInput(参数对象)
  .属方方法()

1.参数对象：placeholder 提示文本

2.属性方法：.type(inputType.xxx) 设置输入框type类型

type值

解释说明

Normal

基本输入模式，无特殊限制

Password

密码输入模式

TextInput({
  placeholder:'占位字符文本'
)}.type(InputType.Password)

2.按钮

Button('按钮文本')

3.案例

build() {
    // 控制组件间的距离，可以给Column 设置 {space : 值}
    Column({space : 20}){
      TextInput({
        placeholder:'输入账号'
      }).type(InputType.Normal)
      TextInput({
        placeholder:'输入密码'
      }).type(InputType.Password)
      Button('登录')
        .width(200)
        .fontSize(24)
    }
  }

七、布局元素的组成

1.内边距 padding

作用：在组件内 添加 间距，拉开内容与组件边缘之间的距离

Text('内边距padding')
  .padding(20) //四个方向内距均为20
Text('内边距padding')
  .padding({
    top:10,
    right:20,
    bottom:30,
    left:80
  })

2.外边距 margin

作用：在 组件外 添加 间距，拉开两个组件之间的距离

Text('外边距 margin')
  .margin(20) //四个方向内距均为20
Text('外边距 margin')
  .margin({
    top:10,
    right:20,
    bottom:30,
    left:80
  })//四个方向外边分别设置

3.综合案例

Column(){
      Image($r('app.media.cat'))
        .width(80)
        .height(80)
        .border({
          radius:50
        })
        .margin({
          top:50
        })
      Text('大三炒股')
        .margin({
          top:10,
          bottom:40
        })
      Button('QQ 登录')
        .width('90%')
        .margin({
          bottom:10
        })
      Button('微信登录')
        .width('90%')
        .backgroundColor('#dedede')
        .fontColor(Color.Black)

    }
    .width('100%')
    .height('100%')

4.边框 border

作用：给组件添加边界，进行装饰美化。

Text('边框 border'){
  .border({
    width:1,//宽度(必须设置)
    color:'#3274f6',//颜色
    style:BorderStyle.solid //样式
  )} //四个方向相同
Text('边框 border'){
  .border({
    width:{
      left:	1,right:2
    },
    color:{
      left:Color.Red,right:Color.Blue
    },
    style:{
      left:BorderStyle.Dashed,
      right:BorderStyle.Dotted
    }
  )}

5.设置组件圆角

属性：.borderRadius(参数)

参数：数值 或 对象

  • topLeft：左上角
  • topRight：右上角
  • bottomLeft：左下角
  • bottomRight：右下角
Text('圆角语法')
  .borderRadius(5) //四个圆角相同
  .borderRadius({
    topLeft:5,
    topRight:10,
    bottomLeft:15,
    bottomRight:20
    )} //四个方向圆角，单独设置

八、背景属性

1.背景图-backgroundImage

属性：.backgroundImage(背景图地址)

.backgroundImage($r('app.media.flower'))

2.背景图片的平铺方式

背景图片的平铺方式 ImageRepeat:(可省略)

  • NoRepeat：不平铺，默认值
  • X：水平平铺
  • Y：垂直平铺
  • XY：水平垂直均平铺
.backgroundImage($r('app.media.flower'),ImageRepeat.XY)

3.背景图片位置 - backgroundImagePostion

作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角

属性：.backgroundImagePostion(坐标对象 或 枚举)

参数：

  • 位置坐标：{x:位置坐标，y:位置坐标}
  • 枚举Alignment
// 位置坐标
.backgroundImagePostion({x:100,y:100})

// 枚举
.backgroundImagePostion(Alignment.Center)

4.背景图尺寸-backgroundImageSize

作用：背景图缩放

属性：.backgroundImageSize(宽高对象 或 枚举)

参数：

  • 背景图宽高：{width：尺寸，height：尺寸}
  • 枚举 ImageSize：
    Contain：等比例缩放背景图，当宽或高与组件尺寸相同停止缩放
    Cover：等比缩放背景图至图片完全覆盖组件范围
    Auto：默认，原图尺寸
// 位置坐标
.backgroundImageSize({width:100,height:100})

// 枚举
.backgroundImagePostion(ImageSize.Cover)

九、线性布局

线性布局通过线性容器 Column 和 Row 创建。

  • Column 容器：子元素 垂直方向 排列
  • Row 容器：子元素 水平方向 排列

1.排列主方向的对齐方式（主轴）

属性：.justifyContent(枚举FlexAlign)

2.交叉轴对齐方式

属性：alignItems()

参数：枚举类型

  • 交叉轴在水平方向：HorizontalAlign
  • 交叉轴在垂直方向：VerticalAlign

3.自适应伸缩

设置layoutWeight属性的 子元素 与 兄弟元素，会 按照权重 进行分配 主轴 的空间。

语法：.layoutWeight(数字)

Text('右侧')
    .layoutWeight(1)
    .height(50)
    .backgroundColor(Color.Orange)
Text('左侧')
    .width('20%')
    .height(50)
    .backgroundColor(Color.Pink)

十、弹性布局

  1. 主轴方向：direction
  2. 主轴对齐方式：justifyContent
  3. 交叉轴对齐方式：alignItems
  4. 布局换行：wrap
Flex(参数对象){
  子组件1
  子组件2
  子组件3
  子组件N
}


Flex({
      direction:FlexDirection.Row,
      justifyContent:FlexAlign.SpaceAround,
      alignItems:ItemAlign.Start
})

Flex默认主轴水平往右，交叉轴垂直往下

1.Flex换行 - wrap

wrap属性：Flex 是单行布局还是多行布局

  1. FlexWrap.NoWrap 单行布局
  2. FlexWrap.Wrap 多行布局
Flex({
  wrap:FLexWrap.Wrap
)}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1926523.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL篇：日志

MySQL篇：日志

前言 MySQL中常见的日志： 重做日志（Redo Log）： 用途： 保证事务的持久性，记录事务对数据库所做的所有修改。 内容： 记录事务对数据页的物理修改，而不是逻辑修改。 配置： …
阅读更多...
一款IM即时通讯聊天系统源码，包含app和后台源码

一款IM即时通讯聊天系统源码，包含app和后台源码

一款IM即时通讯聊天系统源码 聊天APP 附APP，后端是基于spring boot开发的。 这是一款独立服务器部署的即时通讯解决方案，可以帮助你快速拥有一套自己的移动社交、 企业办公、多功能业务产品。可以 独立部署！加密通道！牢牢掌握通…
阅读更多...
《C专家编程》杂谈

《C专家编程》杂谈

库函数调用和系统调用的区别 系统调用比函数调用要慢很多，因为还要切换到内核模式。
阅读更多...
防火墙综合实验之NAT和智能选路

防火墙综合实验之NAT和智能选路

目录 前言： 一、实验题目 二、实验操作 需求一 需求二 需求三 需求四、需求五 需求六 需求七 ​编辑 需求八 需求九 需求十 需求十一 三、需求测试 前言： 本篇文章是延续上一篇文章，简单来说就是防火墙实验的完善和延续&#…
阅读更多...
【CUDA】CUDA中缓存机制对计时的影响

【CUDA】CUDA中缓存机制对计时的影响

笔者在阅读知乎上一个关于CUDA编程的专栏时，发现作者写的很多文章中都会附带计时的模块用于评估程序的运行效率，然而笔者发现，在运行这篇文章中的代码时时，得到的结果和作者的结果有较大差异，主要体现在：使…
阅读更多...
《战甲神兵》开发者报告：游戏崩溃问题80%发生在Intel可超频酷睿i9处理器上——酷睿i7 K系列CPU也表现出高崩溃率

《战甲神兵》开发者报告：游戏崩溃问题80%发生在Intel可超频酷睿i9处理器上——酷睿i7 K系列CPU也表现出高崩溃率

在Intel持续面临第13代和第14代CPU崩溃问题的背景下，近日，《战甲神兵》(Warframe)的开发者们于7月9日披露了游戏崩溃的统计数据，并描述了诊断该问题的过程。根据开发团队的说法，一名未进行超频且使用全新PC的员工，即便…
阅读更多...
网络安全设备——EDR

网络安全设备——EDR

网络安全中的EDR（Endpoint Detection and Response，端点检测与响应）是一种主动式的端点安全解决方案，它专注于监控、检测和响应计算机和终端设备上的安全威胁。以下是EDR的详细解释： 一、定义与功能 EDR是一种网络安…
阅读更多...
【C++】入门基础（引用、inline、nullptr）

【C++】入门基础（引用、inline、nullptr）

目录 一.引用 1.引用的定义 2.引用的特性 3.引用的使用场景 4.const引用 5.引用和指针的区别 二.inline 三.nullptr 一.引用 1.引用的定义 引用不是新定义一个变量，而是给已经存在的变量取一个别名，编译器不会给引用变量开辟内存空间&#xff0c…
阅读更多...
（实测可用）（3）Git的使用——RT Thread Stdio添加的软件包，github与gitee冲突造成无法上传文件到gitee

（实测可用）（3）Git的使用——RT Thread Stdio添加的软件包，github与gitee冲突造成无法上传文件到gitee

★硬件资源：本文章以STM32L431RCT6做主控芯片做验证； ★IDE开发环境：RT Thread stdio； ★RT Thread 版本：V4.0.3 一、RT Thread Stdio加载软件包 1、如下图所示，通过RT Thread Stdio加载的软件包&#…
阅读更多...
[FPGA]-时序传输模型分析

[FPGA]-时序传输模型分析

时序传输模型分析 FPGA内部时钟树 clk到达每个寄存器的时间不一致。 内部时钟树内部示意图如下所示： 在实际FPGA芯片内部，时钟到达每个寄存器的时钟偏差很小，但仍然存在；比如clk到达REG1花费时间0.2ns，到达REG6花费…
阅读更多...
【Linux】基于环形队列RingQueue的生产消费者模型

【Linux】基于环形队列RingQueue的生产消费者模型

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 前言 环形队列的概念及定义 POSIX信号量 RingQueue的实现方式 RingQueue.hpp的构建 Thread.hpp Main.cc主函数的编写 Task.hpp function包装器的使用 总结 前言…
阅读更多...
Torch-Pruning 库入门级使用介绍

Torch-Pruning 库入门级使用介绍

项目地址：https://github.com/VainF/Torch-Pruning Torch-Pruning 是一个专用于torch的模型剪枝库，其基于DepGraph 技术分析出模型layer中的依赖关系。DepGraph 与现有的修剪方法（如 Magnitude Pruning 或 Taylor Pruning）相结合…
阅读更多...
Python：setattr()函数和__setattr__()魔术方法

Python：setattr()函数和__setattr__()魔术方法

相关阅读 Pythonhttps://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 setattr()是一个python内置的函数，用于设置一个对象的属性值，一般情况下，可以通过点运算符(.)完成相同的功能，但是getat…
阅读更多...
[激光原理与应用-112]：南京科耐激光-激光焊接-焊中检测-智能制程监测系统IPM介绍 - 16 - 常见的产品指标

[激光原理与应用-112]：南京科耐激光-激光焊接-焊中检测-智能制程监测系统IPM介绍 - 16 - 常见的产品指标

目录 一、光学传感器技术指标：实时信号采集与信号处理 （1）适用激光器的功率范围宽： （2）感光范围：350nm~1750nm：从可见光到红外光 （3）信号类型&#xff1a…
阅读更多...
NSSCTF_RE（二）暑期

NSSCTF_RE（二）暑期

[CISCN 2021初赛]babybc LLVM是那个控制流平坦化混淆，bc是IR指令文件 得到64位elf文件 然后就慢慢分析，感觉太妙了我靠 一个数独游戏，用二个二维数组添加约束，一个二维数组作地图，慢慢看 最后用 z3 来解数独&#xf…
阅读更多...
k8s快速部署一个网站

k8s快速部署一个网站

1）使用Deployment控制器部署镜像： kubectl create deployment web-demo --imagelizhenliang/web-demo:v1 kubectl get deployment,pods[rootk8s-matser ~]# kubectl get pods NAME READY STATUS RESTARTS A…
阅读更多...
25届平安产险校招测评IQ新16PF攻略：全面解析与应试策略

25届平安产险校招测评IQ新16PF攻略：全面解析与应试策略

尊敬的读者，您好。随着平安产险校招季的到来，许多应届毕业生正积极准备着各项测评。本文旨在提供一份详尽的测评攻略，帮助您更好地理解平安产险的校招测评流程，以及如何有效应对。 25届平安产险平安IQ（新）测…
阅读更多...
Java 设计模式系列：外观模式

Java 设计模式系列：外观模式

简介 外观模式（Facade Pattern）是一种设计模式，又名门面模式，是一种通过为多个复杂的子系统提供一个一致的接口，而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口，外部应用程序不用关心内部…
阅读更多...
2024-07-14 Unity插件 Odin Inspector2 —— Essential Attributes

2024-07-14 Unity插件 Odin Inspector2 —— Essential Attributes

文章目录 1 说明2 重要特性2.1 AssetsOnly / SceneObjectsOnly2.2 CustomValueDrawer2.3 OnValueChanged2.4 DetailedInfoBox2.5 EnableGUI2.6 GUIColor2.7 HideLabel2.8 PropertyOrder2.9 PropertySpace2.10 ReadOnly2.11 Required2.12 RequiredIn（*）2.…
阅读更多...
基于Python thinker GUI界面的股票评论数据及投资者情绪分析设计与实现

基于Python thinker GUI界面的股票评论数据及投资者情绪分析设计与实现

1.绪论 1.1背景介绍 Python 的 Tkinter 库提供了创建用户界面的工具，可以用来构建股票评论数据及投资者情绪分析的图形用户界面（GUI）。通过该界面，用户可以输入股票评论数据，然后通过情感分析等技术对评论进行情绪分析…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023