鸿蒙next教学-ArkUI（基于最新api12稳定版）

已于 2024-09-27 10:32:20 修改
阅读量287 收藏 9
点赞数 22
分类专栏： 鸿蒙 文章标签： harmonyos 华为
于 2024-09-27 10:11:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56760790/article/details/142586153
版权

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

目录

1. 基本介绍

2. ArkUI组件

2.1 ArkUI组件-Image

2.2 ArkUI组件-Text

2.3 ArkUI组件-TextInput

2.4 ArkUI组件-Button

2.5 ArkUI组件-slider

2.6 ArkUI组件-Row、Column

2.6.1 Row

2.6.2 Column

2.6.3 登录小案例

2.7 ArkUI组件-其他布局容器组件

2.7.1 Flex

2.7.2 绝对定位position

2.7.3 布局元素的组成

2.8 ArkUI组件-List

2.9 ArkUI组件-Scroll

3. 视频学习

1. 基本介绍

ArkUI（方舟开发框架）是一套构建鸿蒙应用界面的框架

ArkUI将组件大概分为这么几类

  • 基础组件：界面呈现的基础元素，如文字、图片、按钮等
  • 容器组件：控制布局排布，如Row行、Column列等
  • 绘制组件：画布、图形、渲染等
  • 动画组件
  • 安全组件
  • 自定义组件

........

布局思路：先排版，再放内容

官方地址：文档中心

组件使用：

  • 使用组件采用 组件名() 的语法
  • 有构造参数采用 组件名(参数)的语法
  • 组件里放置子组件采用 组件名() { 子组件的语法 } 的链式语法
  • 组件设置属性采用 组件名().width().height() 的语法
  • 组件又有属性又有子组件采用 组件名(){ ... 子组件 }.width().height() 的语法

容器组件语法：

容器组件(){

}

基本组件语法：

基本组件()

2. ArkUI组件

2.1 ArkUI组件-Image

作用：界面中展示图片

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

  • 加载本地图片方式

将图片放对应工程模块下面的resources下面的base里面的media

Image($r('app.media.文件名'))

  • 加载网络图片
Image('网络图片地址')

大家注意的是：你在预览器可能能看到加载成功的网络图片，但其实你少操作了一步，如果部署在模拟器或者真机上，是看不到网络图片的，加载出来的是空白，因为缺少权限，需要手动申请应用权限

使用网络图片时，需要申请权限ohos.permission.INTERNET

在module.json5文件中加上(也就是在module下面加上requestPermissions)

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "requestPermissions":[
      {
        "name" : "ohos.permission.INTERNET",
        "reason": "$string:reason",
        "usedScene": {
          "abilities": [
            "FormAbility"
          ],
          "when":"inuse"
        }
      }
    ],

2.2 ArkUI组件-Text

作用：显示一段文本

Text(content?: string | Resource , value?: TextOptions)

string格式，直接填写文本内容

Text('风景')

Resource格式，读取本地资源文件

Text($r('app.string.reason'))

添加文本属性

Text('风景')
  .fontSize(20)  // 字体大小
  .fontColor(Color.Blue)  // 字体颜色
  .fontWeight(FontWeight.Lighter) // 字体粗细
  .lineHeight(32) // 行高

2.3 ArkUI组件-TextInput

作用：单行文本输入框

TextInput(value?: TextInputOptions)

TextInputOptions对象说明

  • placeholder 设置无输入时的提示文本。
TextInput({placeholder:'请求输入手机号'})
  • text 设置输入框当前的文本内容
TextInput({text:'东林'})
  • controller8+ 设置TextInput控制器。

导入对象

controller: TextInputController = new TextInputController()

该对象可以设置输入光标的位置等

添加属性和事件

 TextInput({placeholder:'请输入密码'})
          .width(100) // 宽
          .height(30) // 高
          .type(InputType.Password) // 输入框类型
          .backgroundColor('#fff') // 背景色
          .onChange(value=>{
            console.log(value)
          })

InputType枚举说明

  • Normal 基本输入模式，无特殊限制。
  • Password 密码输入模式。
  • Email 邮箱地址输入模式
  • Number 纯数字输入模式。
  • PhoneNumber9+ 电话号码输入模式。
  • USER_NAME11+ 用户名输入模式。
  • NEW_PASSWORD11+ 新密码输入模式。
  • NUMBER_PASSWORD11+ 纯数字密码输入模式。
  • NUMBER_DECIMAL11+ 带小数点的数字输入模式。
  • URL12+ 带URL的输入模式。

2.4 ArkUI组件-Button

作用：按钮组件，可以创建不同样式的按钮

Button(label: ResourceStr, options?: ButtonOptions)

ButtonOptions类型值

  • type 描述按钮显示样式。默认值：ButtonType.Capsule
  • stateEffect 按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true
  • buttonStyle 描述按钮的样式和重要程度。默认值：ButtonStyleMode.EMPHASIZED
  • controlSize 描述按钮的尺寸。默认值：ControlSize.NORMAL
  • role 描述按钮的角色。默认值：ButtonRole.NORMAL

文字按钮

Button('点我')

自定义按钮，在Button内嵌套其他组件

Button(){
  Image($r('app.media.test')).width(50)
}

添加属性和事件

Button('点我')
  .width(100)
  .height(30)
  .type(ButtonType.Capsule)
  .onClick(()=>{
    console.log('我被点了')
  })

ButtonType按钮类型

2.5 ArkUI组件-slider

作用：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

Slider(options?: SliderOptions)

SliderOptions对象说明

  • value 当前进度值。
  • min 设置最小值。
  • max 设置最大值。
  • step 设置Slider滑动步长。
  • style 设置Slider的滑块与滑轨显示样式。
  • direction8+ 设置滑动条滑动方向为水平或竖直方向。
  • reverse8+ 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。
      Slider({
        min:0, // 最小值
        max:100, // 最大值
        value:40,  // 当前值
        step:10,  // 滑动步长
        style:SliderStyle.OutSet, // InSet
        direction:Axis.Horizontal, // Vertical
        reverse:false  // 是否反向滑动
      })
        .width('90%')
        .showTips(true)  // 是否展示value百分比提示
        .blockColor('#36d') // 滑块里面颜色
        .trackThickness(10) // 滑轨粗细
        .onChange(value=>{
          // 滑块值
        })

SliderStyle枚举说明

  • OutSet 滑块在滑轨上。
  • InSet 滑块在滑轨内。
  • NONE12+ 无滑块

2.6 ArkUI组件-Row、Column

Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列

2.6.1 Row

沿水平方向布局容器。

用法：Row(value?:{space?: number | string })

space 横向布局元素间距，默认0，单位vp

横向布局-采用Row

百分比说明： 鸿蒙的里面的百分比指的是相对当前父容器，并不是当前的手机屏幕

在写宽度高度时，直接写数字默认单位为vp虚拟像素，屏幕会进行适配。

属性：

alignItems 设置子元素在交叉轴方向的对齐格式

语法 alignItems(value: VerticalAlign)

VerticalAlign参数枚举

justifyContent 设置子组件在水平方向上的对齐格式

语法 justifyContent(value: FlexAlign)

FlexAlign参数枚举

api12还增加了一个属性

reverse 设置子组件在主轴（即水平方向）上的排列是否反转

语法：reverse(isReversed: Optional<boolean>)

@Entry
  @Component
  struct Index {
    build() {
      Column() {
        Row({space:15}){
          Text('第一个').width(100).height(100).backgroundColor(Color.Blue)
          Text('第二个').width(100).height(100).backgroundColor(Color.Yellow)
          Text('第三个').width(100).height(100).backgroundColor(Color.Pink)
        }.width('100%').height('100%').justifyContent(FlexAlign.Center)
          .alignItems(VerticalAlign.Center)
      }.width('100%').height('100%')
    }
  }

2.6.2 Column

沿垂直方向布局的容器

用法：Column(value?: {space?: string | number})

space 纵向布局元素垂直方向间距，默认0，单位vp

纵向布局-采用column

属性：

alignItems 设置子组件在水平方向上的对齐格式

语法：alignItems(value: HorizontalAlign)

参数HorizontalAlign：子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center

justifyContent 设置子组件在垂直方向上的对齐格式

语法：justifyContent(value: FlexAlign)

参数FlexAlign：子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start

reverse 设置子组件在主轴（即竖直方向）上的排列是否反转

语法：reverse(isReversed: Optional<boolean>)

@Entry
  @Component
  struct Index {
    build() {
      Column() {
        Column({space:15}){
          Text('第一个').width(100).height(100).backgroundColor(Color.Blue)
          Text('第二个').width(100).height(100).backgroundColor(Color.Yellow)
          Text('第三个').width(100).height(100).backgroundColor(Color.Pink)
        }.width('100%').height('100%').justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
      }.width('100%').height('100%')
    }
  }

总结：属性justifyContent 设置子元素在主轴方向的对其格式 参数是 FlexAlign枚举

属性alignItems 设置子元素在交叉轴（垂直主轴方向的轴）方向的对齐格式 Row 容器使用VerticalAlign枚举 Column容器使用HorizontalAlign枚举

2.6.3 登录小案例

实现应用登录界面的编写

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 华为账号登录
      Column({space:20}){
        TextInput({placeholder:'请输入手机号'})
          .width(300)
          .borderRadius(2)
        TextInput({placeholder:'请输入验证码'})
          .type(InputType.Password)
          .width(300)
          .borderRadius(2)

          Text('短信验证码登录').fontColor(Color.Blue).align(Alignment.Start).width('80%')

      }

      Button('登录')
        .width(300)
        .type(ButtonType.Normal)
        .borderRadius(10)
        .backgroundColor(Color.Red)
    }.justifyContent(FlexAlign.Center).width('100%').height('100%')
  }
}

2.7 ArkUI组件-其他布局容器组件

2.7.1 Flex

弹性布局 ，默认布局方向是主轴水平往右，交叉轴垂直向下（row)

语法：

Flex(value?: FlexOptions)

Flex(){
  Text('1').width(100).backgroundColor(Color.Blue)
  Text('2').width(100).backgroundColor(Color.Red)
  Text('3').width(100).backgroundColor(Color.Yellow)
  Text('4').width(100).backgroundColor(Color.Pink)
  Text('1').width(100).backgroundColor(Color.Blue)
  Text('2').width(100).backgroundColor(Color.Red)
  Text('3').width(100).backgroundColor(Color.Yellow)
  Text('4').width(100).backgroundColor(Color.Pink)
}

FlexOptions对象说明

官方文档：文档中心

2.7.2 绝对定位position

作用：控制组件位置，可以实现层叠效果

特点：

1、参照父组件左上角进行偏移

2、绝对定位后的组件不在占用自身原有位置

语法： .position(位置对象)

参数：{x:水平偏移量,y:垂直偏移量}

Text('测试').position({
  x:150,y:50
})

zIndex层级

作用：调正组件层级

语法: .zIndex(数字)

参数：取值为整数数字，取值越大，显示层级越高

@Entry
  @Component
  struct Index {
    build() {
      Column() {
        Text('测试').backgroundColor(Color.Red).width(100).height(200).position({x:0}).zIndex(1)
        Text('东林').backgroundColor(Color.Yellow).width(100).height(100).position({x:0})
      }.width('100%').height('100%')


    }
  }

2.7.3 布局元素的组成

内边距 padding

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

Text('测试').padding(20)  // 四个方向内边距都为20
Text('测试').padding({
  top:10,
  right:20,
  bottom:40,
  left:80
})  // 四个方向内边距分别设置

外边距 margin

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

// 四个方向外边距都是20
Text('外边距').margin(20)
// 四个方向外边距分别设置
Text('外边距').margin({
  top:20,
  right:30,
  left:50,
  bottom:100
})

2.8 ArkUI组件-List

list(列表)包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

特点:

1、列表项（ListItem）数量过多超过屏幕后，会自动提供滚动功能

2、列表项既可以纵向排列，也可以横向排列

注意：列表项里面只能包含一个根组件

语法：

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

参数说明：

space：子组件主轴方向的间隔，默认值：0

initialIndex：设置当前List初次加载时视口起始位置显示的item的索引值，默认值：0

scroller：可滚动组件的控制器。用于与可滚动组件进行绑定

属性方法：

listDirection(value: Axis) 设置List组件排列方向。

@Entry
@Component
struct Index {
  @State message: string = '你是谁';

  build() {
    Column() {
      List({space:10}){
        ForEach([1,2,3,4,5,6,7,8,9,10],(item:number)=>{
          ListItem(){
            Text('哈哈')
              .width('100%')
              .height(100)
              .backgroundColor(Color.Red)
              .padding({left :150})

          }
        })
      }.width('100%').listDirection(Axis.Vertical)
    }.width('100%').height('100%')
  }
}

2.9 ArkUI组件-Scroll

可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

语法：Scroll(scroller?: Scroller)

属性:

在基本的布局组件 Column/Row/Flex中不论内容超出与否，皆不会出现滚动条

出现滚动条的组件

  • List(列表)
  • Grid
  • Scroll(滚动条)
  • Swiper(轮播)
  • WaterFlow(瀑布流)

出现滚动条的前提条件是- 上述组件中的子组件的内容超出了父容器组件的宽度或者高度

用法说明：

1、只支持一个子组件

2、滚动方向（支持横向和纵向，默认纵向）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Scroll() {
        Column({space:10}){
          ForEach(Array.from({length:10}),(item:string,index)=>{
            Text('测试文本'+(index+1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })

        }
      }.width('100%').height(200)
      .scrollBar(BarState.Auto)  // on一直显示 off一直隐藏 auto滑动显示
      .scrollBarColor(Color.Blue) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 设置边缘滑动效果  弹簧
    }
  }
}

3. 视频学习

全网首发鸿蒙NEXT星河版零基础入门到实战，2024年最新版，企业级开发！视频陆续更新中！_哔哩哔哩_bilibili

东林知识库
关注
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
鸿蒙next教学-ArkTS（基于最新api12稳定版）
最新发布
qq_56760790的博客
09-27 544
鸿蒙ArkTS的核心知识点学习：包含ArkTS基本介绍、ArkTS语法、ArkTS组件结构详细讲解
2024最新鸿蒙开发面试题合集(一)-HarmonyOS Next Developer Beta6（API 12）
qq_43313093的博客
08-24 2128
前端卷的不行，岗位也少，花了一个星期把HarmonyOS应用开发者基础认证和HarmonyOS应用开发者高级认证拿下了，但是是纯应付考试，实际开发经验还不足，网上搜也搜不到鸿蒙的面试题，有也是用AI瞎吉儿写的，不得已面了几家整理了下面试题和自己找的答案，除了概念性内容不要硬背，理解为主。希望鸿蒙开发能救我一条狗命吧/(ㄒoㄒ)/~~有大佬内推的请悄咪咪的联系我哦。
HarmonyOS应用开发者基础认证，Next版本发布后最新题库
热门推荐
Gusha_的博客
06-29 5万+
HarmonyOS应用开发者基础认证最新题库，编写于2024年6月30日，Next版本发布之后
跨Android、iOS、鸿蒙多平台框架ArkUI-X
2401_82772199的博客
01-31 1439
ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API，就能在Android、iOS、鸿蒙多个平台上提供生动而流畅的用户界面体验。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 答案纯享版
Gusha_的博客
07-24 2万+
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
HarmonyOS Next开发学习手册——JSVM-API（一）
maniuT的博客
07-30 496
HarmonyOS JSVM-API是基于标准JS引擎提供的一套稳定的ABI，为开发者提供了较为完整的JS引擎能力，包括创建和销毁引擎，执行JS代码，JS/C++交互等关键能力。通过JSVM-API，开发者可以在应用运行期间直接执行一段动态加载的JS代码。也可以选择将一些对性能、底层系统调用有较高要求的核心功能用C/C++实现并将C++方法注册到JS侧，在JS代码中直接调用，提高应用的执行效率。本文中如无特别说明，后续均使用JSVM-API指代HarmonyOS JSVM-API能力。
HarmonyOS Next开发学习手册——Node-API实现跨语言交互指南(一)
maniuT的博客
07-28 349
接口功能说明创建一个异步资源上下文环境（暂不支持与async_hook相关能力）。在异步资源上下文环境中回调JS函数(暂不支持与async_hook相关能力)。销毁先前创建的异步资源上下文环境（暂不支持与async_hook相关能力）。创建一个回调作用域（暂不支持与async_hook相关能力）。关闭先前创建的回调作用域（暂不支持与async_hook相关能力）。
HarmonyOS Next开发学习手册——Node-API接口进行错误处理开发
maniuT的博客
07-29 415
使用Node-API接口进行错误处理开发，使得在Node-API模块中能够更好地管理和响应错误情况。通过合理使用这些函数，可以提高模块的稳定性和可靠性。以下Node-API接口主要用于与ArkTS交互时处理错误和异常情况。接口描述在C/C++中需要创建一个错误对象时，可以使用这些函数。创建的错误对象可以使用napi_throw抛出到ArkTSnapi_throw。
鸿蒙应用ArkTS开发-实现登录注册功能
lovecspplon的博客
09-04 1350
HarmonyOS（鸿蒙操作系统）是华为公司开发的操作系统。它的设计初衷是为了应对当今多设备、多平台（1+8+N）的需求，为各种类型的设备提供一个统一的操作系统。：应用的全局配置信息，详见app.json5配置文件。entry：HarmonyOS工程模块，编译构建生成一个HAP包。：用于存放ArkTS源码。：应用/服务的入口。：应用提供扩展的备份恢复能力。：应用/服务包含的页面。：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
HarmonyOS 3.0.0开发者预览版全新发布
HarmonyOSDev的博客
11-23 1433
2021年10月22日在华为开发者大会HDC.Together 2021 主题演讲上，我们发布了HarmonyOS 3.0.0开发者预览版，主要内容包括：Harmony设计系统、ArkUI 3.0、ArkCompiler 3.0、DevEco Studio 3.0和TS/JS API 。 其中，HarmonyOS的UI开发框架从以Java为主要编程语言的命令式UI框架演进为以TypeScript（简称TS）/JavaScript（简称JS）为主要编程语言的声明式UI框架（ArkUI 3.0）。同时，A
HarmonyOS SDK，助力开发者打造焕然一新的鸿蒙原生应用
HarmonyOSDev的博客
01-19 1907
地图选点控件，提供统一地点选择和地点搜索能力，仅需1个API、约10行代码，即可降低开发者接入门槛，实现用户在地图上选择所需地点此类场景的使用体验。通过关键能力底层化，通用能力全局化，HarmonyOS SDK持续不断的创新，助力开发能够更加简单高效，释放开发者的创造力，打造焕然一新的鸿蒙原生应用。场景化控件通过把用户态常用的操作组合（包括但不限于UI、逻辑和数据）整合在一起，并对其进行针对性的性能优化、体验打磨，为开发者提供标准化服务控件，从而提升复杂场景的开发效率。
HarmonyOS第一课-应用程序框架基础习题答案
暴走哥丶AS
09-18 708
本题库为最新的HarmonyOS第一课的答案题库
HarmonyOS NEXT应用开发案例实践总结合集
weixin_55362248的博客
09-20 455
随着应用代码的复杂度提升，为了使应用有更好的可维护性和可扩展性，良好的应用架构设计变得尤为重要。本篇文章将整理出一个应用通用架构的设计思路，以减少模块间的耦合、提升团队开发效率，为开发者呈现一个清晰且结构化的开发框架。 本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计的方面介绍应用的架构组成。
harmonyos面试题
田兴的博客
09-24 389
你说你开发过项目，那么，开发鸿蒙项目流程是怎么样的?鸿蒙的刷新机制是怎么样的，多层嵌套时，是从构建开始刷新吗。页面的生命周期有哪些?UAbility的生命周期呢?对于一些公共的样式你是怎么傲的?你在项目中用过线程通信吗，线程是怎么进行通信的?如果方便的话，简单介绍并演示一下你做的项目?你现在用的是鸿蒙几的api和编辑器?你项目中调到了那些难点，如何解决的?弹室UI是怎么在页面UI中使用的。你是什么时候开始学习鸿蒙的?发布的应用用什么监控的日志呢。常用的修饰符有愿些介绍一下。你项目用到了鸿蒙那些功能?
【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器（下）
pixle的博客
09-23 719
HarmonyOS NEXT（鸿蒙应用）开发快速入门教程ArkTS语法之装饰器篇（下），基于HarmonyOS NEXT Beta1版本（api 12）讲解。
【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式&结构重用
Bew1tch的博客
09-24 1207
Swiper(){//1.轮播内容//2.设置尺寸（内容会自动拉伸）//tips：给外层设置宽高，未来的子元素都会进行统一的拉伸//定制小圆点Indicator.dot() //小圆点.itemWidth(20) //默认的宽.itemHeight(5) //默认的高.color(Color.Gray) //默认的颜色.selectedItemWidth(30) //选中的宽.selectedItemHeight(5) //选中的高。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值