「Mac 畅玩鸿蒙与硬件 11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解

简介: 本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容,你将学习如何使用 Text 组件显示文本、格式化文本样式,以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。

本篇将详细介绍鸿蒙应用开发中的 TextButton 组件。通过本篇内容,你将学习如何使用 Text 组件显示文本、格式化文本样式,以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。

20241027_093327.gif20241027_093327.gif

关键词
  • Text 组件
  • Button 组件
  • 样式设置
  • 事件响应
  • 状态管理

一、Text 组件基础

Text 组件用于显示文本,支持字体大小、颜色、对齐等样式设置,方便开发者根据需求展示不同的文本信息。

1.1 基本用法
  • 直接在 Text 组件中插入字符串或变量来显示文本:

    // 创建一个 Text 组件,显示简单的文本内容
    Text('Hello, HarmonyOS!')
    
1.2 设置文本样式
  • 通过链式调用设置字体大小、粗细和颜色等样式:

    // 设置字体大小、粗细和颜色
    Text('Hello, HarmonyOS!')
      .fontSize(24) // 字体大小为 24
      .fontWeight(FontWeight.Bold) // 加粗显示
      .fontColor(Color.Blue) // 文本颜色为蓝色
    
1.3 文本对齐方式
  • 使用 alignSelf 设置 Text 的对齐方式,例如居中对齐:

    // 设置文本在容器中居中对齐
    Text('Welcome to HarmonyOS')
      .alignSelf(ItemAlign.Center)
      .fontSize(20) // 字体大小为 20
    
1.4 多行显示
  • 使用 maxLines 属性限制最大行数,或通过 textOverflow 设置溢出显示方式:

    // 设置最多显示 2 行,溢出时显示省略号
    Text('这是一个非常长的文本,超过一定行数会显示省略号。')
      .maxLines(2) // 最多显示 2 行
      .textOverflow({
          overflow: TextOverflow.Ellipsis }) // 超出显示省略号
    

运行效果图
Screenshot_2024-10-27T091652.pngScreenshot_2024-10-27T091652.png


二、Button 组件基础

Button 组件用于创建按钮,通常用于捕获用户点击事件。支持自定义样式、圆角和事件响应。

2.1 基本用法
  • Button 组件中直接设置按钮文本:

    // 创建一个按钮,显示 “点击我” 文本
    Button('点击我')
    
2.2 添加点击事件
  • 使用 onClick 函数监听点击事件,并在按钮点击时触发回调函数:

    // 创建一个按钮,点击时执行 onClick 回调
    Button('点击增加计数')
      .onClick(() => {
          // 添加点击事件处理函数
        this.count += 1; // 每次点击时,count 值加 1
      })
    
2.3 按钮样式设置
  • 通过 fontSizefontColor 等设置按钮文本样式:

    // 设置按钮字体大小、颜色和背景颜色
    Button('提交')
      .fontSize(18) // 字体大小为 18
      .fontColor(Color.White) // 字体颜色为白色
      .backgroundColor(Color.Green) // 背景颜色为绿色
    
2.4 设置按钮圆角和边框
  • 使用 borderRadiusborderColor 实现圆角和边框样式:

    // 设置按钮圆角和边框样式
    Button('圆角按钮')
      .borderRadius(10) // 圆角半径为 10
      .borderColor(Color.Gray) // 边框颜色为灰色
      .backgroundColor(Color.Grey) // 背景颜色为灰色
      .fontColor(Color.Black) // 字体颜色为黑色
    

运行效果图
Screenshot_2024-10-27T100729.pngScreenshot_2024-10-27T100729.png


三、Text 与 Button 组件结合实例

在实际开发中,TextButton 组件经常结合使用。下面是一个简单的计数器实例,点击按钮时,Text 显示的计数值更新。

3.1 完整示例代码
@Entry
@Component
struct CounterApp {
   
  @State count: number = 0; // 定义一个状态变量 count,用 @State 修饰管理状态

  build() {
   
    Column() {
   
      // 显示应用标题
      Text('计数器应用')
        .fontSize(24) // 标题字体大小为 24
        .fontWeight(FontWeight.Bold) // 标题字体加粗
        .margin({
    top: 20 }) // 顶部边距为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐

      // 显示当前计数值
      Text(this.count.toString())
        .fontSize(50) // 字体大小为 50
        .fontWeight(FontWeight.Bold) // 字体加粗
        .margin({
    top: 20, bottom: 20 }) // 上下边距分别为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐

      // 增加计数的按钮
      Button('增加')
        .onClick(() => {
    // 添加点击事件处理函数
          this.count += 1; // 每次点击,count 值增加 1
        })
        .fontSize(18) // 字体大小为 18
        .fontColor(Color.White) // 按钮字体颜色为白色
        .backgroundColor(Color.Blue) // 按钮背景颜色为蓝色
        .width(100) // 按钮宽度为 100
        .height(50) // 按钮高度为 50
        .alignSelf(ItemAlign.Center) // 水平居中对齐
        .borderRadius(10) // 圆角半径为 10
    }
    .width('100%') // Column 容器宽度为 100%
    .height('100%') // Column 容器高度为 100%
    .padding(20) // 设置内边距为 20
  }
}
3.2 说明
  • 该实例使用 @State 修饰的 count 变量保存计数值。
  • 点击按钮时,触发 onClick 事件使 count 值递增。
  • Text 组件实时更新 count 值,实现简单的计数显示。

四、Text 与 Button 组件进阶技巧

4.1 动态样式
  • 使用条件表达式动态改变组件的样式。例如,当计数值为偶数时按钮背景为蓝色,为奇数时为红色:

    // 动态设置按钮颜色,根据 count 是奇数或偶数显示不同颜色
    Button('增加')
      .onClick(() => {
         
        this.count += 1;
      })
      .backgroundColor(this.count % 2 === 0 ? Color.Blue : Color.Red) // 偶数蓝色,奇数红色
    
4.2 多语言支持
  • 使用资源文件实现 Text 内容的多语言适配。在 string.json 文件中定义键值,然后引用:

    • 默认语言src/main/resources/base/element/string.json
    • 中文(中国)src/main/resources/zh_CN/element/string.json
    // string.json
    {
         
        "name": "app_title",
        "value": "计数器应用"
    }
    
    // 使用
    Text($r('app.string.app_title'))
      .fontSize(24)
      .alignSelf(ItemAlign.Center)
    
4.3 按钮点击反馈
  • 使用 backgroundColor 动态变更按钮颜色,或添加 opacity 设置按下反馈效果:

    // 添加按钮点击反馈效果,使用 opacity 动态调整透明度
    Button('提交')
      .onClick(() => {
         
        // 提交事件
        this.count += 1;
        this.isPressed = !this.isPressed; // 改变 isPressed 状态
      })
      .backgroundColor(Color.Green) // 背景颜色为绿色
      .opacity(this.isPressed ? 0.8 : 1) // 按下时透明度变为 0.8
    

小结

本篇介绍了 TextButton 组件的基础用法及其常见样式、事件响应的实现方法。通过学习这些基础组件的用法,开发者可以熟练创建简单的 UI 元素并结合事件实现交互功能,为鸿蒙应用的 UI 开发打下基础。


下一篇预告

下一篇将深入介绍 Image 组件的使用,展示如何在鸿蒙应用中加载和显示图片。


上一篇: 「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战:计数器应用

下一篇: 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用


目录
相关文章
|
6天前
|
弹性计算 双11 开发者
阿里云ECS“99套餐”再升级!双11一站式满足全年算力需求
11月1日,阿里云弹性计算ECS双11活动全面开启,在延续火爆的云服务器“99套餐”外,CPU、GPU及容器等算力产品均迎来了全年最低价。同时,阿里云全新推出简捷版控制台ECS Lite及专属宝塔面板,大幅降低企业和开发者使用ECS云服务器门槛。
|
23天前
|
存储 弹性计算 人工智能
阿里云弹性计算_通用计算专场精华概览 | 2024云栖大会回顾
阿里云弹性计算产品线、存储产品线产品负责人Alex Chen(陈起鲲)及团队内多位专家,和中国电子技术标准化研究院云计算标准负责人陈行、北京望石智慧科技有限公司首席架构师王晓满两位嘉宾,一同带来了题为《通用计算新品发布与行业实践》的专场Session。本次专场内容包括阿里云弹性计算全新发布的产品家族、阿里云第 9 代 ECS 企业级实例、CIPU 2.0技术解读、E-HPC+超算融合、倚天云原生算力解析等内容,并发布了国内首个云超算国家标准。
阿里云弹性计算_通用计算专场精华概览 | 2024云栖大会回顾
|
5天前
|
人工智能 弹性计算 文字识别
基于阿里云文档智能和RAG快速构建企业"第二大脑"
在数字化转型的背景下,企业面临海量文档管理的挑战。传统的文档管理方式效率低下,难以满足业务需求。阿里云推出的文档智能(Document Mind)与检索增强生成(RAG)技术,通过自动化解析和智能检索,极大地提升了文档管理的效率和信息利用的价值。本文介绍了如何利用阿里云的解决方案,快速构建企业专属的“第二大脑”,助力企业在竞争中占据优势。
|
4天前
|
人工智能 自然语言处理 安全
创新不设限,灵码赋新能:通义灵码新功能深度评测
自从2023年通义灵码发布以来,这款基于阿里云通义大模型的AI编码助手迅速成为开发者心中的“明星产品”。它不仅为个人开发者提供强大支持,还帮助企业团队提升研发效率,推动软件开发行业的创新发展。本文将深入探讨通义灵码最新版本的三大新功能:@workspace、@terminal 和 #team docs,分享这些功能如何在实际工作中提高效率的具体案例。
|
7天前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
3911 1
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
10天前
|
负载均衡 算法 网络安全
阿里云WoSign SSL证书申请指南_沃通SSL技术文档
阿里云平台WoSign品牌SSL证书是由阿里云合作伙伴沃通CA提供,上线阿里云平台以来,成为阿里云平台热销的国产品牌证书产品,用户在阿里云平台https://www.aliyun.com/product/cas 可直接下单购买WoSign SSL证书,快捷部署到阿里云产品中。
2177 6
阿里云WoSign SSL证书申请指南_沃通SSL技术文档
|
3天前
|
安全 数据建模 网络安全
2024阿里云双11,WoSign SSL证书优惠券使用攻略
2024阿里云“11.11金秋云创季”活动主会场,阿里云用户通过完成个人或企业实名认证,可以领取不同额度的满减优惠券,叠加折扣优惠。用户购买WoSign SSL证书,如何叠加才能更加优惠呢?
831 1
|
22天前
|
编解码 Java 程序员
写代码还有专业的编程显示器?
写代码已经十个年头了, 一直都是习惯直接用一台Mac电脑写代码 偶尔接一个显示器, 但是可能因为公司配的显示器不怎么样, 还要接转接头 搞得桌面杂乱无章,分辨率也低,感觉屏幕还是Mac自带的看着舒服
|
1天前
|
存储 分布式计算 流计算
实时计算 Flash – 兼容 Flink 的新一代向量化流计算引擎
本文介绍了阿里云开源大数据团队在实时计算领域的最新成果——向量化流计算引擎Flash。文章主要内容包括:Apache Flink 成为业界流计算标准、Flash 核心技术解读、性能测试数据以及在阿里巴巴集团的落地效果。Flash 是一款完全兼容 Apache Flink 的新一代流计算引擎,通过向量化技术和 C++ 实现,大幅提升了性能和成本效益。
391 7
实时计算 Flash – 兼容 Flink 的新一代向量化流计算引擎
|
29天前
|
存储 人工智能 缓存
AI助理直击要害,从繁复中提炼精华——使用CDN加速访问OSS存储的图片
本案例介绍如何利用AI助理快速实现OSS存储的图片接入CDN,以加速图片访问。通过AI助理提炼关键操作步骤,避免在复杂文档中寻找解决方案。主要步骤包括开通CDN、添加加速域名、配置CNAME等。实测显示,接入CDN后图片加载时间显著缩短,验证了加速效果。此方法大幅提高了操作效率,降低了学习成本。
5408 15

热门文章

最新文章