鸿蒙界面开发

界面开发

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.mzph.cn/diannao/49357.shtml

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

相关文章

MMROTATE的混淆矩阵confusion matrix生成

MMROTATE的混淆矩阵confusion matrix生成

mmdetection中加入了混淆矩阵生成并可视化的功能，具体的代码在tools/analysis_tools/confusion_matrix.py。 mmrotate由于主流遥感数据集中的DOTA数据集标注格式问题，做了一些修改，所以我们如果是做遥感图像检测的Dota数据集的混淆矩阵&…
阅读更多...
安装CUDA Cudnn Pytorch(GPU版本）步骤

安装CUDA Cudnn Pytorch(GPU版本）步骤

一.先看自己的电脑NVIDIA 支持CUDA版本是多少？ 1.打开NVIDIA控制面板 2.点击帮助---系统信息--组件 我的支持CUDA11.6 二.再看支持Pytorch的CUDA版本 三.打开CUDA官网 下载CUDA 11.6 下载好后，安装 选择 自定义 然后安装位置 （先去F盘…
阅读更多...
【ffmpeg命令入门】ffplay常用命令

【ffmpeg命令入门】ffplay常用命令

文章目录 前言ffplay的简介FFplay 的基本用法常用参数及其作用示例 效果演示图播放普通视频播放网络媒体流RTSP 总结 前言 FFplay 是 FFmpeg 套件中的一个强大的媒体播放器，它基于命令行接口，允许用户以灵活且高效的方式播放音频和视频文件。作为一个简…
阅读更多...
uniapp原生插件开发实战——iOS打开文件到自己的app

uniapp原生插件开发实战——iOS打开文件到自己的app

用原生开发获取文件的名称、路径等能力封装为一个插件包供前端使用 首先根据ios插件开发教程，创建一个插件工程，template 选framework 开始编写代码： iOS 9 及以下版本会调用以下方法： - (BOOL)application:(UIApplication *_N…
阅读更多...
【数据分析详细教学】全球气温变迁：一个多世纪的数据分析

【数据分析详细教学】全球气温变迁：一个多世纪的数据分析

全球气温变迁：一个多世纪的数据分析 1. 数据集选择与获取 数据可以从NASA的GISTEMP数据集获取，通常提供的格式有TXT和CSV。我们假设数据是以CSV格式提供。 2. 数据预处理 使用Python的pandas库读取数据并进行预处理。 import pandas as pd# 加载数…
阅读更多...
C#知识|账号管理系统：修改登录密码界面的UI设计

C#知识|账号管理系统：修改登录密码界面的UI设计

哈喽，你好啊！我是雷工！ 本节记录添加修改登录密码界面的过程，以下为练习笔记。 01 效果演示 演示跳转打开修改登录密码子窗体效果： 02 添加窗体 在UI层添加一个Windows窗体，命名为：FrmModifyPwd.cs; 03 设置窗体属性 按照下表的内容设置窗体的相关属性： 设置属性 …
阅读更多...
物联网架构之Hadoop

物联网架构之Hadoop

一：系统环境设置（所有节点都设置） 1：关闭selinux和防火墙 setenforce 0 sed -i /^SELINUX/s/enforcing/disabled/ /etc/selinux/config systemctl stop firewalld systemctl disable firewalld 2：为各个节点设置主机名…
阅读更多...
mysql面试（二）

mysql面试（二）

前言 这是mysql面试基础的第二节，主要是了解一下mysql数据更新的基本流程，还有三大日志的作用。但是具体的比如undolog是如何应用在mvcc机制中的，由于篇幅问题就放在下一在章节 数据更新流程 上面是说了更新真正数据之前的大致流程&#x…
阅读更多...
requets库传data和传json的区别

requets库传data和传json的区别

传data和传json的qubie 被测对象，白月黑羽系统 系统下载地址： https://www.byhy.net/prac/pub/info/bysms/ 测试用例下载地址： https://cdn2.byhy.net/files/selenium/testcases.xlsx 一、传data import json import requests import pytes…
阅读更多...
7、Qt5开发及实列（笔记3-系统操作）

7、Qt5开发及实列（笔记3-系统操作）

说明&#xff1a;此示例包含了基本的常使用的系统操作 效果如下: mainwindos.cpp #pragma execution_character_set("utf-8") #include "mainwindow.h"#include <QDesktopWidget> #include <QApplication> #include <QHostInfo> #in…
阅读更多...
docker基础镜像

docker基础镜像

一、配置 docker 本地源 [docker-ce-stable] nameDocker CE Stable baseurlhttp://10.35.186.181/docker-ce-stable/ enabled1 gpgcheck0 配置阿里云Docker Yum源 yum install -y yum-utils device-mapper-persistent-data lvm2 git yum-config-manager --add-repo http://mirr…
阅读更多...
Windows安装Visual Studio2022 + QT5.15开发环境

Windows安装Visual Studio2022 + QT5.15开发环境

最近&#xff0c;把系统换成了Windows11&#xff0c;想重新安装QT5.12&#xff0c;结果发现下载不了离线安装包。 最后索性安装QT5.15了&#xff0c;特此记录下。 预祝大家&#xff1a;不论是何时安装&#xff0c;都可以安装到指定版本的QT。 一、VS2022安装 VS2022官网下…
阅读更多...
ubuntu 22.04 安装部署gitlab详细过程

ubuntu 22.04 安装部署gitlab详细过程

目录 gitlab介绍 gitlab安装 步骤1&#xff1a;更新系统 步骤2&#xff1a;添加 GitLab 的 GPG 密钥 gitlab企业版 gitlab社区版 步骤3&#xff1a;安装 GitLab 社区版 社区版 步骤4&#xff1a;初始化 GitLab 步骤5&#xff1a;访问 GitLab 步骤6&#xff1a;查看r…
阅读更多...
C++ - 基于多设计模式下的同步异步⽇志系统

C++ - 基于多设计模式下的同步异步⽇志系统

1.项目介绍 项⽬介绍 本项⽬主要实现⼀个⽇志系统&#xff0c; 其主要⽀持以下功能: • ⽀持多级别⽇志消息 • ⽀持同步⽇志和异步⽇志 • ⽀持可靠写⼊⽇志到控制台、⽂件以及滚动⽂件中 • ⽀持多线程程序并发写⽇志 • ⽀持扩展不同的⽇志落地⽬标地 2.开发环境 • Cent…
阅读更多...
AI学习记录 - 导数在神经网络训练中的作用（自己画的图，很丑不要介意！）

AI学习记录 - 导数在神经网络训练中的作用（自己画的图，很丑不要介意！）

导数的作用 我们去调整神经网络的权重&#xff0c;一般不会手动去调整&#xff0c;如果只有很少的神经元&#xff0c;人工调整确实可以实现&#xff0c;当我们有几十层&#xff0c;一层几百上千个神经元的时候&#xff0c;人工调整就不可能了。 一个权重的调整涉及到两个问题&…
阅读更多...
TCP的FIN报文可否携带数据

TCP的FIN报文可否携带数据

问题发现&#xff1a; 发现FTP-DATA数据传输完&#xff0c;TCP的挥手似乎只有两次 实际发现FTP-DATA报文中&#xff0c;TCP层flags中携带了FIN标志 piggyback FIN 问题转化为 TCP packet中如果有FIN flag&#xff0c;该报文还能携带data数据么&#xff1f; 答案是肯定的 RFC7…
阅读更多...
【LeetCode:3098. 求出所有子序列的能量和 + 记忆化缓存】

【LeetCode:3098. 求出所有子序列的能量和 + 记忆化缓存】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第四十七章 字符设备和杂项设备总结回顾

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第四十七章 字符设备和杂项设备总结回顾

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…
阅读更多...
Redis核心技术与实战学习笔记

Redis核心技术与实战学习笔记

Redis核心技术与实战学习笔记 最近想沉下心来看下redis&#xff0c;买了蒋德钧老师的《Redis 核心技术与实战》,这里记录一些学习笔记 希望能够坚持下去有想一起学习的童鞋&#xff0c;可以点击跳转到文章尾部获取学习资源,仅供学习不要用于任何商业用途!!! redis知识全景图 …
阅读更多...
前端JS特效第50集：zyupload图片上传

前端JS特效第50集：zyupload图片上传

zyupload图片上传&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; var operimg_id; var zoom_rate100; var zoom_timeout; function rotateimg(){var smallImg$("#"operimg_id);var numsmallImg.attr(curr_rotate);if(nu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023