全部标签
写点什么
MySQLOpenHarmony云计算程序员行业资讯算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业生涯规划知识管理运维产品经理 查看更多

eTS 开发方式三方组件推荐【系列 1】

作者：坚果
  • 2022 年 7 月 16 日

  • 本文字数：2415 字

    阅读完需：约 8 分钟

支持 OpenHarmony API version 8 及以上版本。

1.选择器

选择器，包括时间选择、地区选择、分割线设置、文字大小颜色设置


城市（省、市）选择器:



城市（省、市、区）选择器:


下载安装

npm install @ohos/pickerview --save
复制代码

使用说明

提供多种类型选择器，使用方法类似，以显示时间选择器为例


1.初始化：实例化 scroller 和对应的 ShowTimePickerComponent.Model 对象


private scroller: Scroller = new Scroller()@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();
复制代码


2.属性设置：通过 Model 类对象设置 UI 属性来自定义所需风格，也可以添加所需的回调


private aboutToAppear() {    this.showTimeData       .setDividerLineStroke(2)            .setDividerLineColor(Color.Black)            .setFontSize(20)                             .setFontColor(Color.Red)                     .setConfirmButtonFont("确定")                 .setCancelButtonFont("取消")                  .setCancelButtonColor(Color.Red)                  .setConfirmButtonColor(Color.Black)                  .setTitleFontSize(20)                        .setTitleFontColor(Color.Black)                .setPickerSpace(20)                            .setButtonBackgroundColor("#DCDCDC")          .setYearRangeStart(2001)                      .setYearRangeEnd(2050)                       .setDefaultSelection([2005, 5, 11])          .setDividerType(DividerType.CIRCLE)          .setLineSpacingMultiplier(40)               .withClick((event: ClickEvent) => {       this.showTimeData.withText("clicked " + this.count++ + " times");     });
复制代码


3.界面绘制: 调用对象的构造方法，传递已经实例化的对象。


build() {   Stack() {     Scroll(this.scroller) {       Column() {         ShowTimePickerComponent({model: this.showTimeData})      }     }   } }
复制代码

接口说明

@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();
复制代码


  1. 设置分割线宽度 this.showTimeData.setDividerLineStroke(2)

  2. 控制分割线颜色 this.showTimeData.setDividerLineColor(Color.Black)

  3. 控制文字大小 this.showTimeData.setFontSize(20)

  4. 控制文字颜色 this.showTimeData.setFontColor(Color.Red)

  5. 控制确定按钮显示的文字 this.showTimeData.setConfirmButtonFont("确定")

  6. 控制取消按钮显示的文字 this.showTimeData.setCancelButtonFont("取消")

  7. 控制取消按钮的文字颜色 this.showTimeData.setCancelButtonColor(Color.Red)

  8. 控制确定文字颜色 this.showTimeData.setConfirmButtonColor(Color.Black)

  9. 设置标题、确定按钮、取消按钮文字大小 this.showTimeData.setTitleFontSize(20)

  10. 设置标题文字颜色 this.showTimeData.setTitleFontColor(Color.Black)

  11. 设置选择器页面间隔 this.showTimeData.setPickerSpace(20)

  12. 设置按钮背景颜色 this.showTimeData.setButtonBackgroundColor("#7CDCDC")

  13. 时间开始范围 this.showTimeData.setYearRangeStart(2001)

  14. 时间结束范围 this.showTimeData.setYearRangeEnd(2050)

  15. 设置分割线类型 this.showTimeData.setDividerType(DividerType.CIRCLE)

  16. 设置间距 this.showTimeData.setLineSpacingMultiplier(40)

2.可定制任意样式的文本构建工具

TextLayoutBuilder-ETS 是一个可定制任意样式的文本构建工具，包括字体间距、大小、颜色、布局方式、富文本高亮显示等，在文字显示的业务场景中都会使用到，特别是通知类特殊显示的字体样式时， TextLayoutBuilder-ETS 极大的方便了开发者的开发效率。

下载安装

npm install @ohos/textlayoutbuilder --save
复制代码

使用说明：

第一步： 初始化,导入 TextLayout 组件到自己项目中,实例化 TextLayout.Layout 对象；


...import TextLayout from '../common/TextLayout.ets';import {TextInfo} from '../common/TextInfo.ets';@State layout:TextLayout.Layout = new TextLayout.Layout(); ...
复制代码


第二步：属性设置，通过 layout 类对象设置 UI 属性来自定义所需风格，也可以添加所需的回调


private aboutToAppear() {    this.layout    .setText(this.strTest)    .setSpecialTextInfo(textInfo1)    .setSpecialTextInfo(textInfo2)    .setSpecialTextInfo(textInfo3)    .setSpecialTextClick((textInfo) =>{    console.info('我点击了 = '+textInfo.getText())    });}
复制代码


第三步：界面绘制，将定制好的 layout 传给 TextLayout


build() {    Column() {         Text("默认显示").fontSize(16).fontColor("#999999").margin({ left: 14, top: 14, bottom: 14 })         Column() {            TextLayout({ model: this.layout })         }.backgroundColor("#cccccc").margin({ left: 14, right: 14 }).borderRadius(10)    }.alignItems(HorizontalAlign.Start)}
复制代码

接口说明

let layout:TextLayout.Layout = new TextLayout.Layout();
复制代码


  1. 设置文字内容：layout.setText()

  2. 设置指定文字内容样式：layout.setSpecialTextInfo()

  3. 设置文字颜色：layout.setTextColor()

  4. 设置是否单行显示：layout.setSingleLine()

  5. 设置最大行数：layout.setMaxLines()

  6. 设置显示不下省略号代替：layout.setEllipsize()

  7. 设置对齐方式：layout.setAlignment()

  8. 设置每行最小显示字数：layout.setMinEms()

  9. 设置是否内边距：layout.setIncludeFontPadding()

  10. 设置最大宽度：layout.setMaxWidth()

  11. 设置是否开启按下文字时状态变化开关：layout.setIsEnablePressState()

  12. 设置按下文字状态样式：layout.setTextPressStateStyle()

  13. 设置指定文本的点击事件：layout.setSpecialTextClick()


参考资料：


https://gitee.com/openharmony-tpc/tpc_resource#https://gitee.com/openharmony-sig/ohos-PickerView

划线
评论
复制
发布于: 刚刚阅读数: 3
HarmonyOSOpen Harmony7月月更
用户头像

坚果

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“大前端之旅”，华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
eTS开发方式三方组件推荐【系列1】_HarmonyOS_坚果_InfoQ写作社区