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

news2024/11/27 12:42:08

一、鸿蒙开发环境搭建

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/1851803.html

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

相关文章

mac电脑守护神CleanMyMac2024免费版本下载

mac电脑守护神CleanMyMac2024免费版本下载

&#x1f31f; 电脑的守护神&#xff1a;CleanMyMac&#x1f47e; 亲爱的数码控们&#xff0c;是不是每次看到电脑上满满的垃圾文件和缓慢的运行速度就感到头疼呢&#xff1f;别怕&#xff0c;今天我要来给你们安利一款神奇的小帮手——CleanMyMac&#xff01;它可是我们电脑的…
阅读更多...
class中的溢出滑动效果

class中的溢出滑动效果

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style>*{margin: 0;padding: 0;}.frame-pages{width: 30%;height: 60px;display: flex;justify…
阅读更多...
【Android面试八股文】来说一说Activity,Window,View三者的联系和区别吧

【Android面试八股文】来说一说Activity,Window,View三者的联系和区别吧

文章目录 ActivityWindowView为什么需要 Window？Window和View的关系Activity与Window的关系示例流程图示总结扩展阅读在Android应用程序开发中， Activity、Window 和 View 是构建用户界面的核心组件。它们之间有着紧密的联系，但角色和职责各不相同。下面是对它们联系和区别…
阅读更多...
Pnpm：包管理的新星，如何颠覆 Npm 和 Yarn

Pnpm：包管理的新星，如何颠覆 Npm 和 Yarn

在探索现代 JavaScript 生态系统时&#xff0c;我们常常会遇到新兴技术的快速迭代和改进。其中&#xff0c;包管理工具的发展尤为重要&#xff0c;因为它们直接影响开发效率和项目性能。最近&#xff0c;pnpm 作为一种新的包管理工具引起了广泛关注。它不仅挑战了传统工具如 np…
阅读更多...
一键转换PDL至HTML，轻松驾驭文档格式，高效办公新纪元从此开启！

一键转换PDL至HTML，轻松驾驭文档格式，高效办公新纪元从此开启！

在信息爆炸的时代&#xff0c;文档格式繁多&#xff0c;如何高效处理这些文档成为了每个职场人士关注的焦点。现在&#xff0c;我们为您带来一款革命性的工具——一键转换PDL至HTML&#xff0c;让您轻松驾驭文档格式&#xff0c;开启高效办公新纪元&#xff01; 首先&#xff0…
阅读更多...
“论SOA在企业集成架构设计中的应用”必过模板，软考高级，系统架构设计师论文

“论SOA在企业集成架构设计中的应用”必过模板，软考高级，系统架构设计师论文

论文真题 企业应用集成(Enterprise Application Integration, EAI)是每个企业都必须要面对的实际问题。面向服务的企业应用集成是一种基于面向服务体系结构(Service-OrientedArchitecture,SOA）的新型企业应用集成技术，强调将企业和组织内部的资源和业务功能暴露为服务，实现…
阅读更多...
【深度学习系列】全面指南：安装TensorFlow的CPU和GPU版本

【深度学习系列】全面指南：安装TensorFlow的CPU和GPU版本

本博客旨在为初学者提供一份全面的指南&#xff0c;介绍如何根据个人电脑的配置选择并安装适合的TensorFlow版本。内容涵盖了如何查看电脑显卡型号以确定是安装CPU还是GPU版本的TensorFlow&#xff0c;创建Python虚拟环境&#xff0c;以及使用conda命令查找可用的TensorFlow版本…
阅读更多...
34 - 指定日期的产品价格（高频 SQL 50 题基础版)

34 - 指定日期的产品价格（高频 SQL 50 题基础版)

34 - 指定日期的产品价格 -- row_number(行号) 生成连续的序号&#xff0c;不考虑分数相同 -- 在2019-08-16之前改的价格&#xff0c;使用最近一期的日期&#xff0c;没有在2019-08-16之前改的价格&#xff0c;默认价格为10 select t.product_id, t.new_price as price from (s…
阅读更多...
51单片机定时器中断配置

51单片机定时器中断配置

测试环境 单片机型号&#xff1a;STC8G1K08-38I-TSSOP20&#xff0c;其他型号请自行测试&#xff1b; IDE&#xff1a;Keil C51&#xff1b; 定时器配置及主要代码 以定时器T0为例&#xff0c;查看手册&#xff0c;有4种工作模式&#xff1a;模式0&#xff08;16位自动重装载…
阅读更多...
基于淘宝商城用户购物行为数据分析系统

基于淘宝商城用户购物行为数据分析系统

摘 要 在电商行业高速发展的今天&#xff0c;用户购物行为数据量呈指数型增长&#xff0c;传统的数据处理架构已经无法满足于现如今的数据处理需求。针对于这样的需求本课题设计了一种基于淘宝的用户购物行为分析系统&#xff0c;旨在通过对大量数据进行分析处理进而深入研究用…
阅读更多...
全国青少年人工智能创新挑战赛考试系统果然卡壳了

全国青少年人工智能创新挑战赛考试系统果然卡壳了

本比赛的官网地址是&#xff1a;http://aiic.china61.org.cn/niWXB 昨天考的全国青少年人工智能创新挑战赛的图形化编程卡的没有答题区&#xff0c;有的是空白&#xff0c;有的是组卷&#xff0c;大家先熟悉题目&#xff0c;构思怎么编程&#xff0c;两道编程题5050分值&#…
阅读更多...
对兼容各操作系统的Anki选择题模板的更新——提供更方便的笔记修改功能

对兼容各操作系统的Anki选择题模板的更新——提供更方便的笔记修改功能

2021年当我想做一个兼容各操作系统的Anki选择题模板的时候&#xff0c;到处搜索茧中网&#xff0c;根本找不到相关内容&#xff0c;直到偶然在github上看到Simon Lammer的Anki持久化模块&#xff0c;才算真正实现。现在再在茧中网上搜索兼容各种操作系统的Anki选择题模板&#…
阅读更多...
剖析 Kafka 消息丢失的原因

剖析 Kafka 消息丢失的原因

文章目录 前言一、生产者导致消息丢失的场景场景1&#xff1a;消息体太大解决方案 &#xff1a;1、减少生产者发送消息体体积2、调整参数max.request.size 场景2&#xff1a;异步发送机制解决方案 &#xff1a;1、使用带回调函数的发送方法 场景3&#xff1a;网络问题和配置不当…
阅读更多...
FineReport报表案例

FineReport报表案例

普通报表 保存的文件类型为 cpt&#xff0c;依靠着单元格的扩展与父子格的关系来实现模板效果&#xff0c;可进行参数查询&#xff0c;填报报表&#xff0c;图表设计等等&#xff0c;但是在分页预览模式下不能在报表主体中展示控件&#xff0c;而且单元格间相互影响&#xff0c…
阅读更多...
IDEA快速入门02-快速入门

IDEA快速入门02-快速入门

二、快速入门 2.1 打开IDEA,点击New一个项目 入口&#xff0c;依次打开 File -> New -> Project。 2.2 使用Spring Initializr方式构建Spring Boot项目 2.3 设置项目所属组、项目名称、java版本等 2.4 选择SpringBoot版本及依赖组件 点击Create进行创建。 2.6 创建成…
阅读更多...
【第一性原理】邓巴数字

【第一性原理】邓巴数字

这里写自定义目录标题 什么是邓巴数字邓巴数背后的科学历史上各个组织的人数与邓巴数字的关系在人类进化中的意义现代社会中邓巴数字的体现邓巴数字的意义其他与沟通相关的数据注意事项结论参考 罗宾邓巴教授生于1947年&#xff0c;进化心理学家&#xff0c;牛津大学教授&#…
阅读更多...
一种微弱故障特征增强的旋转机械故障诊断方法（MATLAB）

一种微弱故障特征增强的旋转机械故障诊断方法（MATLAB）

导致轴承失效的根本原因是由异常磨损和局部间的机械冲击所导致的。对轴箱轴承日常运转的下所产生的均匀磨损而言&#xff0c;其振动信号特征与正常轴承振动信号大致一样&#xff0c;随机性较强&#xff0c;其概率密度函数呈现出高斯分布的现象&#xff0c;但由于磨损所导致的不…
阅读更多...
C语言程序设计-2 程序的灵魂—算法

C语言程序设计-2 程序的灵魂—算法

【例 2.1】求 12345。 最原始方法&#xff1a; 步骤 1&#xff1a;先求 12&#xff0c;得到结果 2。 步骤 2&#xff1a;将步骤 1 得到的乘积 2 乘以 3&#xff0c;得到结果 6。 步骤 3&#xff1a;将 6 再乘以 4&#xff0c;得 24。 步骤 4&#xff1a;将 24 再乘以 5&#xf…
阅读更多...
Python自动化(2)——键盘模拟

Python自动化(2)——键盘模拟

Python自动化(2)——键盘模拟 前台键盘模拟 前台键盘模拟和后台键盘模拟的区别在于&#xff0c;是否绑定窗口。即前台模拟是只模拟键盘操作&#xff0c;例如按下按键a&#xff0c;如果聚焦在一个文本文档的编辑区&#xff0c;那么就会把这个a输入进去。但如果是聚焦到了浏览器…
阅读更多...
测试辅助工具(抓包工具)的使用1 之初识抓包工具（fiddler）

测试辅助工具(抓包工具)的使用1 之初识抓包工具（fiddler）

1.什么是抓包&#xff1f; 说明&#xff1a;客户端向服务器发送请求以及服务器响应客户端的请求,都是以数据包来传递的。 抓包&#xff08;packet capture&#xff09;&#xff1a;通过工具拦截客户端与服务器交互的数据包。 抓包后可以修改数据包的内容 2.为什么要抓包&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023