ArkTS超新手入门(三)HarmonyOS 鸿蒙Next——初识Text
ArkTS超新手入门(三)HarmonyOS 鸿蒙Next——初识Text 之前我们已经知道怎么新建和查看项目了,今天我们一起看看代码,试一试Hello World能带来哪些变化。
首先,在预览中我们可以看到helloworld是在手机中央显示的,代码中所用到的ArkUI组件是Text组件,首先我们看这个界面,红色的是声明变量,黄色的是页面布局,蓝色的是UI组件,绿色的是组件属性。
1、我们先来看变量声明,由(变量名:变量类型=变量的值)组成。
2、再来看界面布局,这里我们使用的是RelativeContainer组件,这个是相对布局组件,用于复杂场景中元素对齐的布局。
3、接下来是UI显示组件的部分,这部分需要在布局组件内使用,比如我们常用的文本,图片,视频等,都是要写在这里的,hello world这里是用text组件,text组件的用法为:如果之前有声明的变量,可以使用text(this.变量名).其他属性
,如果没有声明的变量,这段文字不需要改变也可以text(‘文本’)
,也可以是text($r (‘文件位置’))
来引用Resource资源。
4、最后的属性,是对应上面的Text组件的,这里可以如上图竖着写,也可以像这样,横着写,一般我们为了结构清晰,都会写一个回一行,看着舒服,也好找问题,每个属性中间用.
隔开,常用的字体大小,颜色,位置都需要在这里设置,这里最需要注意的是,如果想要设置位置属性,必须要设置UI组件的宽度和高度,也就是height
和width
,这两个属性在设置时,可以使用不加单位的数字,来设置一个宽度或者高度,也可以使用‘%’
来定义相对百分比,在鸿蒙系统中,我们的应用通常需要在多种设备上使用,所以百分比的设定要比数字更常见。另外这里也可以使用预览器中的Inspector来调整,点击这个TT的图标即可,在里面选择要调整的组件和属性,代码会自动进行补全,这个也是非常的方便。
其他属性我们可以查看文档中的通用属性来查看。链接几乎每天在变,大家在文档中搜索吧~~
更多关于ArkTS超新手入门(三)HarmonyOS 鸿蒙Next——初识Text的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,Text组件用于显示文本内容。Text组件是UI框架中的基础组件之一,支持设置文本内容、字体样式、颜色、对齐方式等属性。通过Text组件,开发者可以在应用中展示静态或动态的文本信息。
在ArkTS中,使用Text组件的基本语法如下:
import { Text } from '@ohos.arkui';
@Entry
@Component
struct MyComponent {
build() {
Text('Hello, HarmonyOS!')
.fontSize(20)
.fontColor('#000000')
.textAlign(TextAlign.Center);
}
}
在上述代码中,Text('Hello, HarmonyOS!')
创建了一个Text组件,并设置了文本内容为“Hello, HarmonyOS!”。通过链式调用,可以进一步设置字体大小、颜色和对齐方式等属性。
Text组件还支持多行文本显示、文本溢出处理、文本装饰等功能。开发者可以根据需求灵活配置Text组件的属性,以实现不同的文本展示效果。
在HarmonyOS鸿蒙Next中,Text组件的使用与其他UI组件类似,遵循ArkUI框架的组件化开发模式。通过组合和配置不同的UI组件,开发者可以构建出丰富多样的用户界面。
更多关于ArkTS超新手入门(三)HarmonyOS 鸿蒙Next——初识Text的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,Text组件是用于显示文本内容的基础UI组件。它支持多种文本样式、字体大小、颜色等属性设置,开发者可以通过简单的代码实现丰富的文本展示效果。例如,使用Text('Hello, HarmonyOS!')
即可创建一个显示“Hello, HarmonyOS!”的文本组件。通过调整fontSize
、color
等属性,可以进一步定制文本的外观。Text组件在应用开发中常用于标签、提示信息、标题等场景,是构建用户界面的重要元素之一。