HarmonyOS系统开发ArkTS常用组件文本及参数（五）

目录

一、Text组件

1、Text组件案例

二、Text组件参数

1、string字符串类型

2、Resources类型

2.1、resources中内容配置

base/element/string.json 中的内容

zh_US/element/string.json 中的内容

es_US/element/string.json 中的内容

2.2、环境适配

        适配英文

        适配中文

三、Text常用属性

1、fontSize()

2、fontWeight()

3、fontColor()

一、Text组件

鸿蒙中的文本组件是Text， Text组件的参数类型为：string | Resource，

  • string字符串类型，如 Text('这是一段文本，我是字符串类型')
  • Resource类型：使用$r()引用，定义的字符串内容在resources/*/element的string.json文件

1、Text组件案例

@Entry
@Component
struct Index {@State isOn: boolean = false;@State isDel: boolean = false;build() {Column({ space: 10 }) {Text("你好 鸿蒙").fontSize(50)Text($r("app.string.greeting")).fontSize(50)}.width('100%').height("100%").justifyContent(FlexAlign.Center)}
}

      

二、Text组件参数

1、string字符串类型

Text("你好 鸿蒙").fontSize(50)

2、Resources类型

        Text组件中的参数的文字内容可是字符串直接写死在代码中，也可是编辑到resources目录下下的不用环境的配置文件中，如base、en_Us、zh_Us目录下的element中的 String.json文件。

       如下图所示，Text组件中的$r("app.string.greeting")文本可以写到 三个不同目录的环境中，根据不同的环境适配不同的内容。但注意，在配置时候必须三个文件中都配置，否则会显示报错，如：

2.1、resources中内容配置

base/element/string.json 中的内容
{"string": [{"name": "module_desc","value": "module description"},{"name": "EntryAbility_desc","value": "description"},{"name": "EntryAbility_label","value": "label"},{"name": "greeting","value": "你好 鸿蒙 base"}]
}
zh_US/element/string.json 中的内容
{"string": [{"name": "module_desc","value": "模块描述"},{"name": "EntryAbility_desc","value": "description"},{"name": "EntryAbility_label","value": "label"},{"name": "greeting","value": "你好 鸿蒙 zh"}]
}
es_US/element/string.json 中的内容
{"string": [{"name": "module_desc","value": "module description"},{"name": "EntryAbility_desc","value": "description"},{"name": "EntryAbility_label","value": "label"},{"name": "greeting","value": "hello harmony en"}]
}

2.2、环境适配

        适配英文

        当我们选择en_us时候，会自动的选择适配环境 en_US/element/string.json中的适配内容。

        适配中文

        我们选择zh_us时候，会自动的选择适配环境 zh_US/element/string.json中的适配内容。

三、Text常用属性

  • 字体大小：fontSize()  方法进行设置，该方法参数类型为 string | number | Resource
  • 字体粗细：fontWeight()方法进行设置，该方法参数类型为 string | number | FontWeight
  • 字体颜色：fontColor() 方法进行设置，该方法参数类型为 string | number | Resource   |Color
  • 文本对齐：
  •                TextAlign.Start       首部对齐 
  •                TextAlign.Center    居中对齐 
  •                TextAlign.End         尾部对齐 

1、fontSize()

  • string       ：指定字体大小的具体单位，例如fontSize('100px')、例如fontSize('100fp')
  • number    ：数值，默认单位 fp 
  • Resource ：引用resources下的element目录中定义的数值
@Entry
@Component
struct Index {@State isOn: boolean = false;@State isDel: boolean = false;build() {Column({ space: 10 }) {Text("你好 鸿蒙").fontSize('150px')Text("你好 鸿蒙").fontSize('50fx')Text("你好 鸿蒙").fontSize(50)}.width('100%').height("100%").justifyContent(FlexAlign.Center)}
}

2、fontWeight()

  • string       ：数字与样式字符串，例如例如'100'和bold
  • number    ：[100,900]，取值间隔为100，默认为400，值越大，字体越粗。
  • FontWeight：枚举类型
@Entry
@Component
struct Index {@State isOn: boolean = false;@State isDel: boolean = false;build() {Column({ space: 10 }) {Text("你好 鸿蒙").fontSize(50)Text("你好 鸿蒙").fontSize(50).fontWeight(600)Text("你好 鸿蒙").fontSize(50).fontWeight(500)Text("你好 鸿蒙").fontSize(50).fontWeight(FontWeight.Bold)Text("你好 鸿蒙").fontSize(50).fontWeight('bolder')}.width('100%').height("100%").justifyContent(FlexAlign.Center)}
}

3、fontColor()

  • string       ：'rgb(0, 128, 0)'或者'#008000'
  • number    ：16进制的数字如 0x008000
  • Resource ：引用resources下的element目录中定义的数值
  • Color        ：枚举类型，例如Color.Green
@Entry
@Component
struct Index {@State isOn: boolean = false;@State isDel: boolean = false;build() {Column({ space: 10 }) {Text("你好 鸿蒙").fontSize(50).fontColor(Color.Green)Text("你好 鸿蒙").fontSize(50).fontWeight(600).fontColor(Color.Orange)Text("你好 鸿蒙").fontSize(50).fontWeight(500).fontColor(Color.Blue)}.width('100%').height("100%").justifyContent(FlexAlign.Center)}
}@Entry
@Component
struct FontColorPage {build() {Column({ space: 50 }) {Text('Color.Green').fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Green)Text('rgb(0, 128, 0)').fontSize(40).fontWeight(FontWeight.Bold).fontColor('rgba(59, 171, 59, 0.33)') // rgba 表示透明度Text('#008000').fontSize(40).fontWeight(FontWeight.Bold).fontColor('#a4008000')Text('0x008000').fontSize(40).fontWeight(FontWeight.Bold).fontColor(0xa4008000)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

4、文本对齐

@Entry
@Component
struct Index {@State isOn: boolean = false;@State isDel: boolean = false;build() {Column({ space: 10 }) {Text("文本对齐：TextAlign.Start首部对齐、TextAlign.Center 居中对齐、TextAlign.End尾部对齐").fontSize(20).textAlign(TextAlign.Start)Text("文本对齐：TextAlign.Start首部对齐、TextAlign.Center 居中对齐、TextAlign.End尾部对齐").fontSize(20).textAlign(TextAlign.End)Text("文本对齐：TextAlign.Start首部对齐、TextAlign.Center 居中对齐、TextAlign.End尾部对齐").fontSize(20).textAlign(TextAlign.Center)}.width('100%').height("100%").justifyContent(FlexAlign.Center)}
}

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

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

相关文章

【Bug】记录2024年遇到的Bug以及修复方案

【Bug】记录2024年遇到的Bug以及修复方案

--------------------------------------------------------分割线 2024.3.22------------------------------------------------------- 1、load_sample_image raise AttributeError(“Cannot find sample image: %s” % image_name) AttributeError: Cannot find sample ima…
阅读更多...
Linux--Ubuntu安装【保姆级教程】

Linux--Ubuntu安装【保姆级教程】

Linux操作系统时程序员必须要学的操作系统。接下来我们就来看一下Linux操作系统是如何安装的 我们在 Vmware 虚拟机中安装 linux 系统，所以需要先安装 vmware 软件，然后再 安装 Linux 系统。 一.所需安装文件： Vmware 下载地址(现在最新版的…
阅读更多...
springboot+vue考试管理系统

springboot+vue考试管理系统

基于springboot和vue的考试管理系统 001 springboot vue前后端分离项目 本文设计了一个基于Springbootvue的前后端分离的在线考试管理系统，采用M（model）V（view）C（controller）三层体系结构&…
阅读更多...
【JS】for in可能遇到的问题

【JS】for in可能遇到的问题

问题一：for in 打印属性顺序与定义顺序不一致 先来做一道题，请说出打印结果 const obj {a2: aaa,2: aaa,1: aaaa,a1: aaa, }for(let key in obj){console.log(key) }结果： 1 2 a2 a1 属性的书写顺序不一定就是对象遍历时的顺序。这涉及到…
阅读更多...
【2】华为交换机如何修改Web登录密码?

【2】华为交换机如何修改Web登录密码?

0x01 问题描述 如果忘记了Web登录密码或者希望修改Web登录密码&#xff0c;用户可以通过Console口、STelnet或Tenet等方式登录交换机后设置新的Web登录密码。 使用Telnet协议存在安全风险&#xff0c;建议使用Console囗或STelnet V2登录设备 0x02 问题解决 <HUAWEI> s…
阅读更多...
前端应用开发实验：条件渲染和循环渲染

前端应用开发实验：条件渲染和循环渲染

目录 实验目的相关知识点实验内容图片的隐藏和显示代码实现效果 电影票房排序代码实现效果 代办事项记录代码实现效果 实验目的 (1)熟练掌握v-on 指令的用法&#xff0c;学会使用v-on 指令监听DOM元素的事件&#xff0c;并通过该事件触发调用事件处理程序。 (2)掌握v-on指令修…
阅读更多...
算法---排序

算法---排序

目录 插入排序插入排序的思想代码实现 冒泡排序冒泡排序的思想代码实现 堆排序堆排序的基本思想代码实现 希尔排序希尔排序基本思想代码实现 选择排序选择排序基本思想代码展示 总结 插入排序 插入排序的思想 简单来说&#xff0c;插入排序就时将一个数插入一个数插入一个有序…
阅读更多...
使用 ReclaiMe Pro 查找并恢复网络中的 SSH 服务器数据

使用 ReclaiMe Pro 查找并恢复网络中的 SSH 服务器数据

天津鸿萌科贸发展有限公司是 ReclaiMe Pro 数据恢复软件的授权代理商。ReclaiMe Pro 数据恢复软件专注于恢复几乎所有文件系统及各种类型和复杂程度的 RAID 阵列。 在本文中&#xff0c;我们介绍 ReclaiMe Pro 对于采用 SSH 连接方式的网络服务器中数据的恢复方法。 ReclaiMe…
阅读更多...
设计模式及其在项目、框架中的应用

设计模式及其在项目、框架中的应用

设计模式的作用&#xff1a; 1、类之间关系图&#xff0c;明确的角色及其关系、作用&#xff1b; 2、符合开闭原则&#xff0c;职责明确&#xff0c;并且开放的拓展点可以有效应对后期的变化。 &#xff08;一&#xff09;、责任链模式 适用场景&#xff1a; 在一个流程中&…
阅读更多...
HWL-41无辅源静态电流继电器 0.5-9.99A 导轨安装 JOSEF约瑟

HWL-41无辅源静态电流继电器 0.5-9.99A 导轨安装 JOSEF约瑟

HWL-40系列无辅源静态电流继电器 HWL-41HWL-42 HWL-43HWL-61 HWL-62HWL-63 HWL-71HWL-72 HWL-73HWL-81 HWL-82HWL-83 产品概述 1、HWL系列集成电路无辅源电流继电器用于发电机、变压器和输电线的过负荷和短路保护装置中作为启动元件。本继电器为集成电路静态型继电器&a…
阅读更多...
Token的详解

Token的详解

Token的详解 文章目录 Token的详解前言:简介:使用token&#xff1a; 前言: 为什么会用到Token&#xff0c;因为cookie和session一些自身的缺点&#xff0c;限制了一些功能的实现&#xff0c;比如&#xff1a; cookie&#xff1a;优点是节省服务器空间&#xff0c;缺点不安全。…
阅读更多...
启动Vue-demo时引发的一系列问题—解决办法

启动Vue-demo时引发的一系列问题—解决办法

目录 1.初始遇到的问题&#xff1a;输入npm run dev 1.治标的解决方法 2.治本的解决方法 第一步&#xff1a;检查是否安装了cnpm 第二步&#xff1a;手动找到cnpm目录 第三步&#xff1a;配置系统环境变量 第四步&#xff1a;查看是否安装成功 1.初始遇到的问题&#xf…
阅读更多...
宝塔面板系列——两种方式安装青龙面板

宝塔面板系列——两种方式安装青龙面板

因为最近旧windows服务器到期了&#xff0c;在搬服务器&#xff0c;新服务器尝试用Linux系统。过程中有很多不懂的地方&#xff0c;只能边搬迁边学边弄&#xff0c;顺带记录下来&#xff0c;哪天又要搬迁了&#xff0c;翻翻自己的文章也就一应俱全了。 非科班出身&#xff0c;选…
阅读更多...
【计算机网络实践】Cisco Packet Tracer局域网组网（FTP服务器通过交换机连接客户端）

【计算机网络实践】Cisco Packet Tracer局域网组网（FTP服务器通过交换机连接客户端）

本文为应对计算机网络第一次实验所写的预习报告 一、实验准备 一台装有Cisco Packet Tracer的PC机&#xff0c;一个大学生大脑。 二、了解FTP和Cisco Packet Tracer 具体内容可在百度搜索&#xff0c;在物理机上用FileZilla Server实现ftp可参看我前面的文章。Cisco Packet Tr…
阅读更多...
【LabVIEW FPGA入门】FPGA不同传递数据方法比较

【LabVIEW FPGA入门】FPGA不同传递数据方法比较

数据共享方法的选择应基于应用的需要。根据应用程序的重要特性&#xff0c;所讨论的任何一种方法都可能是合适的。 传输方法FPGA资源损耗&#xff1f;不同时钟源之间传递数据&#xff1f;新数据通知&#xff1f;常见用途变量逻辑片是是否提取最新数据存储器存储器是否否提取最新…
阅读更多...
深入理解MySQL中的JOIN算法

深入理解MySQL中的JOIN算法

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、引言二、嵌套循环连接&#xff08;Nested-Loop Join&#xff09;2.1 工作原理2.2 性能考虑2.3 优化策略 三、块嵌套循环…
阅读更多...
Java代码基础算法练习-递归求数-2024.03.22

Java代码基础算法练习-递归求数-2024.03.22

任务描述&#xff1a; 利用递归函数调用方式&#xff0c;将所输入的5个字符&#xff0c;以相反顺序打印出来。 任务要求&#xff1a; 代码示例&#xff1a; package march0317_0331;import java.util.Scanner;/*** m240322类&#xff0c;提供了一个反转输入字符串前5个字符的…
阅读更多...
软考复习笔记day3（计算机体系结构和指令系统基础）（精简版）

软考复习笔记day3（计算机体系结构和指令系统基础）（精简版）

计算机体系结构分类 处理机数量分类&#xff1a; 单处理&#xff08;一个处理单元&#xff09;并行处理系统&#xff08;两个以上处理机互联&#xff09;.分布式处理系统 Flynn分类&#xff1a;&#xff08;常考&#xff09; 以指令流和数据流进行区别 指令流由控制部分进…
阅读更多...
vue3初步学习

vue3初步学习

vue3初步学习 vue模版 练习代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>实验4</ti…
阅读更多...
计算机二级（python）【二】

计算机二级（python）【二】

真题5 1、考生文件夹下存在一个文件PY101.py&#xff0c;请写代码替换横线&#xff0c;不修改其他代码&#xff0c;实现以下功能&#xff1a; 键盘输入正整数n&#xff0c;按要求把n输出到屏幕&#xff0c;格式要求&#xff1a;宽度为15个字符&#xff0c;数字右边对齐&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023