> 文档中心 > 梅科尔工作室-崔子旭-鸿蒙笔记2

梅科尔工作室-崔子旭-鸿蒙笔记2


常用组件

Text

设置文本样式

Text组件用于在界面上展示一段文本信息,可以包含子组件Span。

名称

参数类型

描述

fontColor

ResourceColor

设置文本颜色。

fontSize

Length | Resource

设置文本尺寸,Length为number类型时,使用fp单位。

fontStyle

FontStyle

设置文本的字体样式。默认值:FontStyle.Normal。

fontWeight

number | FontWeight | string

设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal。

fontFamily

string | Resource

设置文本的字体列表。使用多个字体,使用“,”进行分割,优先级按顺序生效。例如:“Arial,sans-serif”。

设置文本对齐方式

示例代码如下:

Text('HarmonyOS')

.width(200)

.textAlign(TextAlign.Start)

.backgroundColor(0xE6F2FD)

Start(默认值):水平左对齐

Center:水平居中对齐。

End:水平对齐尾部。

设置文本超长显示

使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。将textOverflow设置为Ellipsis ,它将显示不下的文本用 “...” 表示:

Text('This is the text content of Text Component This is the text content of Text Component')

.fontSize(16)

.maxLines(1)

.textOverflow({overflow:TextOverflow.Ellipsis})

.backgroundColor(0xE6F2FD)

设置文本装饰线

使用decoration设置文本装饰线样式及其颜色,decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。

extDecorationTyp包含以下几种类型:

  • None:不使用文本装饰线。

  • Overline:文字上划线修饰。

  • LineThrough:穿过文本的修饰线。

  • Underline:文字下划线修饰。

    • Image

Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来。

Image($r("app.media.icon"))

.width(100)

.height(100)

浏览新闻的时候,图片一般从网络加载而来,Image组件支持加载网络图片,将图片地址换成网络图片地址进行加载。

Image('https://www.example.com/xxx.png')

为了成功加载网络图片,您需要在module.json5文件中申明网络访问权限。

{

"module" : {

"requestPermissions":[

{

"name": "ohos.permission.INTERNET"

}

]

}

}

TextInput

TextInput组件用于输入单行文本,响应输入事件。下面的示例代码实现了一个简单的输入框:

TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)//字体为斜体

.fontWeight(FontWeight.Bold)//加粗

.fontFamily('Arial')

设置输入提示文本,使用placeholder属性可设置提示框的提示文字还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式,示例代码如下:

TextInput({ placeholder: '请输入帐号' })

.placeholderColor(0x999999)

.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })

效果图如下:

梅科尔工作室-崔子旭-鸿蒙笔记2

设置输入类型,可以使用type属性来设置输入框类型。

type的参数类型为InputType,包含以下几种输入类型:

  • Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。

  • Password:密码输入模式。

  • Email:e-mail地址输入模式。

  • Number:纯数字输入模式。

Button

button组件主要用来响应点击操作,可以包含子组件。

设置按钮样式,type用于定义按钮样式,stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。

  • Capsule:胶囊型按钮(圆角默认为高度的一半)。

梅科尔工作室-崔子旭-鸿蒙笔记2

  • Circle:圆形按钮。

梅科尔工作室-崔子旭-鸿蒙笔记2

  • Normal:普通按钮(默认不带圆角)。

梅科尔工作室-崔子旭-鸿蒙笔记2

设置按钮点击事件,可以给Button绑定onClick事件,每当用户点击Button的时候,就会回调执行onClick方法,调用里面的逻辑代码

Button('登录', { type: ButtonType.Capsule, stateEffect: true })

...

.onClick(() => {

// 处理点击事件逻辑

})

布局容器

  • Column表示沿垂直方向布局的容器。

  • Row表示沿水平方向布局的容器。

  • 主轴:在Column容器中的子组件是按照从上到下的垂直方向布局的,其主轴的方向是垂直方向;在Row容器中的组件是按照从左到右的水平方向布局的,其主轴的方向是水平方向。

  • 交叉轴:与主轴垂直相交的轴线,如果主轴是垂直方向,则交叉轴就是水平方向;如果主轴是水平方向,则交叉轴是垂直方向。

属性名称

描述

justifyContent

设置子组件在主轴方向上的对齐格式。

alignItems

设置子组件在交叉轴方向上的对齐格式。

1. 主轴方向的对齐(justifyContent)

Start:元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。

梅科尔工作室-崔子旭-鸿蒙笔记2

  • Center:元素在主轴方向中心对齐,第一个元素与行首的距离以及最后一个元素与行尾距离相同。

  • End:元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。

  • SpaceBetween:元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。

  • SpaceAround:元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

  • SpaceEvenly:元素在主轴方向等间距布局,无论是相邻元素还是边界元素到容器的间距都一样。

2. 交叉轴方向的对齐(alignItems)

  • Start:设置子组件在水平方向上按照起始端对齐。

  • Center(默认值):设置子组件在水平方向上居中对齐。

  • End:设置子组件在水平方向上按照末端对齐。

Row容器的主轴是水平方向,交叉轴是垂直方向,其参数类型为VerticalAlign(垂直对齐),VerticalAlign定义了以下几种类型:

  • Top:设置子组件在垂直方向上居顶部对齐。

  • Center(默认值):设置子组件在竖直方向上居中对齐。

  • Bottom:设置子组件在竖直方向上居底部对齐。