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

news2024/10/6 21:36:05

一、鸿蒙开发环境搭建

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

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

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

相关文章

Java网络编程（JavaWeb的基础）

Java网络编程（JavaWeb的基础）

Java网络编程&#xff08;JavaWeb的基础&#xff09; 文章目录 Java网络编程&#xff08;JavaWeb的基础&#xff09;前言一、网络编程概述1.1 软件架构&网络基础1.2 网络通信要素:IP/端口/通信协议1.3 传输层协议:tcp/udp 二、网络编程API2.1 InetAddress类2.2 Socket类&am…
阅读更多...
收银系统开源源码-千呼新零售2.0【打折促销】

收银系统开源源码-千呼新零售2.0【打折促销】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…
阅读更多...
操作系统——考研笔记（一）操作系统概述

操作系统——考研笔记（一）操作系统概述

目录 操作系统引言一、 操作系统概述1.1 操作系统的功能和目标1.2 操作系统的特征1.2.1 并发1.2.2 共享1.2.3 并发和共享的关系1.2.4 虚拟1.2.5 异步1.2.6 知识回顾与重要考点 1.3 操作系统的发展与分类1.3.1 手工操作阶段1.3.2 批处理阶段——单道批处理系统1.3.3 批处理阶段—…
阅读更多...
2024年最佳软件测试工具40强清单（非常详细）零基础入门到精通，收藏这一篇就够了

2024年最佳软件测试工具40强清单（非常详细）零基础入门到精通，收藏这一篇就够了

什么是测试工具 软件测试工具是指那些支持从计划、需求收集、构建创建、测试执行、缺陷记录到测试分析等各种测试活动的产品。这些工具主要用于检测软件的稳定性、彻底性以及其他性能参数。 市场上有大量的软件测试工具&#xff0c;众多选择使得难以确定最适合你项目的测试工…
阅读更多...
项目开发 TCP-Socket连接功能实现（Android端）

项目开发 TCP-Socket连接功能实现（Android端）

前段时间在公司做项目的时候遇到了一个功能需要使用TCP-Socket连接硬件设备进行通信&#xff0c;查了很多资料也只是关于HTTP-Socket相关的&#xff0c;没法满足项目的要求&#xff0c;后来查到一个相关的插件&#xff0c;现在有时间和大家分享一下。 项目简单介绍&#xff1a…
阅读更多...
python AI全栈工程师

python AI全栈工程师

python AI全栈工程师 前端&#xff1a;Streamlit Streamlit是一个开源的Python库&#xff0c;专为数据科学家和机器学习工程师设计&#xff0c;用于快速构建交互式用户界面。Streamlit功能强大、易于使用&#xff0c;特别适合数据科学家和机器学习工程师快速构建和部署交互式数…
阅读更多...
状态机模型——AcWing 1057. 股票买卖 IV

状态机模型——AcWing 1057. 股票买卖 IV

状态机模型 定义 动态规划中的算法状态机模型是一种用于描述算法执行过程中状态变化的模型。它由状态、事件、动作和转移组成。状态表示算法在某个时刻所处的情况&#xff0c;事件是导致状态发生变化的原因&#xff0c;动作是在状态变化时执行的操作&#xff0c;转移则定义了…
阅读更多...
1.2 离散LTI系统的时域分析

1.2 离散LTI系统的时域分析

目录 离散系统的定义 离散LTI系统的时域描述h[k] 离散系统的分类 线性与非线性系统 时变与非时变系统 因果与非因果系统 稳定与不稳定系统 例题 LTI——Linear and Time-invariant System 线性时不变系统 离散系统的定义 离散LTI系统的时域描述h[k] 离散系统的…
阅读更多...
关于“刘亦菲为什么无人敢娶”的问题❗❗❗

关于“刘亦菲为什么无人敢娶”的问题❗❗❗

关于“刘亦菲为什么无人敢娶”的问题&#xff0c; 实际上涉及到多个方面的因素&#xff0c; 以下是对这些因素的详细分析&#xff1a;1.事业心重&#xff1a;刘亦菲作为华语影视圈的知名女星&#xff0c;她的演艺事业非常成功&#xff0c; 这也意味着她将大量的时间和精力投…
阅读更多...
深圳网页设计收费情况

深圳网页设计收费情况

深圳是中国最具活力和发展速度最快的城市之一&#xff0c;随着经济的快速发展&#xff0c;各种行业都飞速发展&#xff0c;尤其是互联网行业。网页设计是互联网行业的重要组成部分&#xff0c;深圳的网页设计师数量也是非常庞大的。那么&#xff0c;深圳网页设计师的收费情况是…
阅读更多...
HarmonyOS ArkUi Tabs+TabContent+List实现tab吸顶功能

HarmonyOS ArkUi Tabs+TabContent+List实现tab吸顶功能

Demo效果 Entry Component struct StickyNestedScroll {State message: string Hello WorldState arr: number[] []scroller new Scroller()StyleslistCard() {.backgroundColor(Color.White).height(72).width("100%").borderRadius(12)}build() {Scroll(this.sc…
阅读更多...
Java 项目的构建工具 Maven

Java 项目的构建工具 Maven

Maven 一、Maven 简介二、Maven 安装配置1、Maven 下载安装2、Maven 配置 三、IDEA 集成 Maven四、Maven 依赖管理1、依赖配置2、依赖传递3、依赖范围4、生命周期 五、Maven 高级特性1、分模块设计与开发2、Maven 继承3、Maven 版本管理4、Maven 聚合5、私服 一、Maven 简介 M…
阅读更多...
[Centos7] 部署Zabbix5.0

[Centos7] 部署Zabbix5.0

目录 0 卸载 Zabbix1 准备工作1.1 关闭防火墙1.2 关闭SELinux1.3 重启服务器1.4 安装MySQL 2 配置 Zabbix yum 源2.1 安装zabbix的软件仓库配置包2.2 安装 Software Collections 仓库2.3 修改 Zabbix 仓库配置文件 3 安装 Zabbix3.1 遇到报错Requires: libmysqlclient.so.183.2…
阅读更多...
Verilog进行结构描述（二）：Verilog基本单元（primitives)

Verilog进行结构描述（二）：Verilog基本单元（primitives)

目录 1.Verilog基本单元2.基本单元的引脚 (pin)的可扩展性3.带条件的基本单元4.基本单元实例化 微信公众号获取更多FPGA相关源码&#xff1a; 1.Verilog基本单元 Verilog基本单元提供基本的逻辑功能&#xff0c;也就是说这些逻辑功能是预定义的&#xff0c;用户不需要再定义…
阅读更多...
爬虫-Python基础

爬虫-Python基础

一、Python环境的安装 1. 下载Python 访问Python官网: Welcome to Python.org点击downloads按钮&#xff0c;在下拉框中选择系统类型(windows/Mac OS/Linux等)选择下载最新版本的Python 2. 安装Python 双击下载好的Python安装包勾选左下角 Add Python 3.7 to PATH 选项&…
阅读更多...
超声波清洗机对眼镜有伤害吗？四大顶尖优品公认力作！

超声波清洗机对眼镜有伤害吗？四大顶尖优品公认力作！

超声波清洗机利用超声波在液体中产生的微小气泡爆炸&#xff0c;产生强大的冲击力&#xff0c;能够深入物品的各个角落&#xff0c;有效去除油污、灰尘和细菌。与传统的手工清洗相比&#xff0c;不仅清洁效率高&#xff0c;而且能够保护眼镜不受损伤&#xff0c;特别适合清洗眼…
阅读更多...
我国氮化硼市场规模逐渐扩大 市场集中度有望不断提升

我国氮化硼市场规模逐渐扩大 市场集中度有望不断提升

我国氮化硼市场规模逐渐扩大 市场集中度有望不断提升 氮化硼&#xff08;BN&#xff09;俗称为白石墨&#xff0c;是由硼原子和氮原子所构成的一种晶体材料&#xff0c;在常温条件下多表现为一种棕色或暗红色晶体。氮化硼具有导热性好、硬度大、熔点高、抗化学侵蚀性等优点&…
阅读更多...
室内蓝牙导航定位技术独特的优势

室内蓝牙导航定位技术独特的优势

随着科技的飞速发展&#xff0c;人们对定位服务的需求已经从室外扩展到了室内。传统的GPS定位技术在室外环境中表现出色&#xff0c;但在室内环境下&#xff0c;由于信号受到建筑物结构的遮挡和干扰&#xff0c;其定位效果大打折扣。因此&#xff0c;室内定位技术应运而生&…
阅读更多...
阿贝云免费虚拟主机与免费云服务器评测

阿贝云免费虚拟主机与免费云服务器评测

阿贝云作为一家知名的云服务提供商&#xff0c;其免费虚拟主机和免费云服务器备受用户青睐。免费虚拟主机提供了大量的资源和功能&#xff0c;在网站建设和运营中发挥了重要作用。用户可以轻松地搭建自己的网站&#xff0c;并享受稳定的服务。免费云服务器则为用户提供了更强大…
阅读更多...
白鲸开源中标人保集团2024年数据调度工具软件产品及服务采购项目

白鲸开源中标人保集团2024年数据调度工具软件产品及服务采购项目

近日&#xff0c;北京白鲸开源科技有限公司成功中标中国人民保险集团&#xff08;以下简称“中国人保”&#xff09;2024年数据调度工具软件产品及服务采购项目。此举将为中国人保提供高性能、高可用性、高扩展性和高安全性的一站式数据调度管理方案&#xff0c;大力推进中国人…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023