HarmonyOS实战—Text组件宽高三种值的写法和颜色属性

简介: HarmonyOS实战—Text组件宽高三种值的写法和颜色属性

1. 文本组件(Text)

  • 概述:

文本(Text)是用来显示字符串的组件,在界面上显示为一块文本区域。仅仅作为展示数据使用,用户不能在App中修改文本组件中的内容。

  • Text组件是最基本的组件,后面还会学习其他的子类组件,比如ButtonTextField都是从这个类衍生而来的。
  • 在右侧登录页面中,用户名和密码是用文本框实现的

在这里插入图片描述

在这里插入图片描述

1.1 宽高属性

  • match_context:表示文本框的内容有多大,文本框本身就有多大,全部包裹内容

在这里插入图片描述

  • match_parent:文本框外面的布局其实就是文本框的父元素。简单理解:谁包裹了文本框谁就是文本框的父元素。

在这里插入图片描述

  • 具体数值:单位为像素(px)

在这里插入图片描述

1.2 长度单位(像素px)

  • 平时所说的2K屏或4K屏说的就是最大分辨率在这里插入图片描述
  • 如:2K屏就是由宽:1920个小格子和高:1080个小格子组成的

在这里插入图片描述

  • 手机端的分辨率

在这里插入图片描述

2. 宽高三种值的写法

2.1 宽高为:match_content

在这里插入图片描述

2.2 宽高为:match_parent,铺满整个父元素

在这里插入图片描述

2.3 宽高为:具体的值

  • 具体的值,如果没带单位,默认为像素(px),如:设置宽高为200px
  • 200px只能展示200像素,如果文本内容多展示不下,200px能展示多少就展示多少,剩下来的就不会再展示了

在这里插入图片描述

3. vp 和 fp

  • 具体的长度单位:px,vp,fp

dp(安卓里面的单位,跟鸿蒙中的vp是一样的)
vp(虚拟像素)长度单位

在这里插入图片描述

  • px像素表示写死的固定大小,在所以的分辨率下所有的长度都是固定
  • 如下:在一个小一点屏幕下固定的大小组件就会显示不下

在这里插入图片描述

  • 鸿蒙手机可以搭载在其他设备上,而其他设备的分辨率是无法确定的,所以以后在定义大小的时候,如果是需要写具体的数值,单位最好不要用像素px,像素会导致组件的大小是定死的。

3.1 长度单位(虚拟像素vp)

  • 有没有一种单位可以考虑到手机大小,灵活指定宽高呢? vp

在这里插入图片描述

  • 屏幕的尺寸也是斜着量的,假设为:6寸

在这里插入图片描述

  • PPI = 2202.9 / 6 ≈ 367.15,表示这部手机每英寸上有367.15个像素点

在这里插入图片描述

  • 如果设置的这部手机组件的宽度为:100px,那么就可以根据上面的公式来计算得出 vp

在这里插入图片描述

  • 一旦单位为:vp,手机在显示的时候,就会根据手机自身的分辨率和手机自身的尺寸灵活的指定组件的宽高,让不同的手机在显示同一个界面的时候尽可能的保持一样的风格

在这里插入图片描述

  • 计算的时候有点麻烦,要计算对角线像素点个数和屏幕尺寸,所以在业内有一个默认的标准,默认的标准可以帮我们进行快速的转换,计算出来的结果不是最精确的结果,而是一个近似值,但是近似值在使用或展示的时候影响并不是很大。

在这里插入图片描述

3.2 fp(字体大小)

  • vpfp的计算方式是一样的。
  • vp是长度单位,用于宽,高等。
  • fp是大小单位,用于字体大小(类似安卓里的sp)。比如40fp

4. 测试 px 和 vp 两种方式指定宽高大小的区别

  • 打开模拟器,进行单位换算,P40:1080*2340 跟上面的 1920*1080 差不多

在这里插入图片描述

  • 所以就可以用1:3 的关系来表示

ability_main.xml

  • 显示的内容为数字:12,上面的Text大小用px表示,下面的Text用vpfp表示,按照1:3的大小
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:height="200px"
        ohos:width="200px"
        ohos:text="12"
        ohos:text_size="150"
        ohos:background_element="red"
        >

    </Text>
    
    <Text
        ohos:height="67vp"
        ohos:width="67vp"
        ohos:text="12"
        ohos:text_size="50fp"
        ohos:background_element="red"
        >

    </Text>

</DirectionalLayout>
  • 运行:

在这里插入图片描述

  • 组件大小是差不多的,所以以后在指定宽高、字体大小的时候就可以使用vpfp
  • fp字体大小单位。不缩放的情况下fp=vp
  • 如果有缩放。 1fp = 1vp * 缩放比例
  • 如果不写单位,默认单位是px

5. 颜色属性

  • 在之前的代码当中,都是使用英文单词来表示的颜色,有些局限性。
  • 下面就可以使用 #16进制来表示

在这里插入图片描述

5.1 三原色

  • 美术上的红黄蓝三种颜色就可以搭配出五彩缤纷的颜色

在这里插入图片描述

  • 在计算机当中也有三原色,分别为:红绿蓝,这称之为光学三原色
  • 在计算机里的里面的每一个像素就是由红绿蓝三部分组成的

在这里插入图片描述

  • 把屏幕放大后:每一个红绿蓝组成的整体其实就是一个像素点,很多像素点在一起就是一个完整的图片。

在这里插入图片描述

  • 在计算机当中,通过上三种颜色(红绿蓝)的搭配就可以组成五彩缤纷的颜色了。

如何把这三种颜色组合在一起搭配出各种各样的颜色呢?

  • 给这三种颜色设置不同的值,值越大表示当前的颜色越浓,值越小,表示当前的颜色越淡
  • 如果红色的值设置为:43,蓝色:123,绿色:194,那么就可以这样理解了,用43份红色颜料跟123份绿色颜料、194份蓝色颜料,掺杂在一起后颜色

在这里插入图片描述

  • 通过三原色的搭配就可以形成各种颜色了

在这里插入图片描述

  • 如果设置为 255,表示设置的当前颜色为最浓。设置为 0,表示不要当前的颜色

在这里插入图片描述

  • 也可以用十六进制表示,十进制的255对应FF,所以十六进制下最大就为FF

在这里插入图片描述

  • 下面就可以使用三原色的形式来书写布局 ability_main
  • 在 xml 中不能写十进制的,只能写十六进制
  • 下面的 #917643,表示的是 91 表示红色、76 表示绿色、43 表示蓝色
<Text
    ohos:height="200px"
    ohos:width="200px"
    ohos:text="12"
    ohos:text_size="150"
    ohos:background_element="#917643"
    >

</Text>

<Text
   ohos:height="67vp"
   ohos:width="67vp"
   ohos:text="12"
   ohos:text_size="50fp"
   ohos:background_element="#1188DD"
   >

</Text>

在这里插入图片描述

  • 颜色的设置还可以给他设置透明度,在颜色的前面写透明度
  • 如:前面加上 00,左边的颜色就没有了,说明当前的颜色是纯透明的

在这里插入图片描述

  • 前面设置FF,说明FF表示不透明

在这里插入图片描述

  • 如果要在颜色前面设置透明度,就可以这样写。相较于前面的褐色就稍微淡了点

在这里插入图片描述

  • 扩展:写三原色的时候是可以省略的,条件就是:当三组颜色中的两个值是一样的,如:#1188DD11、88、DD都是一样的值,就可以写成:

在这里插入图片描述

  • 这是一个简略的写法。但如果是这样的就不能那样简略的写了,如:#11881D,必要要三组颜色中的每一组数值都是一样才能简略地写。

5.2 颜色属性小节

  1. 计算机中的颜色采用光学三原色。
  2. 分别为:红( red),绿( green),蓝( blue)。
  3. 计算机中的三原色,也称之为RGB
  4. 可以写成十进制形式。(255,255,255)
  5. 也可以写成十六进制形式。(#FFFFFF)
  6. 颜色前面可以写透明度。(#FFFFFFFF) (#00FFFFFF)
  7. 十六进制中表示形式可以省略。(#18D),(简写的时候不能加透明度)
  8. 十六进制表示法中,如果不足6位,则补全6位。#5901(前面补0,满足6位,不利于阅读)
  9. 一般来讲,代码中创建RGB的对象,采用十进制。
  10. xml文件中设置颜色采用十六进制。
目录
相关文章
|
5天前
|
JSON 前端开发 网络架构
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。
140 101
鸿蒙开发:一文探究Navigation路由组件
|
4天前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
11天前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
75 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
|
4天前
鸿蒙开发:组件样式的复用
如果要实现多页面之间的组件属性样式复用,建议使用AttributeModifier,如果是单页面,通用属性可以使用@Styles,组件自有属性可以使用@Extend。
鸿蒙开发:组件样式的复用
|
11天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
97 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
7天前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
70 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
10天前
|
JavaScript Java 容器
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
导读:在本篇文章里,您将掌握层叠布局、自定义组件的用法,特别是自定义组件将来的开发中必然会用,其中应该特别关注自定义组件的一些规范与装饰器。
44 7
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
|
9天前
鸿蒙开发:一个轻盈的上拉下拉刷新组件
在和可滑动组件使用的时候,记得一定要和nestedScroll属性配合使用,用于解决滑动冲突,除此之外,还需要传递滑动组件的scroller属性,用于手势操作。
鸿蒙开发:一个轻盈的上拉下拉刷新组件
|
5天前
|
人工智能 自然语言处理 文字识别
自学记录鸿蒙API 13:实现智能文本识别Core Vision Text Recognition
在完成语音助手项目后,我尝试了HarmonyOS Next API 13中的Core Vision Text Recognition API,体验其强大的文本识别功能。该API支持多语言高精度识别,能快速将图像中的文本提取为结构化信息,适用于文档扫描、票据管理和实时翻译等场景。通过权限配置、初始化服务、实现识别功能和构建用户界面,我完成了文本识别应用的开发,并探索了性能优化与功能扩展。鸿蒙生态的强大支持让开发者能更便捷地实现复杂功能。未来计划将此技术应用于实际项目,如票据管理或实时翻译工具。如果你也对文本识别感兴趣,不妨一起探索!
62 11
|
3天前
|
前端开发 中间件 索引
鸿蒙开发:Navigation路由组件使用由繁入简
使用了插件和路由库之后,在每个Module下都会生成一个路由配置文件,以Module名字+RouterConfig为文件命名,此路由配置文件,也会在AbilityStage中,通过routerInitConfig方法进行自动配置。

热门文章

最新文章