AI 助理
文档备案控制台
开发者社区 云原生 文章 正文

鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段一

2024-07-30 1067
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HarmonyOS NEXT星河版的应用开发标志着华为分布式操作系统的全新篇章，它聚焦于打造原生精致、易用、流畅、安全、智能和互联的极致体验。开发者可以利用其先进的API和工具集，如DevEco Studio，构建高性能、跨设备无缝协同的应用程序，从而充分利用HarmonyOS的分布式能力，为用户带来一致且丰富的多场景数字生活体验。随着“学习强国”、岚图汽车、中国电信等知名企业和应用的加入，鸿蒙生态正迅速扩展，引领着原生应用开发的新趋势。

一、鸿蒙开发环境搭建

DevEco Studio安装
  1. 下载
  1. 访问官网：https://developer.huawei.com/consumer/cn/deveco-studio/
  2. 选择操作系统版本后并注册登录华为账号既可下载安装包
  1. 安装
  1. 建议：软件和依赖安装目录不要使用中文字符
  2. 软件安装包下载完成后，解压文件，双击软件安装包可执行程序，选择安装位置，下一步直到安装结束。
  3. 软件安装完成后，双击软件进入显示页面。

  1. 依赖安装
  1. node安装的两种模式：
  1. 使用本地安装的nod环境的
  2. 或者通过DevEco Studio进行安装（建议选择）
  3. 点击Next

  1. SDK安装
  1. 选择安装位置
  2. 点击Next

  1. 点击同意，再点击Next，开始进行依赖下载。

  1. 点击Finish，依赖下载完成

二、新建项目

  1. 第一次打开软件页面

  1. 点击create Project

  1. 选择空模板，点击下一步

  1. 填写项目信息并点击完成按钮，项目建立完成

  1. 点击右侧边栏previewer可以预览代码效果

三、ARkTS语言

1. 简介

ArkTS是HarmonyOS应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用

2. 日志打印

console.log("今天也是加油的一天。")

3. 基础数据类型、变量、常量

  1. 基础数据类型
// 三种常见的基础数据类型
// string 字符串
// number 数字
// boolean 布尔（真、假）
console.log(typeof "varin")
console.log(typeof 1)
console.log(typeof true)
console.log(typeof false)

  1. 变量
//用来存储数据的容器
// 命名规则：只能包含数字、字符、下划线、$，不能以数字开头；不使用关键字和保留字；区分大小写
// 语法: let 变量名: 类型 = 值
let name : string = "varin"
console.log(name)
// 修改值
name = 'a'
console.log(name)

  1. 常量
// 存储不可变的数据,强行修改会爆错
// 语法：const 变量名 :数据类型 = 值
const PI :number = 3.14
console.log("π：", PI)

4. 有序数组

// 语法: let 数组名：数据类型[] = [值1,值2]
let names:string[] = ["小明","小红","小美"]
//  打印数据中的所有值
console.log(names.toString())
// 修改names数组中下标为0的值
names[0]="小小明"
// 打印nams数组中下标为0的值
console.log(names[0])

5. 函数

简介：函数是特殊功能的可以重复使用的代码块

/*
定义函数
语法：
function 函数名(形参......){
}
调用函数语法：
函数名(实参)
*/
// 场景：传参打印不同数量的☆
function printStars(num:number){
  if(num<=0){
    return"数量错误"
  }
  let result:string  = ""
  for (let i = 0; i < num; i++) {
    result+="☆"
  }
 return result;
}
// 调用函数方式1
console.log(printStars(1))
console.log(printStars(3))
console.log(printStars(5))
// 调用函数方式2
let starss:string = printStars(6)
console.log(starss)

6. 箭头函数

简介：比普通的函数写法更加的简洁

/*
语法1:
()=>{
}
语法2：
#定义
let 函数名=(形参)=>{
 return 结果
}
#调用：函数名(实参)
*/
let printStars = (num:number)=>{
  let result :string = ""
  for (let i = 0; i < num; i++) {
    result+="☆";
  }
  return result;
}
console.log(printStars(1))
console.log(printStars(3))
console.log(printStars(5))
let starss:string = printStars(6)
console.log(starss)

7. 对象

简介：对象是用于描述物体的行为和特征，可以存储多种数据的容器。

/*
定义：
1 通过interface接口约定，对象的结构类型：
语法：
interface 接口名{
  属性1：类型
  属性2：类型
}
2 调用对象语法：
let 对象名:接口名={
  属性1：值
  属性1：值
}
*/
// 
interface Person{
  name:string
  age:number
  weight:number
}
let person :Person={
  name:'张三',
  age:11,
  weight:111.1
}
console.log(person.name)
console.log(person.age.toString())
console.log(person.weight.toString())

8. 对象方法

简介：描述对象的行为

/*
1、约定方法类型
语法：
interface 接口名{
  方法名：（形参）=>返回值类型
}
2、添加方法(箭头函数)
语法：
let 对象名：接口名={
  方法名：（形参）={
    方法体
  }
}
*/ 
interface Person {
  name:string,
  play:(type:string)=>void
}
let person : Person={
  name:'张三',
  play:(type:string)=>{
    console.log(person.name+"喜欢玩"+type+"类型的游戏")
  }
}
console.log(person.name)
person.play("创造")

9. 联合类型

简介：联合类型是一种灵活的数据类型，它修饰的变量可以存储不同类型的数据。

/*
  场景：一个变量既要存字符串也要存数字类型
  语法：let 变量：类型1 | 类型2| 类型3=值
*/
let result : number |string = 100
console.log(typeof result)
result = "A"
console.log(typeof result)

扩展：联合类型也可以限制数据在一个范围内

// 性别限制:值只能是man或woman，填写其他将会报错。
let gender: 'man'| "woman" = "man"

10. 枚举类型

简介：约定变量只能在一组数据范围内选择值

/*
定义语法：
enum 常量名{
常量1=值，
常量2=值，
}
调用语法：
常量名.常量1
*/
enum Colors{
  Red="#f00",
  Green="#0f0",
  Blue="#00f"
}
console.log(Colors.Red)
// 约束类型调用
let green :Colors = Colors.Green
console.log(green)

四、初识鸿蒙应用界面开发

1. Index.ets文件解读

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() { // 构建
    Row() { // 行
      Column() { // 列
        Text(this.message) // 文本
          .fontSize(12) // 字体大小
          .fontWeight(FontWeight.Bold) // 字体粗细
          .fontColor("red") // 字体颜色
      }
      .width('100%') // 列宽
    }
    .height('50px') // 行高
  }
}

2. 界面开发-布局思路

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

注意点:build只能有一个根元素，并且是容器组件

扩展：

  • ArkUI（方舟开发框架）是构建鸿蒙应用的界面框架
  • 构建页面的最小单位是：组件
  • 组件的分类
  • 基础组件：页面呈现的基础元素如：文字、图片、按钮等
  • 容器组件：控制布局排布，如：Row行，Column列等。

组件语法：

  1. 容器组件：Row、Column
容器组件(){
    
  }
  1. 基础组件：文字Text、图片
基础组件（参数）
  .参数方法（参数）

示例效果实现

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("小说简介")
        .textAlign(TextAlign.Start)
        .width("100%")
        .padding("20")
        .fontWeight(FontWeight.Bold)
      Row(){
        Text("都市")
          .textAlign(TextAlign.Start)
          .width("23%")
          .padding("5")
          .fontWeight(FontWeight.Bold)
          .backgroundColor("#f5f5f5")
          .margin("10px")
        Text("生活")
          .textAlign(TextAlign.Start)
          .width("23%")
          .padding("5")
          .fontWeight(FontWeight.Bold)
          .backgroundColor("#f5f5f5")
          .margin("10px")
        Text("情感")
          .textAlign(TextAlign.Start)
          .width("23%")
          .padding("5")
          .fontWeight(FontWeight.Bold)
          .backgroundColor("#f5f5f5")
          .margin("10px")
        Text("男频")
          .textAlign(TextAlign.Start)
          .width("23%")
          .padding("5")
          .fontWeight(FontWeight.Bold)
          .backgroundColor("#f5f5f5")
          .margin("10px")
      }.width("100%")
      .height("100px")
    }
  }
}

3. 组件的属性方法

  1. 组件方法使用
/*
组件（）{
  
}
.属性方法（参数）
.属性方法（参数）
*/
 Text("男频")
          .textAlign(TextAlign.Start)
          .width("23%")
          .padding("5")
          .fontWeight(FontWeight.Bold)
          .backgroundColor("#f5f5f5")
          .margin("10px")
  1. 通用属性
width()
height()
backgroundColor()
  1. 实现效果

// 初始结构代码
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("小说简介")
      Row(){
        Text("都市")
        Text("生活")
        Text("情感")
        Text("男频")
      }
    }
  }
}
// 实现效果代码
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("小说简介")
        .width("100%")
        .fontSize(18)
        .height(40)
        .fontWeight(FontWeight.Bold) // 100---900
      Row(){
        Text("都市")
          .width(50)
          .height(30)
          .backgroundColor(Color.Orange)
        Text("生活")
          .width(50)
          .height(30)
          .backgroundColor(Color.Pink)
        Text("情感")
          .width(50)
          .height(30)
          .backgroundColor(Color.Yellow)
        Text("男频")
          .width(50)
          .height(30)
          .backgroundColor(Color.Gray)
      }
      .width("100%")
    }
  }
}

4. 字体颜色

  1. 简介：给字体设置颜色
  2. 使用方法
  1. 使用Color枚举类
  2. 使用十六进制自己定义颜色
// 使用枚举类
Text("xx").fontColor(Color.Pink)
// 使用十六进制定义
Text("xx").fontColor("#f00")

实现效果

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("学鸿蒙")
        .width("100%")
        .height(30)
        .lineHeight(30)
        .fontWeight(500)
      Row()
      {
        Text("置顶")
          .width(30)
          .height(20)
          .fontSize(12)
          .fontColor("#ff910404")
        Text("新华社")
          .width(40)
          .height(20)
          .fontSize(12)
          .fontColor("#ff918f8f")
      }.width("100%")
    }
  }
}

5. 文字溢出省略号、行高

  1. 语法
/*
  溢出省略号语法，需要配合maxLines(行数)使用
*/ 
.textOverflow({
  overflow:TextOverflow:xxx
})
// 行高
.lineHeight(高度)
  1. 实现效果

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
      Column(){
        Text("Harmony OS开发")
          .height(50)
          .lineHeight(50)
          .width("100%")
          .fontSize(34)
          .fontWeight(FontWeight.Bold)
        Row(){
          Text("方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括境界的UI语法、丰富的")
            .maxLines(2)
            .textOverflow({
              overflow:TextOverflow.Ellipsis
            })
            .height(60)
            .lineHeight(30)
        }
      }
  }
}

6. 图片组件

  1. 语法
// 本地图片存放位置：src/main/resources/base/media
// 网络图片：使用url即可
Image(图片数据源)
// 引用图片写法：
Image($r("app.media.文件名"))
  1. 大致实现效果

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Image("https://p4.itc.cn/images01/20231117/8fc1311a803348288b8af7139f47c364.jpeg")
        .height(200)
        .width("100%")
        .borderRadius(10)
      Text("Harmony OS开发")
        .width("100%")
        .lineHeight(30)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
      Text("方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括境界的UI语法、丰富的")
        .maxLines(2)
        .textOverflow({
          overflow:TextOverflow.Ellipsis
        })
        .textIndent(20)
        .lineHeight(30)
      Row(){
        Image("https://p4.itc.cn/images01/20231117/8fc1311a803348288b8af7139f47c364.jpeg")
          .height(20)
          .width(20)
          .borderRadius(100)
        Text("Varin")
          .fontWeight(400)
          .width(40)
          .textAlign(TextAlign.End)
        Text("2024-06-22")
          .fontWeight(400)
          .width("80%")
          .fontColor("#ff797575")
          .textAlign(TextAlign.End)
      }
      .width("100%")
      .height(40)
    } .margin("1%")
  }
}

7. 输入框和按钮

  1. 语法
// 输入框
// 参数对象：placeholder 提示文本
// 属性方法：.type(InputType.xxx) 设置输入框的类型
TextInput(参数对象)
.属性方法（）
// 示例：
TextInput({
  placeholder:"占位符"
}).type(InputType.Password)
// 按钮语法
Button("按钮文本")
  1. 实现效果

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column() {
      TextInput({
        placeholder:"请输入用户名"
      }).width("96%")
        .height(60)
        .margin(10)
      TextInput({
        placeholder:"请输入密码"
      }).width("96%")
        .height(60)
        .margin(10)
        .type(InputType.Password)
      Button("登录")
        .width("50%")
    }
    .width("100%")
    .height(40)
  }
}

8. 控件之间的间隙

  1. 语法
// 控制Colunm 和Row内元素的间隙
Column({
  space:10
})

9. 综合-华为登录

实现效果图

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Row(){}
      .height(60)
        Image($r("app.media.hw"))
          .width(60)
          .height(60)
          .borderRadius(60)
      Column({space:20}){
        TextInput({
          placeholder:"请输入用户名"
        })
          .width("96%")
        TextInput({
          placeholder:"请输入密码"
        }).type(InputType.Password)
          .width("96%")
          Button("登录").width("96%")
      }.margin("2%")
      Row({space:10}){
        Text("前往注册")
        Text("忘记密码")
      }
    }
  }
}

10. SVG图标

介绍：SVG图标，任意放大缩小不失真，可以改颜色

  1. 语法
//  语法和Image类似
// .fillColor("#f00") 修改颜色
Image($r("app.media.ic_public_play_next"))
       .fillColor("#f00")
       .width(20)
       .width(20)

11. 布局元素


  1. 语法
/
*
  内边距：padding()
  外边距：margin()
  边框：border()
  *
/ 
// 1.padding使用
// 场景一：四边边距都一样
padding(10)
// 场景二：四边边距不一样
padding({
  top:10,
  right:1,
  bottom:11,
  left:23
})
// 2.margin使用
// 场景一：四边边距都一样
margin(10)
// 场景二：四边边距不一样
margin({
  top:10,
  right:1,
  bottom:11,
  left:23
})
// 3.border使用
// 场景一：四边边框都一样
 Text("aaa")
   .border({
     color:"#ff0", // 颜色
     width:1, // 必填
     radius:10, // 圆角
     style:BorderStyle.Solid // 边框类型：Solid（实线）
   })
// 场景二：四边边框不一样（只设置了右边框）
 Text("aaa")
   .border({
     color:"#ff0",
    width:{
      right:1
    },
     radius:10,
     style:BorderStyle.Solid
   })
  1. 实现效果一

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Row(){
      Row(){
        Image($r("app.media.ic_public_list_add_transparent"))
          .width(15)
          .height(15)
        Text("状态").fontColor("#ff7e7d7d").fontSize(12).margin({
          left:5,
          right:7
        })
      }.border({
        width:1,
        color:"#ffb1aeae",
        style:BorderStyle.Solid,
        radius:30
      }).margin({
        left:10,
        top:10
      }).padding(5)
      Row(){
        Image($r("app.media.hw"))
          .borderRadius(50)
          .width(15)
          .height(15)
        Image($r("app.media.hw"))
          .borderRadius(50)
          .width(15)
          .height(15)
          .margin({
            left:-5
          })
        Image($r("app.media.hw"))
          .borderRadius(50)
          .width(15)
          .height(15)
          .margin({
            left:-5
          })
        Text("3个朋友").fontColor("#ff7e7d7d")
          .fontSize(12)
          .margin({
            left:5
          })
        Row(){
        }.width(10)
        .height(10)
        .borderRadius(50)
        .backgroundColor("red")
        .margin({
          left:10,
          right:10
        })
      }.border({
        width:1,
        color:"#ffb1aeae",
        style:BorderStyle.Solid,
        radius:30
      }).margin({
        left:10,
        top:10
      }).padding(5)
    }
  }
}

  1. 实现效果二

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Image($r("app.media.hw")).borderRadius(50)
        .width(100)
        .height(100)
      Text("大王叫我来巡山").fontWeight(FontWeight.Bold).margin({
        top:10,
        bottom:50
      })
      Button("QQ登录").width("96%").margin({
        bottom:10
      })
      Button("微信登录").width("96%")
        .backgroundColor("#ffe5e5e5").fontColor("#000")
    }.margin({
      top:20,
      left:"2%",
      right:'2%'
    }).width("96%")

12. 组件圆角

  1. 语法
// borderRadius使用
// 场景一：四边都一样
borderRadius(10)
// 场景二：四边不一样
.borderRadius({
  topLeft:1,
  topRight:2,
  bottomLeft:1,
  bottomRight:2
})

13. 背景属性

  1. 语法
/*
背景色:backgroundColor
背景图:backgroundImage
背景图位置:backgroundOpsition
背景图尺寸:backgroundSize
*/
  1. 示例：背景图
/*
ImageRepeat：平铺枚举
*/ 
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("测试").backgroundImage($r("app.media.hw"),ImageRepeat.XY)
        .width("100%")
        .height("100%")
        .fontColor("red")
    }.padding(20)
  }
}

  1. 示例：背景图位置
/*
backgroundImagePosition（）
两种形式：
一、使用x,y轴
二、使用Alignment枚举类
*/ 
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("测试").backgroundImage($r("app.media.hw"))
        .backgroundColor(Color.Pink)
        .backgroundImagePosition(Alignment.Center)
        .width("100%")
        .height("100%")
        .fontColor("red")
    }.padding(20)
  }
}


  1. 示例：背景图大小
/*
  两种方式：
  方式一：
  backgroundSize({
  width:10,
  heigth:10
  
  }}
  方式二：
  使用枚举：ImageSize
*/

14. 背景定位-单位问题

  • 扩展：
  • 背景使用的单位是px（像素点）
  • 宽高默认单位：vp（虚拟像素），可以对不同设备会自动转换，保证不同设备视觉一致。
  • vp2px():可将vp进行转换，得到px的数值

15. 线性布局

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

  1. 语法
// column：垂直
// Row: 水平
  1. 排布主方向上的对齐方式
// 属性
.justifyContent(枚举FlexAlign)
// 枚举三个参数：Start(上) Center（中）End(下)

16. 布局案例-个人中心-顶部导航

  1. 实现效果

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
 Column(){
   Row(){
     Image($r("app.media.ic_arrow_left"))
       .width(20)
     Text("个人中心")
     Image($r("app.media.ic_more"))
       .width(20)
   }.height(40)
   .backgroundColor(Color.White)
   .width("100%")
   .padding(10)
   .justifyContent(FlexAlign.SpaceBetween)
   .border({
     width:{
       bottom:1
     },
     style:BorderStyle.Solid,
     color:"#ffe0e0dc"
   })
 }.width("100%")
    .height("100%")
    .backgroundColor("#ffe9e9e9")
  }
}


17. 线性布局-交叉轴对齐方式

// 属性：alignitems()
// 参数：枚举类型
// 交叉轴在水平方向：horizontalalign 
// 交叉轴在垂直方向：verticalalign
// Column>>>>h
//Row>>>>V

18. 案例-得物列表项展示

实现效果

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
   Column(){
     Row(){
       Column(){
         Text("玩一玩")
           .fontSize(20)
           .lineHeight(40)
           .fontWeight(FontWeight.Bold)
           .textAlign(TextAlign.Start)
         Row(){
           Text("签到兑礼")
             .fontColor("#ffaeacac")
             .fontSize(14)
           Text("|")
             .fontColor("#ffaeacac")
             .fontSize(14)
             .margin({
               left:5,
               right:5
             })
           Text("超多大奖")
             .fontColor("#ffaeacac")
             .fontSize(14)
           Text("超好玩")
             .fontColor("#ffaeacac")
             .fontSize(14)
         }
       }.alignItems(HorizontalAlign.Start)
       .margin({
         left:20
       })
       Image($r("app.media.cat"))
         .width(70)
         .borderRadius(10)
       Image($r("app.media.ic_arrow_right"))
         .fillColor("#ff858383")
         .width(30)
         .margin({
           right:15
         })
     }.justifyContent(FlexAlign.SpaceBetween)
     .width("100%")
     .height(100)
     .backgroundColor(Color.White)
     .border({
       color:"#fff3f2f2",
       width:1,
       radius:10,
       style:BorderStyle.Solid
     })
   }
   .width("100%")
    .height("100%")
    .padding(5)
    .backgroundColor("#f5f5f5")
  }
}

19. 自适应伸缩（权重分配）

  1. 语法
// 属性
.layoutWeight(权重分配)
  1. 示例
/*
一行 text3宽为固定值：50，
剩下的宽将分为5分
text1占1份
text2占4份
*/ 
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
   Row() {
     Text("1")
       .height(30)
       .layoutWeight(1)
       .backgroundColor("#f00")
     Text("2")
       .height(30)
       .layoutWeight(4)
       .backgroundColor("#0f0")
     Text("3")
       .height(30)
       .width(50)
       .backgroundColor("#00f")
   }.width("100%")
    .height(30)
  }
}

20. 案例-得物卡片

实现效果

import { Filter } from '@ohos.arkui.advanced.Filter';
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
   Column(){
     Column(){
       Text("每日艺术分享.......")
         .fontWeight(700)
         .height(40)
       Text("No.43")
         .height(20)
         .fontWeight(700)
       Row(){
         Image($r("app.media.cat"))
           .width(15)
           .height(15)
           .borderRadius(15)
         Text("插画师分享聚集地")
           .layoutWeight(1)
           .fontSize(12)
           .padding({
             left:5
           })
         Image($r("app.media.ic_like"))
           .width(10)
           .height(10)
           .fillColor("#ff8f8b8b")
         Text("2300")
           .fontColor("f5f5f5")
           .fontSize(12)
           .padding({
             left:5
           })
       }.height(40)
     }.alignItems(HorizontalAlign.Start)
     .padding(10).justifyContent(FlexAlign.End)
     .borderRadius(10)
     .width("70%")
     .backgroundImage($r("app.media.nick"))
     .backgroundImageSize({
       width:"100%",
       height:'70%'
     })
     .height(350)
     .backgroundColor(Color.White)
     .margin({
       top:10
     })
   }
     .width("100%")
     .height("100%")
    .backgroundColor("#ffcbc9c9")
  }
}

21. 案例-京东登录页

实现效果

/*
扩展：
checkBox:复选框
span组件，在一段文本中单独修改某些文本，可以使用span包裹
blank组件：弹簧组件，可以自动撑开row或colum的宽或高（填充空白区域）
*/
import { Filter } from '@ohos.arkui.advanced.Filter';
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Row(){
        Text("×")
          .fontSize(25)
        Text("帮助")
      }.width("100%")
      .justifyContent(FlexAlign.SpaceBetween)
      Image($r("app.media.jd_logo"))
        .width(250)
      // TextInput({placeholder:"国家/地址"})
      //   .backgroundColor(Color.White)
      Row(){
        Text("国家/地址").fontColor("#777").layoutWeight(1)
        Text("中国（+86）").fontColor("#777")
        Image($r("app.media.ic_arrow_right")).height(20).fillColor("#777")
      }.width("100%").height(50).borderRadius(20).backgroundColor(Color.White).padding({
        left:15,right:15
      })
      TextInput({placeholder:"请输入手机号"})
        .backgroundColor(Color.White)
        .margin({
          top:10
        })
      Row(){
        // 单选
        // Radio({
        //   value:'1',
        //   group:"1"
        // }).checked(false).backgroundColor(Color.White)
        // 复选
        Checkbox().width(10)
        Text(){
          Span("我已经阅读并同意")
          Span("《京东隐私政策》")
            .fontColor("#00f")
          Span("《京东用户服务协议》")
            .fontColor("#00f")
          Span("未注册的手机号将自动创建京东账号")
        }.fontSize(13).margin({top:3})
        //   Column({space:5}){
        //
        //     Text("我已经阅读并同意《京东隐私政策》 《京东用户服务协议》")
        //       .padding({top:12})
        //       .fontSize(11)
        //
        //
        //     Text("未注册的手机号将自动创建京东账号")
        //       .fontSize(11)
        //
        //   }.layoutWeight(1)
        // .alignItems(HorizontalAlign.Start)
      }.alignItems(VerticalAlign.Top).margin({top:25})
      // .backgroundColor("red")
      Button("登录")
        .width("100%")
        .backgroundColor("#ffc11010")
        .margin({
          top:15
        })
      Row(){
        Text("新用户注册")
          .fontSize(12)
          .fontColor("#666")
        Text("账号密码登录")
          .fontSize(12)
          .fontColor("#666")
        Text("无法登录")
          .fontSize(12)
          .fontColor("#666")
      }.width("100%")
      .padding(15).justifyContent(FlexAlign.SpaceEvenly)
      Blank()
     Column(){
       Text("其他登录方式").fontSize(14).margin({
         bottom:20
       })
       Row(){
         Image($r("app.media.jd_huawei")).width(32).borderRadius(16)
         Image($r("app.media.jd_wechat")).width(32).borderRadius(16).fillColor("#ff089408")
         Image($r("app.media.jd_weibo")).width(32).borderRadius(16).fillColor("#ffd41010")
         Image($r("app.media.jd_QQ")).width(32).borderRadius(16).fillColor("#ff05afcd")
       }.width("100%").justifyContent(FlexAlign.SpaceBetween).padding({
         left:20,right:20
       })
     }.margin({bottom:10})
    }.width("100%").height("100%").backgroundImage($r("app.media.jd_login_bg")).backgroundImageSize(ImageSize.Cover)
    .padding({
      left:15,
      right:15,
      top:10,
      bottom:20
    })
  }
}

文章标签：
容器
存储
开发者
安全
开发框架
关键词：
HarmonyOS next
APP鸿蒙
HarmonyOS开发
HarmonyOS next开发
HarmonyOS应用开发
varin
目录
相关文章
卓伊凡
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
831 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
|
5月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
710 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
探索云世界
|
5月前
|
人工智能 前端开发 JavaScript
最佳实践3：用通义灵码开发一款 App
本示例演示使用通义灵码，基于React Native与Node.js开发跨平台类通义App，重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程，体现灵码在全栈开发中的高效能力。（238字）
探索云世界
614 11
卓伊凡
|
5月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
276 0
岁月如酒
|
5月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度？
如何优化UniApp开发的App的启动速度？
岁月如酒
987 139
岁月如酒
|
5月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势？
UniApp开发的App在启动速度方面有哪些优势和劣势？
岁月如酒
474 137
体育数据Lynne
|
5月前
|
数据采集 JavaScript 前端开发
开发比分App？你缺的不是程序员
开发体育比分App，关键不在代码，而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源，再找专业的产品、数据与技术人才协同，才能少走弯路。程序员最后入场，效率最高。
体育数据Lynne
323 154
gooking
|
6月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用，从多端支持范围、核心功能模块及部分界面展示进行客观说明，相关资源信息也将一并呈现。
gooking
216 0
阿丘的记事本
|
8月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料？不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案，重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具，分析其适用场景与实际应用逻辑，为一线旅游从业者提供高效、低成本的执行参考。
阿丘的记事本
244 1

热门文章

最新文章

  • 1
    通过阿里云APP，可以进行ECS，RDS 等实例的管理
  • 2
    阿里云 Serverless App Engine(SAE)助力升学在线从容应对流量高峰
  • 3
    h5做的app和原生app的区别
  • 4
    Github 轻松斩获30k+ Star，桌面应用开发太丝滑啦，Tauri框架能重塑桌面App开发？别错过，抓紧上车
  • 5
    App逆向案例 X嘟牛 - Frida监听 & WT-JS工具还原（一）
  • 6
    『创意欣赏』20款精致的 iOS7 APP 图标设计
  • 7
    【Android App】利用腾讯地图获取地点信息和规划导航线路讲解及实战（附源码和演示视频 超详细必看）
  • 8
    开发嵌入京东app h5| Hybrid | 微信小程序 ｜ 实践踩坑总结十六条（下）
  • 9
    技术分享 | app测试中常用的Android模拟器
  • 10
    重新想象 Windows 8 Store Apps (25) - 选取器: 文件选取窗口, 文件夹选取窗口, 文件保存窗口
  • 1
    从“天书”到源码：HarmonyOS NEXT 崩溃堆栈解析实战指南
    642
  • 2
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    710
  • 3
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    276
  • 4
    【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    831
  • 5
    【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    932
  • 6
    HarmonyOS NEXT 5.0 的星闪（NearLink）开发应用案例
    881
  • 7
    鸿蒙应用开发从入门到实战（十六）：线性布局案例
    227
  • 8
    使用Tabs选项卡组件快速搭建鸿蒙APP框架
    499
  • 9
    鸿蒙应用开发从入门到实战（十四）：ArkUI组件Column&Row&线性布局
    527
  • 10
    鸿蒙应用开发从入门到实战（十三）：ArkUI组件Slider&Progress
    384

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考
    • 下一篇
    极速数仓ClickHouse步入云原生新纪元