鸿蒙界面开发

界面开发

image-20240722162900142

image-20240722162934196

//构建 → 界面
build() {
  //行
  Row(){
    //列
    Column(){
      //文本 函数名(参数)  对象.方法名（参数） 枚举名.变量名
      Text(this.message)
        .fontSize(40)//设置文本大小
        .fontWeight(FontWeight.Bold)//设置文本粗细
        .fontColor('#ff2152')//设置文本颜色
    }.width('100%')
  }.height('100%')
}

界面开发-布局思路

image-20240722164826813

image-20240722165124543

//构建 → 界面
build() {
  //布局思路：先布局在排版
  Column(){
    //内容
    Text('小说简介')
    Row(){
      Text('都市')
      Text('生活')
      Text('情感')
      Text('男频')
    }
  }//最外面只能有一层容器组件，需要编写要在容器内编写
}

image-20240722165753143

属性方法

image-20240723153251329

//构建 → 界面
build() {
  //布局思路：先布局在排版
  Column(){
    //内容
    Text('小说简介')
      .width('100%')
      .fontSize(25)
      .fontWeight(FontWeight.Bolder)
      .height(50)
    Row(){
      Text('都市')
        .fontColor(Color.Blue)
        .backgroundColor(Color.Brown)
        .width(50)
        .height(40)
      Text('生活')
        .fontColor(Color.Brown)
        .backgroundColor(Color.Green)
        .width(50)
        .height(40)
      Text('情感')
        .backgroundColor(Color.Pink)
        .width(50)
        .height(40)
      Text('男频')
        .backgroundColor(Color.Orange)
        .width(50)
        .height(40)
    }.width('100%')
  }//最外面只能有一层容器组件，需要编写要在容器内编写
}

image-20240722171119332

字体颜色

image-20240722171237012

//2、综合练习：今日头条置顶新闻
Column(){
  Text('学鸿蒙，就来陈哈哈~')
    .fontSize(15)
    .width('100%')
    .fontWeight(FontWeight.Bold)
    .height(25)
  Row(){
    Text('置顶')
      .fontColor(Color.Red)
      .fontSize(10)
      .width(30)
    Text('新华社')
      .fontSize(10)
      .fontColor('#888')
      .width(40)
    Text('4680评论')
      .fontSize(10)
      .fontColor('#888')
      .width(50)
  }.width('100%')
}.width('100%')

image-20240722203930759

文字溢出省略号、行高

image-20240722204950609

Column(){
  Text('HarmonyOS开发初体验')
    .width('100%')
    .fontWeight(FontWeight.Bold)
    .lineHeight(50)
    .fontSize(24)
  Text('方舟开发框架（简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件)，以及实时界面预览工具等，可以支持开发者进行可视化界面开发。')
    .width('100%')
    .lineHeight(24)
    .fontColor('#888')
    //重点记忆溢出省略号
    .textOverflow({
      overflow:TextOverflow.Ellipsis
    }).maxLines(2)//配合使用能见度两行
}

image-20240722210020372

Image图片组件

image-20240722210202025

//构建 → 界面
build() {
  //1、网络图片加载 image('网图地址')
  // Column(){
  //   Image('https://www.itheima.com/images/logo.png')
  //     .width(200)
  // }
  //2、本地图片加载 image($r('app.media.文件名'))
  Column(){
    Image($r('app.media.startIcon'))
      .width(200)
    Text('耐克龙年限定款！！！')
      .fontSize(20)
      .width(200)
    Row(){
      Image($r('app.media.startIcon'))
        .width(20)
      Text('  令人脱发的代码')
    }.width(200)
  }

image-20240722212557000

输入框与按钮

image-20240722215112090

build() {
  //控制组件间的距离，可以给Column设置{space:间隙大小}
  Column({space:10}){
    TextInput({
      placeholder:'请输入用户名'
    }).type(InputType.Normal)
    
    TextInput({
      placeholder:'请输入密码'
    }).type(InputType.Password)

    Button('登录')
      .backgroundColor('#3575ED')
      .width(200)
  }
}

image-20240722215230041

综合实训

image-20240722220536058

build() {
  //构建界面核心思路：
  //1.排版（思考布局）
  //2,内容（基础组件）
  //3.美化（属性方法）
  Column({space:10}){
    Image($r('app.media.startIcon'))
      .width(50)
    TextInput({
      placeholder:'输入用户名'
    })
    TextInput({
      placeholder:'请输入密码'
    }).type(InputType.Password)
    Button('登录')
      .width('100%')
    Row({space:15}){
      Text('前往注册')
      Text('忘记密码')
    }

  }.width('100%')
  .padding(20)
}

设计资源-svg图标

image-20240723142343723

鸿蒙图标库：

https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

image-20240723153857558

布局元素的组成

image-20240723154038749

内边距padding

image-20240723154146773

外边距margin

image-20240723154438249

练习：

image-20240723155841146

//构建 → 界面
build() {
  Column(){
    Image($r('app.media.startIcon'))
      .width(50)
      .margin({
        top:120
      })
    Text('大王叫我来巡山')
      .fontSize(25)
      .fontWeight(FontWeight.Bold)
      .margin({
        top:20,
      })
    Button('QQ音乐登录')
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
      .backgroundColor('#387DF6')
      .width('100%')
      .margin({
        top:80
      })
    Button('微信登录')
      .fontColor(Color.Black)
      .fontWeight(FontWeight.Bold)
      .backgroundColor('#DFDFDF')
      .width('100%')
      .margin({
        top:15
      })

  }.width('100%')
  .padding(20)

}
边框

image-20240723155920791

//构建 → 界面
build() {
  Column(){
   Text('四条边')
     .fontColor(Color.Red)
     .padding(5)
     .border({
       width:1,//宽度
       color:Color.Red,//颜色
       style:BorderStyle.Dotted//央视（实线 虚线 点线）
     }).margin({
     bottom:20
   })
    Text('单边框')
      .fontColor(Color.Red)
      .padding(5)
      //单边框，可以通过left right top bottom配置四个方向边框
      .border({
        width:{
          left:1,
          right:3
        },
        color:{
          left:Color.Yellow,
          right:'#ff68'
        },
        style:{
          left:BorderStyle.Solid,
          right:BorderStyle.Dotted
        }
      })


  }.width('100%')
  .padding(20)
}

image-20240723161304264

设置组件圆角

image-20240723161432314

image-20240723161643150

特殊形状圆角设置

image-20240723161744665

//构建 → 界面
build() {
  Column(){
   Text('四条边')
     .fontColor(Color.Red)
     .padding(5)
     .border({
       width:1,//宽度
       color:Color.Red,//颜色
       style:BorderStyle.Dotted//央视（实线 虚线 点线）
     }).margin({
     bottom:20
   })
    Text('单边框')
      .fontColor(Color.Red)
      .padding(5)
      //单边框，可以通过left right top bottom配置四个方向边框
      .border({
        width:{
          left:1,
          right:3
        },
        color:{
          left:Color.Yellow,
          right:'#ff68'
        },
        style:{
          left:BorderStyle.Solid,
          right:BorderStyle.Dotted
        }
      })

    //倒角
    Text('倒角')
      .backgroundColor(Color.Pink)
      .margin(30)
      .padding(10)
      .borderRadius({
        topLeft:10,
        bottomRight:10
      })

    //图片
    Image($r('app.media.startIcon'))
      .width(100)
      .height(100)
      .borderRadius(50)

    //正圆
    Text('正圆')
      .backgroundColor(Color.Pink)
      .margin(30)
      .padding(10)
      .width(50)//宽高一样
      .height(50)
      .borderRadius(25)//圆角是宽或者高的一半

    //胶囊
    Text('胶囊')
      .backgroundColor(Color.Green)
      .padding(20)
      .width(150)//宽比高大
      .height(50)
      .borderRadius(25)//圆角是高的一半



  }.width('100%')
  .padding(20)
}

背景图-banckgroundImage

image-20240723162829447

image-20240723163015831

Text('tupian')
  .padding(20)
  .backgroundColor(Color.Orange)
  .margin(20)
  .width(400)
  .height(400)
  .backgroundImage($r('app.media.app_icon'),ImageRepeat.XY)//图片重复，x横轴，y纵轴，xy铺满

image-20240723192912180

背景属性

image-20240723194105894

//构建 → 界面
build() {
  //backgroundImagePosition
  //1,传入对象，设置位置坐标，背景图片的左顶点
  //{x:坐标值，Y:坐标值}
  //注意：坐标值的单位，和宽高的默认单位不同的，显示出来大小会不同

  //2,Alignment枚举，设置一些特殊的位置（中央、左顶点..）
  //Center TopStart左J顶点TopEnd右顶点BottomEnd右下...
 Column(){
   Text()
     .width(300)
     .height(200)
     .backgroundColor(Color.Pink)
     .backgroundImage($r('app.media.startIcon'))
     .backgroundImagePosition({
       x:100,
       y:100
     })
     .backgroundImagePosition(Alignment.Center)
 }.width('100%')
  .padding(20)
}

image-20240723200908429

单位问题

image-20240723202122323

背景属性image-20240723202152219

image-20240723202333202

Text()
  .height(200)
  .width(300)
  .backgroundImage($r('app.media.huawei'))
  .backgroundImageSize(ImageSize.Cover)

image-20240723204058158

线性布局

image-20240723204130454

image-20240723204256594

//纵向布局
.build() {
  Column(){
    Text()
      .width(200).height(100)
      .backgroundColor(Color.Pink)
      .borderWidth(1)
    Text()
      .width(200).height(100)
      .backgroundColor(Color.Pink)
      .borderWidth(1)
    Text()
      .width(200).height(100)
      .backgroundColor(Color.Pink)
      .borderWidth(1)

  }.width('100%').height('100%')
  //设置排布主方向的对齐方式(主轴)
    //1.Start(排布主方向)主轴起始位置对齐
    //2.Center主轴居中对齐
    //3.End主轴结束位置对齐
    //4.SpaceBetween贴边显示，中间的元素均匀分布间隙
    //5.Space正ound间隙环绕0.5 1 1 1 0.5的间隙分布，靠边只有一半的间隙
    //6,SpaceEvenly间隙均匀环绕，靠边也是完整的一份间隙
    //justifyContent(枚举FlexAlign)ctrL+p cmd+p
    //.justifyContent(FLexAlign.Center)
    //.justifyContent(FLexAlign.SpaceBetween)
    //justifyContent(FLexAlign.SpaceAround)
  .justifyContent(FlexAlign.Center)

//横向布局
build() {
  Row(){
    Text()
      .width(50).height(200)
      .backgroundColor(Color.Pink)
      .borderWidth(1)
    Text()
      .width(50).height(200)
      .backgroundColor(Color.Pink)
      .borderWidth(1)
    Text()
      .width(50).height(200)
      .backgroundColor(Color.Pink)
      .borderWidth(1)

  }.width('100%').height('100%')
  //设置排布主方向的对齐方式(主轴)
    //1.Start(排布主方向)主轴起始位置对齐
    //2.Center主轴居中对齐
    //3.End主轴结束位置对齐
    //4.SpaceBetween贴边显示，中间的元素均匀分布间隙
    //5.Space正ound间隙环绕0.5 1 1 1 0.5的间隙分布，靠边只有一半的间隙
    //6,SpaceEvenly间隙均匀环绕，靠边也是完整的一份间隙
    //justifyContent(枚举FlexAlign)ctrL+p cmd+p
    //.justifyContent(FLexAlign.Center)
    //.justifyContent(FLexAlign.SpaceBetween)
    //justifyContent(FLexAlign.SpaceAround)
  .justifyContent(FlexAlign.SpaceEvenly)

}

image-20240723210216442

个人中心-顶部导航栏

image-20240723210319328

//构建 → 界面
build() {
  Column(){
    Row(){
      Image($r('app.media.ic_public_arrow_left_filled'))
        .width(30)


      Text('个人中心')
        .fontSize(24)

      Image($r('app.media.ic_gallery_photoedit_more'))
        .width(30)
      
    }.width('100%').height(40)
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({left:10,right:10})
    .backgroundColor(Color.White)
    
  }.width('100%').height('100%')
  .backgroundColor(Color.Pink )

image-20240723211849585

image-20240723211937208

//Row的交叉轴的对齐方式（垂直向下的交叉轴）
Row(){内容……}.alignItems(VerticalAlign.Top)

//Column的交叉轴的对齐方式（垂直向右的交叉轴）
Column(){内容……}.alignItems(VerticalAlign.Top)

image-20240723212615089

得物-列表项

image-20240723223639851

//构建 → 界面
build() {
  Column(){
    //左侧列
    Row(){
      Column({space:10}){
        Text('玩一玩')
          .fontWeight(FontWeight.Bold)
          .fontSize(18)
        Row(){
          Text('签到兑礼')
            .fontColor('#ccc')
            .fontSize(12)
          Text('|超多大奖')
            .fontColor('#ccc')
            .fontSize(12)
          Text('  超好玩')
            .fontColor('#ccc')
            .fontSize(12)
        }
      }.alignItems(HorizontalAlign.Start)
      //右侧行
      Row(){
        Image($r('app.media.startIcon'))
          .width(50)
          .margin({
            right:10
          })
        Image($r('app.media.ic_public_arrow_right_filled'))
          .width(30)
          .fillColor('#ccc')
      }.justifyContent(FlexAlign.SpaceBetween)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor(Color.White)
    .width('100%')
    .height(80)
    .borderRadius(10)
    .padding({
      left:15,
      right:15
    })
    
  }.width('100%').height('100%')
  .padding(10)
  .backgroundColor(Color.Pink)

}

image-20240723223724362

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

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

相关文章

四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

5.1.TIMER 基础知识 TIMER分高级定时器，通用定时器L0，L1，L2和基本定时器。 5.2.硬件连接说明 TIMER 属于片内外设，对于外部硬件设计，只需要单独IO口外接信号线即可。 5.3.GD32 TIMER 外设原理简介（以 G…
阅读更多...
Mysql或MariaDB数据库的用户与授权操作——实操保姆级教程

Mysql或MariaDB数据库的用户与授权操作——实操保姆级教程

一、问题描述 在日常的工作中，我们需要给不同角色的人员创建不同的账号，他们各自可访问的数据库或权限不一样，这时就需要创建用户和赋予不同的权限内容了。 二、问题分析 1、创建不同的角色账号； 2、给这些账号授予各自可访问数据库的权限。 三、实现方法 Centos8安装…
阅读更多...
(7) cmake 编译C++程序(二)

(7) cmake 编译C++程序(二)

文章目录 概要整体代码结构整体代码小结 概要 在ubuntu下，通过cmake编译一个稍微复杂的管理程序 整体代码结构 整体代码 boss.cpp #include "boss.h"Boss::Boss(int id, string name, int dId) {this->Id id;this->Name name;this->DeptId …
阅读更多...
最简单的typora+gitee+picgo配置图床

最简单的typora+gitee+picgo配置图床

typoragiteepicgo图床 你是否因为管理图片而感到头大？是时候了解一下 Typora、Gitee 和 PicGo 这个超级三剑客了，它们可以帮你轻松打造自己的图床，让你的博客图片管理变得简单又有趣。让我们开始这场神奇的图床之旅吧！ Typora …
阅读更多...
Elasticsearch概念及ELK安装

Elasticsearch概念及ELK安装

1、Elasticsearch是什么 它是elastic技术栈中的一部分。完整的技术栈包括： Elasticsearch：用于数据存储、计算和搜索 Logstash/Beats：用于数据收集 Kibana：用于数据可视化 整套技术栈被称为ELK，经常用来做日志收集…
阅读更多...
大语言模型-GPT-Generative Pre-Training

大语言模型-GPT-Generative Pre-Training

一、背景信息： GPT是2018 年 6 月由OpenAI 提出的预训练语言模型。 GPT可以应用于复杂的NLP任务中，例如文章生成，代码生成，机器翻译，问答对话等。 GPT也采用两阶段的训练过程，第一阶段是无监督的方式来预训…
阅读更多...
HarmonyOS 请求相应HTTPS概览

HarmonyOS 请求相应HTTPS概览

1.HTTP概述 请求和响应 2.HTTP请求开发步骤 2.1.module.json5中添加 ohos.permission.INTERNET 2.2.导入http模块 2.3.创建htppt请求 2.4.发起请求 2.5.处理响应 2.6.销毁http对象 3.几个基本概念： 3.1.Webview：提供We…
阅读更多...
git 版本回退-idea

git 版本回退-idea

1、选中项目，右键，打开 git历史提交记录 2、选中想要回退的版本，选择 hard（不保留版本记录） 3、最终选择强制提交（必须强制） OK，搞定
阅读更多...
被问到MQ消息已丢失，该如何处理？

被问到MQ消息已丢失，该如何处理？

在分布式系统中，消息中间件（如 RabbitMQ、RocketMQ、Kafka、Pulsar 等）扮演着关键角色，用于解耦生产者和消费者，并确保数据传输的可靠性和顺序性。尽管我们通常会采取多种措施来防止消息丢失，如消息持久化、…
阅读更多...
【Docker】CentOS7环境下的安装

【Docker】CentOS7环境下的安装

环境展示 安装 配置仓库 sudo yum install -y yum-utils # docker官方key文件下载 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo # 建议使用阿里云key文件下载 sudo yum-config-manager --add-repo https://mirrors.aliyun.…
阅读更多...
Jacoco 单元测试配置

Jacoco 单元测试配置

前言 编写单元测试是开发健壮程序的有效途径，单元测试写的好不好可以从多个指标考量，其中一个就是单元测试的覆盖率。单元测试覆盖率可以看到我们的单元测试覆盖了多少代码行、类、分支等。查看单元测试覆盖率可以使用一些工具帮助我们计算，…
阅读更多...
ElMessage自动引入,样式缺失和ts esline 报错问题解决

ElMessage自动引入,样式缺失和ts esline 报错问题解决

一. 环境 "unplugin-auto-import": "^0.17.6", "vue": "^3.3.8", "vite": "^5.0.0", "typescript": "^5.2.2",二. ElMessage样式缺失问题. 以下有两种解决方法 方法一: 配置了自动引用后…
阅读更多...
Chrome谷歌浏览器Console（控制台）显示文件名及行数

Chrome谷歌浏览器Console（控制台）显示文件名及行数

有没有这样的困扰？Chrome谷歌浏览器console(控制台)不显示编译文件名及行数? 设置（Settings）- > 忽略列表（lgnore List）-> 自定义排除规则（Custom exclusion rules） 将自定义排除规则…
阅读更多...
3.1、数据结构-线性表

3.1、数据结构-线性表

数据结构 数据结构线性结构线性表顺序存储和链式存储区别单链表的插入和删除练习题 栈和队列练习题 串（了解） 数据结构 数据结构该章节非常重要，上午每年都会考10-12分选择题下午一个大题 什么叫数据结构？我们首先来理解一下什…
阅读更多...
算法与算法分析

算法与算法分析

目录 一.前言 二.算法的特性和要求 三.分析算法--时间效率 四. 分析算法--空间效率 一.前言 算法就是对特定问题求解方法和步骤的一种描述，它是指令的有限序列。其中，每个指令表示一个或多个操作。总而言之，我们数据结构就是通过算法实现操…
阅读更多...
记录｜C# winform布局学习

记录｜C# winform布局学习

目录 前言一、自适应布局Step1. 添加AutoAdaptWindowsSize类Step2. Form中引用Step3. 创建SizeChanged事件函数Step4. 在Fram.Disiger中添加 更新时间 前言 参考视频： C#5分钟winform快速自适应布局 参考文章： 其他参考： 写这篇文章&#xff…
阅读更多...
Elasticsearch：Java ECS 日志记录 - log4j2

Elasticsearch：Java ECS 日志记录 - log4j2

ECS 记录器是你最喜欢的日志库的格式化程序/编码器插件。它们可让你轻松将日志格式化为与 ECS 兼容的 JSON。ECS 兼容的 JSON 日志记录可以帮我们简化很多分析，可视化及解析的工作。在今天的文章里，我来详述如何在 Java 应用里生成 ECS 相兼容的日志。 …
阅读更多...
为什么样本方差（sample variance）的分母是 n-1？

为什么样本方差（sample variance）的分母是 n-1？

样本均值与样本方差的定义 首先来看一下均值，方差，样本均值与样本方差的定义 总体均值的定义： μ 1 n ∑ i 1 n X i \mu\frac{1}{n}\sum_{i1}^{n} X_i μn1​i1∑n​Xi​ 也就是将总体中所有的样本值加总除以个数，也可以叫做总…
阅读更多...
【PHP】系统的登录和注册

【PHP】系统的登录和注册

一、为什么要学习系统的登录和注册 系统的登录和注册可能存在多种漏洞，这些漏洞可能被恶意攻击者利用，从而对用户的安全和隐私构成威胁。通过学习系统的登录和注册理解整个登录和注册的逻辑方便后续更好站在开发的角度思考问题发现漏洞。以下是一些常见…
阅读更多...
学习小型gpt源码（自用）

学习小型gpt源码（自用）

数据集构建_哔哩哔哩_bilibili （b站上有一系列课，从数据处理到模型构建和训练使用） 什么是batch？ 为什么一个batch内的句子要一样长？ 不同batch的长度可以不一样，但是同一个batch内长度一样！…
阅读更多...
最新文章

Copyright @ 2022~2023