鸿蒙 HarmonyOS NEXT星河版APP应用开发—上篇

一、鸿蒙开发环境搭建

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

image.png

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

image.png

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

image.png

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

image.png
image.png

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

image.png

二、新建项目

  1. 第一次打开软件页面

image.png

  1. 点击create Project

image.png

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

image.png

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

项目结构页面

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

image.png

三、ARkTS语言

简介

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

日志打印

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

image.png

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

  1. 基础数据类型
// 三种常见的基础数据类型
// string 字符串
// number 数字
// boolean 布尔（真、假）

console.log(typeof "varin")
console.log(typeof 1)
console.log(typeof true)
console.log(typeof false)

image.png

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

let name : string = "varin"
console.log(name)
// 修改值
name = 'a'
console.log(name)

image.png

  1. 常量
// 存储不可变的数据,强行修改会爆错
// 语法：const 变量名 :数据类型 = 值

const PI :number = 3.14
console.log("π：", PI)

image.png

有序数组

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

image.png

函数

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

/*
定义函数
语法：
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)

image.png

箭头函数

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

/*
语法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)

image.png

对象

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

/*
定义：
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())

image.png

对象方法

简介：描述对象的行为

/*
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("创造")

image.png

联合类型

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

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

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

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

image.png

枚举类型

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

/*
定义语法：
enum 常量名{
常量1=值，
常量2=值，

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

image.png

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

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') // 行高
  }
}

界面开发-布局思路

布局思路：先排版，再放内容。
注意点:build只能有一个根元素，并且是容器组件
扩展：

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

组件语法：

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

示例效果实现
image.png

@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")

    }

  }
}

image.png

组件的属性方法

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

image.png

// 初始结构代码
@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%")
    }

  }
}

image.png

字体颜色

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

实现效果
image.png

@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%")

    }

  }
}

image.png

文字溢出省略号、行高

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

image.png

@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)
        }
      }
  }
}

image.png

图片组件

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

image.png

@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%")
  }
}

image.png

输入框和按钮

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

// 按钮语法
Button("按钮文本")
  1. 实现效果

image.png

@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)
  }
}

image.png

控件之间的间隙

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

综合-华为登录

实现效果图
image.png

@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("忘记密码")
      }
    }
  }
}

image.png

SVG图标

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

  1. 语法
//  语法和Image类似
// .fillColor("#f00") 修改颜色

Image($r("app.media.ic_public_play_next"))
       .fillColor("#f00")
       .width(20)
       .width(20)

布局元素

  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. 实现效果一

image.png

@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)
    }
  }
}

image.png

  1. 实现效果二

image.png

@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%")

image.png

组件圆角

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

背景属性

  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)
  }
}

image.png

  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)
  }
}

image.png

  1. 示例：背景图大小
/*
  两种方式：
  方式一：
  backgroundSize({

  width:10,
  heigth:10
  
  }}
  方式二：
  使用枚举：ImageSize
*/

背景定位-单位问题

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

线性布局

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

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

image.png

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

  1. 实现效果

image.png

@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")
  }
}

image.png

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

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

// Column>>>>h
//Row>>>>V

案例-得物列表项展示

实现效果
image.png

@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")

  }
}

image.png

自适应伸缩（权重分配）

  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)

  }
}

image.png

案例-得物卡片

实现效果
image.png

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")
  }
}

image.png

案例-京东登录页

实现效果
image.png

/*
扩展：
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
    })

  }
}

image.png

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

HTML(19)——Flex

HTML(19)——Flex

Flex布局也叫弹性布局&#xff0c;是浏览器提倡的布局模型&#xff0c;非常适合结构化布局&#xff0c;提供了强大的空间分布和对齐能力。 Flex模型不会产生浮动布局中脱标现象&#xff0c;布局网页更简单、更灵活。 Flex-组成 设置方式&#xff1a;给父元素设置display:fle…
阅读更多...
以太坊==windows电脑本地搭建一个虚拟的以太坊环境

以太坊==windows电脑本地搭建一个虚拟的以太坊环境

提供不同的选择&#xff0c;适合不同需求和技术水平的开发者&#xff1a; Geth&#xff1a;适合需要与主网兼容或构建私有网络的开发者。Ganache&#xff1a;适合快速开发和测试智能合约的开发者&#xff0c;特别是初学者。Docker&#xff1a;适合需要快速、可重复搭建环境的开…
阅读更多...
四川汇聚荣科技有限公司靠谱吗？

四川汇聚荣科技有限公司靠谱吗？

在如今这个信息爆炸的时代&#xff0c;了解一家公司是否靠谱对于消费者和合作伙伴来说至关重要。四川汇聚荣科技有限公司作为一家位于中国西部地区的企业&#xff0c;自然也受到了人们的关注。那么&#xff0c;这家公司究竟如何呢?接下来&#xff0c;我们将从多个角度进行深入…
阅读更多...
c语言 课设 atm

c语言 课设 atm

功能需求分析 ATM功能主界面：显示所能进行的操作，用户可多次选择。 ATM注册界面：输入用户名，用户密码，确认密码，密码长度不是六位重新输入，两次密码不一致重新输入，输入账号。密码隐藏，实现退格换行对*无影响。多人注册 ATM登录界面：输入账号，密码，三次以内输入…
阅读更多...
NettyのFuturePromise、HandlerPipeline、ByteBuf

NettyのFuturePromise、HandlerPipeline、ByteBuf

本篇介绍Netty的剩下三个组件Future&Promise、Handler&Pipeline、ByteBuf 1、Future&Promise Future和Promise都是Netty实现异步的组件。 1.1、JDK中的future 在JDK中也有一个同名的Future&#xff0c;通常是配合多线程的Callable以及线程池的submit()方法使用&am…
阅读更多...
Rocky Linux 更换CN镜像地址

Rocky Linux 更换CN镜像地址

官方镜像列表&#xff0c;下拉查找 官方镜像列表&#xff1a;https://mirrors.rockylinux.org/mirrormanager/mirrorsCN 开头的站点。 一键更改镜像地址脚本 以下是更改从默认更改到阿里云地址 cat <<EOF>>/RackyLinux_Update_repo.sh #!/bin/bash # -*- codin…
阅读更多...
ChatTTS增强版V3【已开源】，长文本修复，中英混读，导入音色，批量SRT、TXT

ChatTTS增强版V3【已开源】，长文本修复，中英混读，导入音色，批量SRT、TXT

ChatTTS增强版V3来啦&#xff01;本次更新增加支持导入SRT、导入音色等功能。结合上次大家反馈的问题&#xff0c;修复了长文本、中英混读等问题。 项目已开源(https://github.com/CCmahua/ChatTTS-Enhanced) 项目介绍 V3 ChatTTS增强版V3&#xff0c;长文本修复&#xff0c…
阅读更多...
【职场人】职场进化记：我的“不惹人厌邀功精”之路

【职场人】职场进化记：我的“不惹人厌邀功精”之路

刚步入职场的我&#xff0c;就像一张白纸&#xff0c;什么都不懂&#xff0c;只知道埋头苦干。但渐渐地&#xff0c;我发现那些经常“冒泡”的同事似乎总能得到更多的关注和机会。我不禁想&#xff1a;“我是否也要成为那样一个‘邀功精’呢&#xff1f;” 不过&#xff0c;我…
阅读更多...
Go自定义数据的序列化流程

Go自定义数据的序列化流程

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
Apple - Launch Services Programming Guide

Apple - Launch Services Programming Guide

本文翻译整理自&#xff1a;Launch Services Programming Guide https://developer.apple.com/library/archive/documentation/Carbon/Conceptual/LaunchServicesConcepts/LSCIntro/LSCIntro.html#//apple_ref/doc/uid/TP30000999-CH201-TP1 文章目录 一、导言谁应该阅读此文档…
阅读更多...
Oracle基本语法（SQLPlus）

Oracle基本语法（SQLPlus）

目录&#xff1a; 前言&#xff1a; 准备工作&#xff1a; 登录&#xff1a; 1.打开SQL Plus命令行工具 第一种方式&#xff1a; 第二种方式&#xff1a; 2.以不同用户登录 SYSTEM&#xff08;普通管理员&#xff09;&#xff1a; SYS(超级管理员)&#xff1a; 不显示…
阅读更多...
二叉搜索树及其Java实现

二叉搜索树及其Java实现

二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称BST&#xff09;是一种特殊的二叉树数据结构&#xff0c;它满足以下特性&#xff1a; 有序性&#xff1a;对于树中的任意一个节点&#xff0c;其左子树中所有节点的值都小于该节点的值&#xff0c;而其右子树中所有节…
阅读更多...
Web Worker 学习及使用

Web Worker 学习及使用

了解什么是 Web Worker 提供了可以在后台线程中运行 js 的方法。可以不占用主线程&#xff0c;不干扰用户界面&#xff0c;可以用来执行复杂、耗时的任务。 在worker中运行的是另一个全局上下文&#xff0c;不能直接获取 Window 全局对象。不同的 worker 可以分为专用和共享&…
阅读更多...
FreeCAD中事务机制实现原理分析

FreeCAD中事务机制实现原理分析

1.基本实现思路 实现一个文件的撤销重做最简单的思想就是&#xff0c;在每个撤销重做节点处保存一份文件的内容&#xff0c;撤销重做时&#xff0c;分别替换对应节点处的文件内容即可。这种做法开销太大&#xff0c;每个节点处都需要保存一份完整的文档内容&#xff0c;每次撤…
阅读更多...
fastapi+vue3+primeflex前后端分离开发项目第一个程序

fastapi+vue3+primeflex前后端分离开发项目第一个程序

安装axios axios是用来请求后端接口的。 https://www.axios-http.cn/docs/intro pnpm 是一个前端的包管理工具&#xff0c;当我们需要给前端项目添加新的依赖的时候&#xff0c;就可以使用pnpm install 命令进行安装。 pnpm install axios安装 primeflex primeflex是一个cs…
阅读更多...
十大经典排序算法——插入排序与希尔排序(超详解)

十大经典排序算法——插入排序与希尔排序(超详解)

一、插入排序 1.基本思想 直接插入排序是一种简单的插入排序法&#xff0c;基本思想是&#xff1a;把待排序的记录按其数值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列。 2.直接插入排序 当插入第 e…
阅读更多...
（八）ReactHooks使用规则

（八）ReactHooks使用规则

ReactHooks使用规则 只能在组件中或者其他自定义Hook函数中使用只能在组件的顶层调用&#xff0c;不能嵌套在if、for、其他函数中
阅读更多...
模拟原神圣遗物系统-小森设计项目，设计圣遗物词条基类

模拟原神圣遗物系统-小森设计项目，设计圣遗物词条基类

项目分析 首先需要理解圣遗物的方方面面 比如说圣遗物主词条部分和副词条部分都有那些特点 稍等一会&#xff1a;原神&#xff0c;启动&#xff01; 在此说明了什么&#xff1f; 这是完全体 &#xff1a;主副 词条都有 如果 升级直接暴击率 那么就留点 或者是另外的元素充能 …
阅读更多...
如何自制一个Spring Boot Starter并推送到远端公服

如何自制一个Spring Boot Starter并推送到远端公服

在现代Java开发中&#xff0c;Spring Boot无疑是一个强大且便捷的框架&#xff0c;它通过提供大量的Starter来简化依赖管理和项目配置。有时&#xff0c;我们可能需要为特定功能或团队定制Starter。本文将指导你如何创建自己的Spring Boot Starter并将其推送到远程公共服务器上…
阅读更多...
[SAP ABAP] 运算符与操作符

[SAP ABAP] 运算符与操作符

1.算数运算符 算术运算符描述加法-减法*乘法/除法MOD取余 示例1 输出结果: 输出结果: 2.比较运算符 比较运算符描述示例 等于 A B A EQ B <> 不等于 A <> B A NE B >大于 A > B A GT B <小于 A < B A LT B >大于或等于 A > B A GE B <小…
阅读更多...
最新文章

Copyright @ 2022~2023