鸿蒙界面开发

news2024/9/20 22:23:47

界面开发

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

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

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

相关文章

乐鑫ACK方案低成本设备开发，智能家居无线技术应用，启明云端乐鑫代理商

乐鑫ACK方案低成本设备开发，智能家居无线技术应用，启明云端乐鑫代理商

随着智能家居行业的蓬勃发展，用户对于智能设备的需求日益增长。乐鑫以其创新的Alexa Connect Kit (ACK) 方案，开启了智能家居设备开发的新篇章。 Alexa Connect Kit（ACK）方案，不仅提供了一个集成Alexa语音服务的高效开…
阅读更多...
Redis八股文（一）

Redis八股文（一）

目录 1.什么是Redis？ 2.Redis和Memcached有什么区别？ 3.为什么Redis作为MySQL的缓存？ 4.Redis数据类型及其使用场景分别是什么？ 5.五种常见数据类型是怎么实现的？ 6.Redis是单线程吗？ 7.Redis单线程…
阅读更多...
iterm2工具的使用|MAC电脑终端实现分屏|iterm2开启滚动操作

iterm2工具的使用|MAC电脑终端实现分屏|iterm2开启滚动操作

iterm2 工具概括 iTerm2 是一款非常强大的终端工具。 iTerm2 最初是为 macOS 开发的,但也有 Windows 、Linux 发行版（Ubuntu、centos…）可用。 应用场景 Mac操作系统中想实现终端分屏 iterm2 工具特点 多标签和分屏: 可以在同一个窗口中打开多个标签…
阅读更多...
【css】实现扫光特效

【css】实现扫光特效

对于要重点突出的元素，我们经常可以看到它上面打了一个从左到右的斜向扫光，显得元素亮闪闪的！类似于下图的亮光动效 关键步骤 伪元素设置position :absolute【也可以不用伪元素，直接创建一个absolute元素盖在上面】设置渐变line…
阅读更多...
基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-抄送服务处理

基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-抄送服务处理

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、因为仿钉钉设计器里抄送人是一个服务任务&#xff0c;所以要根据这个服务任务进行处理 2、前端就是一个抄送&#xff0c;选择人 3、这里用了jeecg的选择人组件 <el-form-item prop…
阅读更多...
Java开发之Redis

Java开发之Redis

1、非关系型数据库、快、高并发、功能强大 2、为什么快&#xff1f;内存单线程 非阻塞的IO多路复用有效的数据类型/结构 3、应用&#xff1a;支持缓存、支持事务、持久化、发布订阅模型、Lua脚本 4、数据类型&#xff1a; 5 种基础数据类型&#xff1a;String&#xff08;字…
阅读更多...
【深度学习】LDA线性判别分析

【深度学习】LDA线性判别分析

date:2024/07/23 author:sion tag:Deeping Learn LDA(线性判别分析) 文章目录 LDA(线性判别分析)1.LDA是什么LDA是一种解决二分类问题的线性方法。它描述&#xff0c;对于给定样例集&#xff0c;将样例点投影到一条直线上&#xff0c;这条直线能使异样的样例相距远&#xff0c;…
阅读更多...
three完全开源扩展案例05-围栏着色器

three完全开源扩展案例05-围栏着色器

https://www.threelab.cn/three-cesium-examples/public/index.html#/codeMirror?navigationThree.js%E6%A1%88%E4%BE%8B[r166]&classifyshader&idfenceShader 更多案例 import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/O…
阅读更多...
【分布式锁】Redission实现分布式锁

【分布式锁】Redission实现分布式锁

接着上一节&#xff0c;我们遇到了超卖的问题&#xff0c;并通过Redis实现分布式锁&#xff0c;进行了解决。本节 我将换一种方式实现分布式锁。 前提&#xff1a; nginx、redis、nacos 模块1&#xff1a; provider-and-consumer 端口 8023 模块2 rabbitmq-consumer 端口 8021 …
阅读更多...
PY32F071单片机，主频最高72兆，资源丰富，有USB,DAC,运放

PY32F071单片机，主频最高72兆，资源丰富，有USB,DAC,运放

PY32F071 系列单片机是基于32 位 ARM Cortex-M0 内核的微控制器&#xff0c;宽电压工作范围的 MCU。芯片嵌入高达 128 Kbytes flash 和 16 Kbytes SRAM 存储器&#xff0c;最高72 MHz工作频率。芯片支持串行调试 (SWD)。PY32F071单片机提供了包含了HAL和LL两种不同层次的驱动库…
阅读更多...
Python 机器学习求解 PDE 学习项目——PINN 求解二维 Poisson 方程

Python 机器学习求解 PDE 学习项目——PINN 求解二维 Poisson 方程

本文使用 TensorFlow 1.15 环境搭建深度神经网络&#xff08;PINN&#xff09;求解二维 Poisson 方程: 模型问题 − Δ u f in Ω , u g on Γ : ∂ Ω . \begin{align} -\Delta u & f \quad & \text{in } \Omega,\\ u & g \quad & \text{on } \Gamma:\p…
阅读更多...
【vue前端项目实战案例】之Vue仿饿了么App

【vue前端项目实战案例】之Vue仿饿了么App

本文将介绍一款仿“饿了么”商家页面的App。该案例是基于 Vue2.0 Vue Router webpack ES6 等技术栈实现的一款外卖类App&#xff0c;适合初学者进行学习。 项目源码下载链接在文章末尾 1 项目概述 该项目是一款仿“饿了么”商家页面的外卖类App&#xff0c;主要有以下功能…
阅读更多...
electron 网页TodoList工具打包成win桌面应用exe

electron 网页TodoList工具打包成win桌面应用exe

参考&#xff1a; electron安装&#xff08;支持win、mac、linux桌面应用&#xff09; https://blog.csdn.net/weixin_42357472/article/details/140643624 TodoList工具 https://blog.csdn.net/weixin_42357472/article/details/140618446 electron打包过程&#xff1a; 要将…
阅读更多...
RabbitMQ入门详解

RabbitMQ入门详解

前言 本篇文章将详细介绍rabbitmq的基本概念知识&#xff0c;以及rabbitmq各个工作模式在springboot中如何使用。 文章目录 介绍 简介 RabbitMQ 核心 生产者与消费者 Exchange Queue 工作模式 简单模式 工作队列模式 发布订阅模式 路由模式 主题模式 SpringBoot中…
阅读更多...
uniapp从入坑到出土（2-初始化你的uniapp项目）

uniapp从入坑到出土（2-初始化你的uniapp项目）

第2章：《初始化你的uniapp项目》 2.1 Vite：点燃魔法的火种魔法准备：环境搭建魔法施展：项目创建魔法测试：运行项目2.2 Vue CLI vs Vite：构建项目的魔法对决2.3 uniapp项目结构初探2.4 创建你的第一个uniapp页面创建你的第一个uniapp页面**魔法代码**（`pages/index/index.…
阅读更多...
最新快乐二级域名分发系统重置版v1.7源码-最新美化版+源码+可对接支付

最新快乐二级域名分发系统重置版v1.7源码-最新美化版+源码+可对接支付

源码简介&#xff1a; 最新快乐二级域名分发系统重置版v1.7源码&#xff0c;它是最新美化版源码可对接支付。 快乐二级域名分发系统重置版v1.7源码&#xff0c;简单快捷、功能强大的控制面板。系统稳定长久&#xff0c;控制面板没任何广告&#xff0c;让网站更实用方便。 最…
阅读更多...
ubuntu22.04 安装 NVIDIA 驱动

ubuntu22.04 安装 NVIDIA 驱动

目录 目录 1、事前问题解决 2、安装 3、卸载 1、事前问题解决 在安装完ubuntu之后&#xff0c;如果进入ubuntu出现黑屏情况&#xff0c;一般就是nvidia驱动与linux自带的不兼容&#xff0c;可以通过以下方式解决&#xff1a; 1、启动电脑&#xff0c;进入引导菜单&#x…
阅读更多...
PHP预约推拿按摩小程序系统源码

PHP预约推拿按摩小程序系统源码

&#x1f486;‍♀️轻松享受&#xff0c;揭秘“预约推拿按摩小程序”的便捷之道&#x1f4f1; &#x1f308; 开篇&#xff1a;告别繁琐&#xff0c;一键预约舒适时光&#xff01; 在这个快节奏的生活中&#xff0c;找到片刻的宁静与放松成为了我们的奢望。而“预约推拿按摩…
阅读更多...
探索BPMN—工作流技术的理论与实践｜得物技术

探索BPMN—工作流技术的理论与实践｜得物技术

一、前言 19世纪70年代&#xff0c;流程管理思想萌芽阶段。 怎样提高工作效率&#xff1f; 泰勒&#xff1a;标准化个人操作流程 亨利福特&#xff1a;规定标准时间定额 标准化、精简化、通用化、专业化。 20世纪70年代&#xff0c;工作流技术起源于办公自动化领域的研究。由于…
阅读更多...
minio 服务docker配置

minio 服务docker配置

用minio docker配置了一个服务&#xff0c;分享链接始终是127.0.01开始的&#xff0c; 改成docker的host的ip则提示签名不匹配&#xff0c; 好在这个文件主要是用来下载的&#xff0c;所以可以通过设置bucket的匿名访问权限来实现下载&#xff1b; 这样不需要后面的地址参数就…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023