当前位置： 首页 > article >正文

Text实现美团部分样式

article 2024/10/25 2:36:54

Text基础

首先是Text的相关基础。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text-0000001815927600

Text是显示一段文本的组件。

可以包含Span、ImageSpan、SymbolSpan和ContainerSpan子组件。

接口

Text(content?: string | Resource, value?: TextOptions)

参数名参数类型必填参数描述
contentstring | Resource否文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：' '
value11+TextOptions否文本组件初始化选项。

属性

除支持通用属性和文本通用属性外，还支持以下属性：

下表只有部分属性。

名称参数类型描述
textAlignTextAlign设置文本段落在水平方向的对齐方式。默认值：TextAlign.Start
textOverflow{overflow: TextOverflow}设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}说明：文本截断是按字截断。
maxLinesnumber设置文本的最大行数。说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。
lineHeightstring | number | Resource设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。
decoration{type: TextDecorationType,color?: ResourceColor}设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}

效果实现

最终效果如下：

下面的内容主要介绍了如何使用Text组件实现上图中的各种文字效果。

名称

名称的关键代码如下：

Text(relaxPlaceInfo.name)
  .fontSize(15)
  .textAlign(TextAlign.Start)
  .width('100%')
  .maxLines(1)// 文本超长显示
  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文本超长显示省略号

maxLines设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。

textOverflow设置文本超长时的显示方式。TextOverflow.Ellipsis表示文本超长显示省略号。

textAlign属性设置文本绘制中的文本对齐方式

可选值为：

- 'left'：文本左对齐。

- 'right'：文本右对齐。

- 'center'：文本居中对齐。

- 'start'：文本对齐界线开始的地方。

- 'end'：文本对齐界线结束的地方。

ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。

默认值：'left'

评分

关键代码如下：

Row() {
  Rating({ rating: relaxPlaceInfo.rating, indicator: false })
    .stars(5)
    .stepSize(0.5)
    .width(70)
    .height(30)
    .padding({ left: 0, top: 0 })

  Text(relaxPlaceInfo.rating.toString())
    .fontSize(11)
    .fontColor('#fe7445')
    .margin({ left: 3 })
}

这个很简单，主要就是字体的大小与字体颜色的设置。

单价、地点等

关键代码如下：

// 单价
Text('￥'+relaxPlaceInfo.singlePrice.toString()+'/人')
  .fontSize(12)
  .fontColor('#a5a5a5')
  .textAlign(TextAlign.Start)

// 消费人数
Text(relaxPlaceInfo.consumptionNumber.toString()+'人消费')
  .fontSize(12)
  .fontColor('#a5a5a5')
  .textAlign(TextAlign.End)
  .layoutWeight(1)
  ......

这些主要也是字体的大小与字体颜色的设置。

距离

关键代码如下：

// 距离
Text(relaxPlaceInfo.distance) {
  ImageSpan($r('app.media.ic_relax_pos'))
    .width('12')
    .height('12')
    .objectFit(ImageFit.Fill)
    .verticalAlign(ImageSpanAlignment.CENTER)
  Span(relaxPlaceInfo.distance)
    .fontColor('#a5a5a5')
    .fontSize(12)
    .margin({ left: 1 })
}
.textAlign(TextAlign.End)
.layoutWeight(1)

Text可以包含Span、ImageSpan、SymbolSpan和ContainerSpan子组件。

这里使用了ImageSpan、Span子组件。

ImageSpan用于显示行内图片：

名称参数类型描述
verticalAlignImageSpanAlignment图片基于文本的对齐方式。默认值：ImageSpanAlignment.BOTTOM
objectFitImageFit设置图片的缩放类型。默认值：ImageFit.Cover

ImageSpanAlignment

名称描述
TOP图片上边沿与行上边沿对齐。
CENTER图片中间与行中间对齐。
BOTTOM图片下边沿与行下边沿对齐。
BASELINE图片下边沿与文本BaseLine对齐。

ImageFit

名称描述
Contain保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Cover保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Auto图像会根据其自身尺寸和组件的尺寸进行适当缩放，以在保持比例的同时填充视图。
Fill不保持宽高比进行放大缩小，使得图片充满显示边界。
ScaleDown保持宽高比显示，图片缩小或者保持不变。
None保持原有尺寸显示。

Span用于显示行内文本。

标签

实现代码如下：

// 标签
Row() {
  ForEach(relaxPlaceInfo.tags, (tag: MyTag) => {
    Text(tag.name)
      .fontSize(10)
      .fontColor(tag.fontColor)
      .backgroundColor(tag.backgroundColor)
      .borderRadius(2)
      .margin({ right: 3, top: 5 })
      .padding({
        left: 1,
        right: 1,
        top: 1,
        bottom: 1
      })
  })
}

通过ForEach来实现多个标签的展示，根据传入参数的不同实现不同的效果。

使用fontColor属性来设置字体的颜色，这里通过传入的参数来分别显示不同的字体颜色

使用backgroundColor属性来设置字体的背景颜色，这里通过传入的参数来分别展示不同的字体背景颜色。

通过borderRadius属性设置元素的边框圆角半径。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-border-0000001478341105-V2

名称参数类型描述
borderRadiusLength | BorderRadiuses9+设置元素的边框圆角半径，不支持百分比。从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中仅支持设置相同的边框圆角半径。

渐变背景标签

关键代码如下:

Text(relaxActivity.tag)
  .fontSize(12)
  .fontColor('#b87658')
  .width(80)
  .textAlign(TextAlign.End)
  .margin({ left: 10 })// 设置颜色渐变起始角度为顺时针方向90°
  .linearGradient({
    angle: 90,
    colors: [
      [Color.White, 0.0],
      ['#fcebe1', 1.0],
    ]
  })

这里面主要是linearGradient这个属性

名称参数描述
linearGradient{angle?: number | string,direction?: GradientDirection,colors: Array<[ResourceColor, number]>,repeating?: boolean}线性渐变。- angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180- direction: 线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom- colors: 为渐变的颜色描述。- repeating: 为渐变的颜色重复着色。默认值：false

惠标签

关键代码:

Text('惠')
  .fontSize(11)
  .fontColor('#ff7511')
  .backgroundColor('#ffede3')
  .borderRadius(5)
  .margin({ left: 10 })
  .padding({
    left: 1.5,
    right: 1.5,
    top: 1.5,
    bottom: 1.5
  })

这块很简单,就是backgroundColor、borderRadius和padding属性的设置。

项目当前价格

关键代码：

// ￥
Text('￥')
  .fontSize(10)
  .fontColor('#fd531d')
  .textAlign(TextAlign.End)
  .margin({ left: 3 })
// 价格
Text(relaxActivity.currentPrice)
  .fontSize(13)
  .fontColor('#fd531d')

整体由两个部分组合而成。

设置不同的fontSize，设置相同的fontColor。

折扣

关键代码如下：

// 打折
Text(relaxActivity.discount + '折')
  .fontSize(11)
  .fontColor('#fc8358')
  .backgroundColor(Color.White)
  .margin({ left: 2 })
  .border({ width: 1 })
  .borderRadius(2)
  .borderColor('#efa58d')
  .visibility(relaxActivity.discount != '' ? Visibility.Visible : Visibility.None)

使用border属性设置边框的宽度。

使用borderColor属性设置边框的颜色。

名称参数类型描述
border{width?: Length | EdgeWidths9+,color?: ResourceColor | EdgeColors9+,radius?: Length | BorderRadiuses9+,style?: BorderStyle | EdgeStyles9+}统一边框样式设置接口。- width：设置边框宽度。- color：设置边框颜色。- radius：设置边框圆角半径。- style：设置边框样式。说明：边框宽度默认值为0，即不显示边框。
borderColorResourceColor | EdgeColors9+设置元素的边框颜色。默认值：Color.Black
borderRadiusLength | BorderRadiuses9+设置元素的边框圆角半径，不支持百分比。

原价格

关键代码：

// 原价格
Text('￥' + relaxActivity.oldPrice)
  .fontSize(12)
  .fontColor('#a5a5a5')
  .margin({ left: 2 })
  .decoration({ type: TextDecorationType.LineThrough, color: '#a5a5a5' })

这里主要是decoration这个属性。

名称参数类型描述
decoration{type: TextDecorationType,color?: ResourceColor}设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}

项目标题

关键代码：

Text(relaxActivity.description)
  .fontSize(13)
  .margin({ left: 2, right: 2 })
  .fontColor(Color.Black)
  .maxLines(1)// 文本超长显示
  .textOverflow({ overflow: TextOverflow.Ellipsis })// 文本超长显示省略号
  .flexShrink(1)

这个没什么特别的，所有用的上面已经说过了。

完整代码

布局

/**
 * 地点卡片
 * @param relaxPlaceInfos 地点信息
 */
@Builder
function placeCard(relaxPlaceInfos: RelaxPlaceInfo[]) {
  List() {
    ForEach(relaxPlaceInfos, (relaxPlaceInfo: RelaxPlaceInfo) => {
      ListItem() {
        Column() {
          Row() {
            // 地点图片
            Image(relaxPlaceInfo.image)
              .width(80)
              .height(80)
              .borderRadius(8)
              .margin({ left: 10, top: 10, bottom: 10 })

            // 详细信息
            Column() {
              // 地点名称
              Text(relaxPlaceInfo.name)
                .fontSize(15)
                .textAlign(TextAlign.Start)
                .width('100%')
                .maxLines(1)// 文本超长显示
                .textOverflow({ overflow: TextOverflow.Ellipsis }) // 文本超长显示省略号
              // 星级评分
              Row() {
                Rating({ rating: relaxPlaceInfo.rating, indicator: false })
                  .stars(5)
                  .stepSize(0.5)
                  .width(70)
                  .height(30)// .colorBlend('#ff5703')
                  .padding({ left: 0, top: 0 })

                Text(relaxPlaceInfo.rating.toString())
                  .fontSize(11)
                  .fontColor('#fe7445')
                  .margin({ left: 3 })

                // 单价
                Text('￥'+relaxPlaceInfo.singlePrice.toString()+'/人')
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .textAlign(TextAlign.Start)

                // 消费人数
                Text(relaxPlaceInfo.consumptionNumber.toString()+'人消费')
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .textAlign(TextAlign.End)
                  .layoutWeight(1)
              }
              .width('74%')
              .margin({ left: 0, top: 0 })

              Row() {
                // 地点
                Text(relaxPlaceInfo.position)
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .textAlign(TextAlign.Start)

                // 分类
                Text(relaxPlaceInfo.category)
                  .fontSize(12)
                  .width('25%')
                  .fontColor('#a5a5a5')
                  .margin({ left: 5 })
                  .textAlign(TextAlign.Start)

                // 距离
                Text(relaxPlaceInfo.distance) {
                  ImageSpan($r('app.media.ic_relax_pos'))
                    .width('12')
                    .height('12')
                    .objectFit(ImageFit.Fill)
                    .verticalAlign(ImageSpanAlignment.CENTER)
                  Span(relaxPlaceInfo.distance)
                    .fontColor('#a5a5a5')
                    .fontSize(12)
                    .margin({ left: 1 })
                }
                .textAlign(TextAlign.End)
                .layoutWeight(1)
              }
              .width('74%')
              .margin({ left: 0, top: 0 })
              .justifyContent(FlexAlign.Start)

              // 标签
              Row() {
                ForEach(relaxPlaceInfo.tags, (tag: MyTag) => {
                  Text(tag.name)
                    .fontSize(10)
                    .fontColor(tag.fontColor)
                    .backgroundColor(tag.backgroundColor)
                    .borderRadius(2)
                    .margin({ right: 3, top: 5 })
                    .padding({
                      left: 1,
                      right: 1,
                      top: 1,
                      bottom: 1
                    })
                })
              }

              // 描述
              Text(relaxPlaceInfo.description)
                .fontSize(12)
                .fontColor('#a5a5a5')
                .textAlign(TextAlign.Start)
                .margin({ top: 5 })
            }
            .margin({ left: 10, top: 10 })
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')

          Column() {
            ForEach(relaxPlaceInfo.relaxActivities, (relaxActivity: RelaxActivity) => {
              Row() {
                // 标签
                Text(relaxActivity.tag)
                  .fontSize(12)
                  .fontColor('#b87658')
                  .width(80)
                  .textAlign(TextAlign.End)
                  .margin({ left: 10 })// 设置颜色渐变起始角度为顺时针方向90°
                  .linearGradient({
                    angle: 90,
                    colors: [
                      [Color.White, 0.0],
                      ['#fcebe1', 1.0],
                    ]
                  })
                // 惠
                Text('惠')
                  .fontSize(11)
                  .fontColor('#ff7511')
                  .backgroundColor('#ffede3')
                  .borderRadius(5)
                  .margin({ left: 10 })
                  .padding({
                    left: 1.5,
                    right: 1.5,
                    top: 1.5,
                    bottom: 1.5
                  })
                // ￥
                Text('￥')
                  .fontSize(10)
                  .fontColor('#fd531d')
                  .textAlign(TextAlign.End)
                  .margin({ left: 3 })
                // 价格
                Text(relaxActivity.currentPrice)
                  .fontSize(13)
                  .fontColor('#fd531d')
                // 打折
                Text(relaxActivity.discount + '折')
                  .fontSize(11)
                  .fontColor('#fc8358')
                  .backgroundColor(Color.White)
                  .margin({ left: 2 })
                  .border({ width: 1 })
                  .borderRadius(2)
                  .borderColor('#efa58d')
                  .visibility(relaxActivity.discount != '' ? Visibility.Visible : Visibility.None)
                // 原价格
                Text('￥' + relaxActivity.oldPrice)
                  .fontSize(12)
                  .fontColor('#a5a5a5')
                  .margin({ left: 2 })
                  .decoration({ type: TextDecorationType.LineThrough, color: '#a5a5a5' })
                // 项目标题
                Text(relaxActivity.description)
                  .fontSize(13)
                  .margin({ left: 2, right: 2 })
                  .fontColor(Color.Black)
                  .maxLines(1)// 文本超长显示
                  .textOverflow({ overflow: TextOverflow.Ellipsis })// 文本超长显示省略号
                  .flexShrink(1)
              }
              .width('100%')
              .margin({ top: 10 })
            })
          }
          .width('100%')
        }
        .width('96%')
        .backgroundColor(Color.White)
        .borderRadius(5)
        .margin({ left: 2, right: 2, top: 10 })
        .padding({ top: 3, bottom: 10 })
      }
    })
  }
  .width('100%')
  .height('80%')
  .padding({ bottom: 10 })
  .scrollBar(BarState.Off)
  .alignListItem(ListItemAlign.Center)
}

类

export class RelaxActivity {
  tag: string;
  currentPrice: string;
  discount: string;
  oldPrice: string;
  description: string;

  constructor(tag: string, currentPrice: string, discount: string, oldPrice: string, description: string) {
    this.tag = tag;
    this.currentPrice = currentPrice;
    this.discount = discount;
    this.oldPrice = oldPrice;
    this.description = description;
  }
}

export class RelaxPlaceInfo {
  image: Resource;
  name: string;
  rating: number;
  singlePrice: number;
  consumptionNumber: number;
  category: string;
  position: string;
  distance: string;
  tags: MyTag[];
  description: string;
  relaxActivities: RelaxActivity[];

  constructor(image: Resource, name: string, rating: number,singlePrice: number, consumptionNumber: number, category: string, position: string, distance: string,
    tags: MyTag[],
    description: string, relaxActivities: RelaxActivity[]) {
    this.image = image;
    this.name = name;
    this.rating = rating;
    this.singlePrice = singlePrice;
    this.consumptionNumber = consumptionNumber;
    this.category = category;
    this.position = position;
    this.distance = distance;
    this.tags = tags;
    this.description = description;
    this.relaxActivities = relaxActivities;
  }
}

export class MyTag {
  name: string;
  fontColor: string;
  backgroundColor: string;

  constructor(name: string, fontColor: string, backgroundColor: string) {
    this.name = name;
    this.fontColor = fontColor;
    this.backgroundColor = backgroundColor;
  }
}


http://www.kler.cn/news/363821.html

相关文章：

  • 测试一个股票行情API
  • ONLYOFFICE 文档8.2版本已发布：PDF 协作编辑、改进界面、性能优化等更新
  • 音质最好的麦克风有哪些？领夹麦克风哪个品牌好？麦克风十大品牌
  • Linux系统基础-进程间通信(5)_模拟实现命名管道和共享内存
  • 基于泊松洞过程建模的异构蜂窝网络信干比增益与近似覆盖率分析
  • C++代码操作指令的定义
  • 代码随想录刷题学习日记
  • 基础知识 main函数形参 C语言
  • C++：模板的特化与分离编译
  • Python re 模块：正则表达式的强大工具
  • 全局滚动和局部滚动
  • 多模态大语言模型（MLLM）-Deepseek Janus
  • Spring AI 1.0.0 M1版本新特性！
  • 代码随想录算法训练营第二十二天|Day22 回溯算法
  • Oracle10g运维 表增删改查
  • 【Vue.js设计与实现】第三篇第11章：渲染器-快速 Diff 算法-阅读笔记
  • 文案创作新思路：Python与文心一言API的完美结合
  • 《计算机视觉》—— 基于dlib库的人脸关键部位的轮廓检测
  • 【MySQL】详解表的约束
  • 【途牛旅游网-注册/登录安全分析报告】
  • vue2.x中的数据劫持
  • 视频剪辑和转换gif一体化UI页面【可以解决gif体积过大】
  • 【YOLOv11】制作使用YOLOv11的docker环境
  • 一道面试题：为什么要使用Docker？
  • Java项目-基于springboot框架的智慧外贸系统项目实战(附源码+文档)
  • COVON全意卫生巾凭借其轻薄、透气、绵柔的特点，在东南亚市场上迅速走红