HarmonyOS Next星河版笔记--界面开发(3)

属性

1.1.设计资源-svg图标

需求:界面中展示图标→可以使用的svg图标(任意放大缩小不失真、可以改变颜色)

使用方式:

①设计师提供:基于项目的图标,拷贝到项目目录使用

Image($r('app.media.ic_dianpu'))
.width(40)
fillColor('#b0473d')

②图标库中选取:找合适的图标资源 → 下载svg →拷贝使用

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

示例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
Column(){//特点:1、任意放大缩小不失真//2、可以修改颜色Image($r("app.media.ic_public_add_filled")).width(200).fillColor(Color.Red)
}}
}

1.2.布局元素的组成

1.2.1.内边距padding

作用:在组件内添加间距,拉开内容与组件边缘之间的距离

Text('内边距padding')
.padding(20)//四个方向内边距均为20
//Text ('内边距padding')
.padding({top:10,right:20,bottom:40,left:80
})//四个方向内边距分别设置

示例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Text('Alika').backgroundColor(Color.Pink).padding({left:10,top:30,right:5,bottom:30})}}
}

运行效果

1.2.2.外边距margin

作用:在组件外添加间距,拉开两个组件之间的距离

案例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row(){Text('刘备').backgroundColor(Color.Orange)Text('关羽').backgroundColor(Color.Pink)//.margin(30)//一次性设置四个方向的margin外边距.margin({left:30,top:10})Text('张飞').backgroundColor(Color.Green)}Column(){Text('刘备').backgroundColor(Color.Orange)Text('关羽').backgroundColor(Color.Pink)//.margin(30)//一次性设置四个方向的margin外边距.margin({left:30,top:50})Text('张飞').backgroundColor(Color.Green)}}}

运行结果

1.3.QQ音乐--登录案例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Image($r('app.media.tomato')).width(100)Text('一颗西红柿').fontSize(30).margin({bottom:50})Button('QQ登录').width('100%').margin({bottom:20})Button('微信登录').width('100%').backgroundColor('#ddd').fontColor('#000')}.width('100%').padding(30)}
}

运行效果

1.4.边框border

作用:给组件添加边界,进行装饰美化。

Text('边框语法').border({width:1,        //宽度(必须设置)color:'#3274f6',//颜色style:BorderStyle.solid//样式
})   //四个方向相同
//Text('边框语法').border({width:{left:1,right:2
},color:{left:Color.Red,right:Color.Blur
},
style:{left:BorderStyle.Dashed,right:BorderStyle.Dotted
}
})//top、right、bottom、left

示例:

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('待完善').padding(5).margin(10).border({width:1,//宽度(必须)color:Color.Red,//颜色style:BorderStyle.Dotted//点线})Text('单边框').padding(5).margin(15).border({width:{top:2,bottom:3,right:20},color:{left:Color.Red,right:Color.Green},style:{left:BorderStyle.Dotted,right:BorderStyle.Solid}})

运行效果:

1.5.设置组件圆角

属性:.borderRadius(参数)

参数:数值或对象(四个角单独设置)

topLeft:左上角
topRight:右上角
bottomLeft:左下角
bottomRight:右下角Text('圆角语法')
.borderRadius(5)//四个圆角相同
.borderRadius({topLeft:5topRight:10bottomLeft:15bottomRight:20
})//四个方向圆角,单独设置

示例:

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('没有圆角').width(100).height(60).backgroundColor(Color.Pink).margin(20)//添加圆角://1、.borderRadius(数值)四个角圆角相同//2、.borderRadius({方位词:值})单独个某个角设置圆角Text('添加圆角').width(100).height(60).backgroundColor(Color.Orange).margin(20).borderRadius({topLeft:20,bottomLeft:10,topRight:40,bottomRight:30})}}
}

运行效果

1.6.特殊形状的圆角设置

1.6.1.正圆

Text('正圆')
.width(100)       //宽高一样
.height(100)
.borderRadius(50)//圆角是宽或高的一半

1.6.2.胶囊按钮(左右半圆)

Text('胶囊按钮')
.width(150)       //宽大高小
.height(50)
.borderRadius(25)//圆角是高的一半

示例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {//1、正圆(一般用于头像)Image($r('app.media.tomato')).width(100).height(100).borderRadius(50)//2、胶囊按钮Text('今天要来个西红柿嘛').height(50).width(150).borderRadius(25).backgroundColor(Color.Pink)}.padding(20)}
}

运行效果

1.7.背景属性

属性方法属性
背景图backgroundColor
背景色backgroundImage
背景图位置backgroundImagePostition
背景图尺寸backgroundImageSize

 1.7.1.背景图

属性:.backgroundImage(背景图地址,背景图平铺方式-枚举ImageRepeat)Text().backgroundImage($r('app.media.image'))

背景图平铺方式:(可省略)

  • NoRepeat:不平铺,默认值
  • X:水平平铺
  • Y:垂直平铺
  • XY:水平垂直平铺

示例

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('今天吃点什么腻~~').width(200).height(500).backgroundColor(Color.Pink)//backgroundImage(加载的背景图片,是否平铺ImageRepeat枚举).backgroundImage($r('app.media.kitchen'),ImageRepeat.Y)}.padding(20)}
}

 1.7.2.背景图位置

作用:调整背景图在组件内的显示位置,默认显示位置为组件左上角

属性:.backgroundImagePosition(坐标对象或枚举)

参数:

  • 位置坐标:{ x : 位置坐标, y : 位置坐标  }
  • 枚举:Alignment
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('今天吃点什么腻~~').width(200).height(200).backgroundColor(Color.Pink)//backgroundImage(加载的背景图片,是否平铺ImageRepeat枚举).backgroundImage($r('app.media.tomato'),ImageRepeat.Y)//.backgroundImagePosition({x : 100, y : 100}).backgroundImagePosition(Alignment.Center)}.padding(20)}
}

1.7.3.背景定位

背景图位置的单位问题:

背景定位默认的单位→px:实际的物理像素点,设置出厂,就定好了【分辨率单位】

宽高默认单位→vp:虚拟像素,相对不同的设备会自动转换,保证不同设备视觉一致(推荐)

函数:vp2px(数值)将vp进行转换,得到px的数值

 .backgroundImagePosition({x : vp2px(2), y : vp2px(2)})

1.7.4.背景尺寸

作用:背景图缩放

属性:.backgroundImageSize(宽高对象 或 枚举)

参数:

  • 背景图宽高:{ width : 尺寸, height : 尺寸}
  • 枚举ImageSize:
    • Contain:等比例缩放背景图,当宽或高与组件尺寸相同时停止缩放
    • Cover:等比例缩放背景图至图片完全覆盖组件范围
    • Auto:默认,原图尺寸
.backgroundImageSize(ImageSize.Contain)

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

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

相关文章

解决方案 | 部署更快,自动化程度高!TOSUN同星线控底盘解决方案

Tosun——线控底盘解决方案 在汽车智能化和电动化进程中,智能线控底盘相关的核心技术和产品成为了新能源汽车及智能驾驶产业的重点发展方向。同星智能作为行业先行者,精研汽车电子行业整体解决方案,提供基于TSMaster的底盘HIL仿真测试解决方…

分布式光伏管理办法

随着分布式光伏项目的不断增加,传统的管理方式已经难以满足高效、精准的管理需求。光伏业务管理系统作为一种集信息化、智能化于一体的管理工具,正在逐步成为分布式光伏项目管理的重要支撑。 光伏业务管理系统通过数字化手段实现对光伏业务全流程的精细化…

细腻的链接:C++ list 之美的解读

细腻的链接:C list 之美的解读 前言: 小编在前几日刚写过关于vector容器的内容,现在小编list容器也学了一大部分了,小编先提前说一下学这部分的感悟,这个部分是我学C以来第一次感到有难度的地方,特别是在…

文件操作案例

文件操作(帮助小学生控诉妈妈):###无任何不良指导###

基于 RNN 的语言模型

基于 RNN 的语言模型 循环神经网络(Recurrent Neural Network, RNN)是一类网络连接中包含环路的 神经网络的总称。 给定一个序列,RNN 的环路用于将历史状态叠加到当前状态上。沿着时间维度,历史状态被循环累积,并作为…

嵌入式硬件工程师的职业发展规划

嵌入式硬件工程师可以按照以下阶段进行职业发展规划: 1. **初级阶段(1-3 年) ** - **技术学习与积累**: **电路基础强化**: 深入学习模拟电路和数字电路知识,能够熟练分析和设计基本的电路,…

C#:强大而优雅的编程语言

在当今的软件开发领域,C#作为一种广泛应用的编程语言,以其强大的功能、优雅的语法和丰富的生态系统,受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面,展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…

时间序列预测(十八)——实现配置管理和扩展命令行参数解析器

如图,这是一个main,py文件,在此代码中,最开始定义了许多模型参数,为了使项目更加灵活和可扩展,便于根据不同的需求调整参数和配置,可以根据实际需要扩展参数和配置项。 下面是如何实现配置管理和扩展命令行…

影刀RPA实战:嵌入python,如虎添翼

1. 影刀RPA与Python的关系 影刀RPA与Python的关系可以从以下几个方面来理解: 技术互补:影刀RPA是一种自动化工具,它允许用户通过图形化界面创建自动化流程,而Python是一种编程语言,常用于编写自动化脚本。影刀RPA可以…

GR2——在大规模视频数据集上预训练且机器人数据上微调,随后预测动作轨迹和视频(含GR1详解)

前言 上个月的24年10.9日,我在朋友圈看到字节发了个机器人大模型GR2,立马去看了下其论文(当然了,本质是个技术报告) 那天之后,我就一直想解读这个GR2来着 然,意外来了,如此文《OmniH2O——通用灵巧且可全…

Hive自定义函数—剔除周日周六(小时级别)

🐱背景🍎 Hello,小伙伴们,许久不见,最近遇到一个需求场景,关于物流时差的计算,要求算出差值是小时,且要剔除周日周六,网上很多文章,最好的也就是按照天剔除周…

C++中的继承——第二篇

一、继承与友元 友元关系不能够继承(就像父亲的朋友不一定是自己的朋友) 具体实现起来就是父类的友元可以访问父类的成员,但是不可以访问子类的成员 二、继承与静态成员 子类的静态成员变量本质上与父类的是同一份,存储在静态…

02多线程基础知识

目录 1. 线程与进程 进程(Process) 线程(Thread) 2. 并发和并行 并发(Concurrency) 并行(Parallelism) 3. CPU 调度 定义 类型 调度算法 上下文切换 4.线程间的状态流转…

基于SpringBoot+Gpt个人健康管家管理系统【提供源码+答辩PPT+参考文档+项目部署】

作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

Kotlin by lazy和lateinit的使用及区别

在 Kotlin 中,lateinit 和 by lazy 都可以用来延迟初始化变量,但它们有不同的适用场景和使用方式。下面详细介绍它们的用法和区别。 1.lateinit lateinit 关键字用于延迟初始化 可变属性 (var),主要用于那些在声明时不能立即初始化&#xf…

提高文本处理效率:精通awk命令中的$NF

在AWK编程语言中,$NF是一个特定的变量,用于引用当前处理记录中的最后一个字段值。这里的NF是AWK的一个内置变量,表示当前记录所含字段的数量。通过使用$NF,可以直接获取到与NF数值相对应的那个字段的具体内容。 示例使用 以下文件…

通讯学徒学习日记

本章内容为 长期更新模式,目前入职的第三天,学徒状态。 文章目录 前言开始接水晶头、接光纤水晶头接光纤 PON(GPON 、EPON)AON 和 PON 的详解AONPON 前言 编程虽然是爱好,但确实也想把这份爱好变成工作。但是对于目前刚…

SpringBoot在线教育系统:集成第三方服务

5系统详细实现 5.1 普通管理员管理 管理员可以对普通管理员账号信息进行添加修改删除操作。具体界面的展示如图5.1所示。 图5.1 普通管理员管理界面 5.2 课程管理员管理 管理员可以对课程管理员进行添加修改删除操作。具体界面如图5.2所示。 图5.2 课程管理员管理界面 5.3 …

【用Java学习数据结构系列】泛型上界与通配符上界

看到这句话的时候证明:此刻你我都在努力 加油陌生人 个人主页:Gu Gu Study 专栏:用Java学习数据结构系列 喜欢的一句话: 常常会回顾努力的自己,所以要为自己的努力留下足迹 喜欢的话可以点个赞谢谢了。 作者&#xff…

backtrader下的轮动策略模板,附年化20.6%的策略源码。

原创内容第700篇,专注量化投资、个人成长与财富自由。 原创日更700天,回首向来萧瑟处,也无风雨也无晴。 但行好事,莫问前程,持续改1%,为社群的同学们提供价值。 今天我们实现backtrader下的轮动策略模板…