鸿蒙 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

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

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

相关文章

怎么打印加密的Excel文件，有哪些方法？

怎么打印加密的Excel文件，有哪些方法？

很多小伙伴都喜欢使用Excel来创建或是编辑表格文档&#xff0c;因为Excel中的功能十分的丰富且强大&#xff0c;在Excel中我们可以对表格文档进行各种操作。有的小伙伴可能在打印时需要给每一页表格添加页码&#xff0c;但又不知道该在哪里找到相关操作&#xff0c;其实很简单&…
阅读更多...
FFmpeg开发笔记（四十一）结合OBS与MediaMTX实现SRT直播推流

FFmpeg开发笔记（四十一）结合OBS与MediaMTX实现SRT直播推流

《FFmpeg开发实战&#xff1a;从零基础到短视频上线》一书的“10.2 FFmpeg推流和拉流”提到直播行业存在RTSP和RTMP两种常见的流媒体协议。除此以外&#xff0c;还有于2017年推出的SRT协议&#xff0c;相比常见的RTMP协议&#xff0c;SRT协议具有更低的延迟&#xff0c;并且消…
阅读更多...
干货分享 | 学会这7个工具方法，数字化转型规划不是难题

干货分享 | 学会这7个工具方法，数字化转型规划不是难题

提到数字化转型&#xff0c;首要做的便是分析企业现有的业务流程和价值流&#xff0c;发现企业利润来源的关键点&#xff0c;进而有针对性的数字化转型。要实现传统业务向数字化业务的转变&#xff0c;制定出高效、灵活的业务流程优化策略显得至关重要&#xff0c;这样才能找到…
阅读更多...
Modbus为何要转成EtherCAT

Modbus为何要转成EtherCAT

1. Modbus是什么&#xff1f; Modbus是一种工业通信协议&#xff0c;广泛应用于工业自动化领域。它支持多种通信方式&#xff0c;包括RS-232、RS-485和TCP/IP等。Modbus协议简单易用&#xff0c;能够实现设备之间的数据交换和控制命令的传输。然而&#xff0c;它在数据传输速率…
阅读更多...
Web渗透：任意文件下载

Web渗透：任意文件下载

任意文件下载漏洞&#xff08;Arbitrary File Download Vulnerability&#xff09;是一种常见的Web安全漏洞&#xff0c;它允许攻击者通过修改输入参数&#xff0c;从服务器下载任意文件&#xff0c;而不仅仅是预期的文件&#xff1b;通常这种漏洞出现在处理用户输入的地方&…
阅读更多...
一款开源、免费、现代化风格的WPF UI控件库

一款开源、免费、现代化风格的WPF UI控件库

前言 今天大姚给大家分享一款开源&#xff08;MIT License&#xff09;、免费、现代化风格的WPF UI控件库&#xff1a;ModernWpf。 项目介绍 ModernWpf是一个开源项目&#xff0c;它为 WPF 提供了一组现代化的控件和主题&#xff0c;使开发人员能够创建具有现代外观的桌面应…
阅读更多...
优化 C# 和 .NET Core Web API 中的 LINQ 查询

优化 C# 和 .NET Core Web API 中的 LINQ 查询

LINQ&#xff08;语言集成查询&#xff09;是 C# 中的一项强大功能&#xff0c;允许开发人员以可读且简洁的方式查询和操作数据。但是&#xff0c;LINQ 的使用效率低下可能会导致性能瓶颈&#xff0c;尤其是在处理 .NET Core Web API 中的大型数据集时。优化 LINQ 查询对于维护…
阅读更多...
Rust 程序设计语言学习——泛型、Trait和生命周期

Rust 程序设计语言学习——泛型、Trait和生命周期

每一种编程语言都有高效处理重复概念的工具。在 Rust 中其工具之一就是泛型。泛型是具体类型或其他属性的抽象替代。 Trait 定义了某个特定类型拥有可能与其他类型共享的功能。可以通过 Trait 以一种抽象的方式定义共同行为。可以使用 trait bounds 指定泛型是任何拥有特定行为…
阅读更多...
数据可视化期末考试（logistic回归）

数据可视化期末考试（logistic回归）

目录 1、Logistic回归 2、梯度上升算法 1、Logistic回归 假设现在有一些数据点&#xff0c;我们利用一条直线对这些点进行拟合(该线称为最佳拟合直线)&#xff0c;这个拟合过程就称作为回归&#xff0c;如下图所示&#xff1a; Logistic回归是分类方法&#xff0c;它利用的是…
阅读更多...
用FFmpeg合并音频和视频

用FFmpeg合并音频和视频

使用FFmpeg合并音频和视频是一个相对直接的过程。可以通过以下一些基本的步骤和命令示例完成这个任务&#xff1a; 安装FFmpeg&#xff1a;首先&#xff0c;确保你的系统中已经安装了FFmpeg。你可以从[FFmpeg官网](Download FFmpeg)下载并安装它。 准备素材&#xff1a;确保你…
阅读更多...
压铸工艺介绍

压铸工艺介绍

1.压铸的主要特点 1.压铸是让有色金属熔融&#xff0c;并在加压的情况下让其流入模具中。由于使用模具&#xff0c;所以适合进行大量生产。不同于其他铸造方式&#xff0c;压铸需要加压&#xff0c;所以具有尺寸精度优秀的特点。此外&#xff0c;由于并非使用砂型而是采用模具…
阅读更多...
如何给WPS、Word、PPT等办公三件套添加收费字体---方正仿宋GBK

如何给WPS、Word、PPT等办公三件套添加收费字体---方正仿宋GBK

1.先下载需要的字体。 下载字体的网站比较多&#xff0c;基本上都是免费的。随便在网上搜索一个就可以了&#xff0c;下面是下载的链接。 方正仿宋GBK字体免费下载和在线预览-字体天下 ​www.fonts.net.cn/font-31602268591.html 注意&#xff1a;切记不要商用&#xff0c;以免…
阅读更多...
基于weixin小程序农场驿站系统的设计

基于weixin小程序农场驿站系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;农场资讯管理&#xff0c;用户管理&#xff0c;卖家管理&#xff0c;用户分享管理&#xff0c;分享类型管理&#xff0c;商品信息管理&#xff0c;商品类型管理 开发系统&#xff1a;Windows 架构模式&…
阅读更多...
高频科技亮相SEMl-e2024第六届深圳国际半导体展，以超纯工艺推动行业发展

高频科技亮相SEMl-e2024第六届深圳国际半导体展，以超纯工艺推动行业发展

6月26-28日,SEMl-e2024第六届深圳国际半导体展在深圳国际会展中心(宝安新馆)隆重举办。本次展会以【“芯”中有“算”智享未来】为主题,汇聚800多家展商,集中展示了集成电路、电子元器件、第三代半导体及产业链材料和设备为一体的半导体产业链,搭建了供需精准对接、探索行业新发…
阅读更多...
【多线程】如何解决线程安全问题？

【多线程】如何解决线程安全问题？

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. synchronized 关键字1.1 锁是什么1.2 如何加锁1.3 synchronized 修饰方法1) 修饰普通成员方法2) 修饰静态…
阅读更多...
web前端——css（一篇教会网页制作）

web前端——css（一篇教会网页制作）

目录 一、基本语法 1.行内样式表 2.内嵌样式表 3.外部样式表 二、选择器 1.标签选择器 2.类选择器 3.id 选择器 4.通配选择器 三、常见修饰 1.文本 2.背景 3.列表 4.伪类 5.透明度 6.块级、行级、行级块标签 7.div 和 span 四、盒子模型&#xff08;重点&…
阅读更多...
Python学习打卡：day15

Python学习打卡：day15

day15 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day15110、数据分析案例步骤 1 —— 文件读取data_define_108.pyfile_define_108.py 111、数据分析案例步骤二——数据计算112、数据分析案例步骤…
阅读更多...
基于LMS自适应滤波的窄带信号宽带噪声去除(MATLAB R2021B)

基于LMS自适应滤波的窄带信号宽带噪声去除(MATLAB R2021B)

数十年的研究极大的发展了自适应滤波理论&#xff0c;自适应滤波理论已经成为信号处理领域研究的热点之一。从理论上讲&#xff0c;自适应滤波问题没有唯一解。为了得到自适应滤波器及其应用系统&#xff0c;可以根据不同的优化准则推导出许多不同的自适应理论。目前该理论主要…
阅读更多...
【C语言】字符/字符串+内存函数

【C语言】字符/字符串+内存函数

目录 Ⅰ、字符函数和字符串函数 1 .strlen 2.strcpy 3.strcat 4.strcmp 5.strncpy 6.strncat 7.strncmp 8.strstr 9.strtok 10.strerror 11.字符函数 12. 字符转换函数 Ⅱ、内存函数 1 .memcpy 2.memmove 3.memcmp 4.memset Ⅰ、字符函数和字符串函数 1 .strlen 函数原型&…
阅读更多...
Java热门技术点总结：Lambda表达式与Stream API

Java热门技术点总结：Lambda表达式与Stream API

第一部分&#xff1a;Lambda表达式 1. 简介 Lambda表达式是Java 8引入的一个非常重要的特性&#xff0c;它提供了一种简洁、灵活的函数式编程方式。Lambda表达式允许我们将函数作为参数传递&#xff0c;极大的简化了代码的编写。 2. 基本语法 Lambda表达式的基本语法如下&a…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站