HarmonyOS | UI开发 (一) | 基础组件(Text/Span,TextInput/TextArea,Button,Image)

这篇具有很好参考价值的文章主要介绍了HarmonyOS | UI开发 (一) | 基础组件(Text/Span,TextInput/TextArea,Button,Image)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


个人博客主页 : 谭祖爱 & 技术博客

项目实例地址 : RecordHarmonyOSProject


前言

鸿蒙操作系统作为华为推出的全新分布式操作系统,为开发者提供了丰富的组件库,使得开发者能够快速构建功能强大、界面美观的应用程序。本文将深入探讨鸿蒙应用开发中常用的组件,帮助开发者更好地理解和应用这些组件,提升开发效率和用户体验。


一、基础组件

基础组件:Text/Span,TextInput/TextArea,Button,Image


1.1.Text的概述

Text是文本组件,通常用于展示用户的视图,如显示文章的文字

1.2.Text的创建方式

Text创建方式:1.string字符串,2.引用Resource资源

- string字符串创建

Text('我是一段文本')

- 引用Resource资源

通过 $r('app.string.xxx') 引用 string.json 文件中的 xxx(属性名) 对于的值

Text($r('app.string.app_name'))
        .baselineOffset(0)
        .fontSize(30)
        .border({ width: 1 })
        .padding(10)
        .width(300)

1.3.Text自定义文本样式

- 通过textAlign属性设置文本对齐样式

Text('左对齐')
  .width(300)
  .textAlign(TextAlign.Start)

Text('中间对齐')
  .width(300)
  .textAlign(TextAlign.Center)

Text('右对齐')
  .width(300)
  .textAlign(TextAlign.End)

- 通过textOverflow属性控制文本超长处理

Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
          .width(250)
          .textOverflow({overflow:TextOverflow.None})
          .maxLines(1)
          .fontSize(12)
          .border({width:1}).padding(10)

Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
          .width(250)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .maxLines(1)
          .fontSize(12)
          .border({width:1}).padding(10)

- 通过lineHeight属性设置文本行高

Text('This is the text with the line height set. This is the text with the line height set.')
  .width(300).fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text with the line height set. This is the text with the line height set.')
  .width(300).fontSize(12).border({ width: 1 }).padding(10)
  .lineHeight(20)

- 通过copyOption属性设置文本是否可复制粘贴

Text("这是一段可复制文本")
  .fontSize(30)
  .copyOption(CopyOptions.InApp)

1.4.Text添加事件

Text('点我')
.onClick(()=>{
    console.info('我是Text的点击响应事件');
 })

2.1.Span的概述

Span只能作为Text组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息

2.2.创建Span

Text('我是Text') {
    Span('我是Span')
}
.padding(10)
.borderWidth(1)

- Span设置文本装饰线及颜色

Text() {
       Span('我是Span1,').fontSize(16).fontColor(Color.Black)
         .decoration({type:TextDecorationType.None})
       Span('我是Span1,').fontSize(16).fontColor(Color.Grey)
         .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
       Span('我是Span2').fontColor(Color.Blue).fontSize(16)
         .fontStyle(FontStyle.Italic)
         .decoration({ type: TextDecorationType.Underline, color: Color.Black })
       Span(',我是Span3').fontSize(16).fontColor(Color.Grey)
         .decoration({ type: TextDecorationType.Overline, color: Color.Green })
}
.borderWidth(1)
.padding(10)

- Span通过textCase设置文字一直保持大写或者小写状态

Text() {
      Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase)
}
.borderWidth(1)
.padding(10)

2.3.Span添加事件

Text() {
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
    .onClick(()=>{
      console.info('我是Span——onClick')
    })
}

3.1.TextInput的概述

TextInput 是单行输入框组件,通常用于响应用户的输入操作

3.2.TextInput的创建

TextInput()

- 设置输入框类型

TextInput有5种可选类型,分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。通过type属性进行设置:

  • 基本输入模式(默认类型)
TextInput().type(InputType.Normal)
  • 密码输入模式
TextInput().type(InputType.Password)
  • Email邮箱地址输入模式
TextInput().type(InputType.Email)
  • Number纯数字输入模式
TextInput().type(InputType.Number)
  • PhoneNumber电话号码输入模式
TextInput().type(InputType.PhoneNumber)

- 自定义样式

  • 设置无输入时的提示文本
TextInput({placeholder:'我是提示文本'})
  • 设置输入框当前的文本内容
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
  • 添加backgroundColor改变输入框的背景颜色
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}).backgroundColor(Color.Pink)

3.3.添加事件

TextInput()
  .onChange((value: string) => {
    console.info(value);
  })
  .onFocus(() => {
    console.info('获取焦点');
  })

4.1.TextArea的概述

TextArea 是 多行输入框

4.2.TextArea的创建

TextArea()

- 多行输入框文字超出一行时会自动折行

TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)

5.1.Button的概述

Button是按钮组件,通常用于响应用户的点击操作

5.2.Button的创建

Button通过调用接口来创建,接口调用有以下两种形式

  • 创建不包含子组件的按钮
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)
  • 创建包含子组件的按钮
Button({ type: ButtonType.Normal, stateEffect: true }) {
	  Row() {
	    Image($r('app.media.app_icon')).width(20).height(40).margin({ left: 12 })
	    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
	  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

- 设置按钮类型

Button有三种可选类型,分别为Capsule(胶囊类型)、Circle(圆形按钮)和Normal(普通按钮),通过type进行设置

  • 胶囊按钮(默认类型)
Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
      .backgroundColor(0x317aff)
      .width(90)
      .height(40)
  • 圆形按钮
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)
  • 普通按钮
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

5.3.添加事件

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .onClick(()=>{ 
    console.info('Button onClick') 
  })

6.1.Image的概述

Image是显示图片组件,比如:按钮中的icon、网络图片、本地图片等

6.2.Image的获取图片的三种方式

  • 本地资源
Image('images/like.png').size({width: 100,height:100})
  • 网络资源
Image('https://www.wanandroid.com/resources/image/pc/logo.png').size({width: 300,height:300})

注:获取网络图片,需要申请网络权限,在 module.json5 中配置。文章来源地址https://www.toymoban.com/news/detail-838526.html

  • Resource资源
Image($r('app.media.like')).size({width: 100,height:100})

二、总结

  1. Text是文本组件,用于显示文字
  2. Span只能作为Text组件的子组件显示文本内容,可以在一个Text内添加多个Span来显示一段信息
  3. TextInput 是单行输入框组件,通常用于响应用户的输入操作
  4. TextArea 是 多行输入框
  5. Button是按钮组件,通常用于响应用户的点击操作
  6. Image是显示图片组件

到了这里,关于HarmonyOS | UI开发 (一) | 基础组件(Text/Span,TextInput/TextArea,Button,Image)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 RadioButton

    目录 支持的XML属性 创建RadioButton 设置RadioButton 设置单选按钮的字体颜色 设置状态标志样式 RadioButton用于多选一的操作,需要搭配RadioContainer使用,实现单选效果。 RadioButton的共有XML属性继承自:Text RadioButton的自有XML属性见下表: 表1  RadioButton的自有XML属性

    2024年01月24日
    浏览(49)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PopupDialog

    目录 接口说明 构造方法 常用方法 创建和使用 创建参照的组件 创建气泡对话框 使用气泡对话框 修改对齐模式/

    2024年01月18日
    浏览(43)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PageSlider

    目录 支持的XML属性 PageSlider的创建和使用 PageSlider的常用方法 常用方法 响应页面切换事件 设置布局方向 设置缓存当前页面左右两侧的页面数

    2024年01月22日
    浏览(54)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 WebView

    目录 WebView的使用方法 浏览网页历史记录 使用JavaScript 观测Web状态 观测浏览事件 定制网址加载行为 加载资源文件或本地文件 WebView提供在应用中集成Web页面的能力。 说明 请使用真机

    2024年01月20日
    浏览(46)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件Switch

    目录 支持的XML属性 创建Switch 设置Switch Switch是切换单个设置开/关两种状态的组件。 Switch的共有XML属性继承自:Text Switch的自有XML属性见下表: 表1  Switch的自有XML属性 属性名称 中文描述 取值 取值说明 使用案例 text_state_on

    2024年01月18日
    浏览(58)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PageSliderIndicator

    目录 PageSliderIndicator的创建和使用 PageSliderIndicator的常用方法 关联PageSlider 响应页面切换事件 设置所选导航点的页面位置 设置导航点的背景 设置导航点之间的偏移量 PageSliderIndicator,

    2024年01月16日
    浏览(44)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件TimePicker

    目录 支持的XML属性 使用TimePicker 显示样式配置 范围选择设置 TimePicker主要供用户选择时间。 TimePicker的共有XML属性继承自:StackLayout TimePicker的自有XML属性见下表: 表1  TimePicker的自有XML属性 属性名称 中文描述 取值 取值说明

    2024年02月21日
    浏览(53)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 ToastDialog

    目录 接口说明 构造方法 常用方法 创建和使用 创建一个ToastDialog 设置位置 自定义ToastDialog的Component

    2024年01月19日
    浏览(45)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 ScrollView

    目录 支持的XML属性 创建ScrollView 设置ScrollView 根据像素数平滑滚动 平滑滚动到指定位置 设置布局方向 设置回弹效果

    2024年01月18日
    浏览(47)
  • HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)

    HarmonyOS提供了一套复杂且强大的Java UI框架,其中Component提供内容显示,是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象,并对它们进行布局。 Java UI框架也提供了一部分Component和ComponentContainer的具体子类,即常用的组件(比如:Text、Button、

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包