HarmonyOS Text内部Span的宽度设置无效

Text内部Span的width属性设置后无效,目前只能通过加空格扩大长度

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

Span组件不支持width属性。Span组件支持属性:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-span-V5#属性

span作为Text、ContainerSpan组件的子组件,仅支持文本通用属性,另外可以继承父组件Text的属性,支持继承的属性仅包括:fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontfamily、textShadow可以使用富文本组件,解析并显示HTML格式文本,代码如下:

@Entry
@Component
struct Index {
  @State data: string =
    '<span style="font-size:30px;margin-right:20px">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文一段文字这是一段文一段文字这是段文一段文字这是段文一段文字这是段文一段文字这是段文一段文字这是段文字这是一段文字</span>'+
      '<span style="display:inline-block;border:1px solid red;font-size:40px;padding:10px">标签</span>';

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .width(500)
        .height(500)
        .backgroundColor(0XBDDB69)

    }
  }

可以参考以下两种实现方式:

//方案一:
build() {
  Column() {
    Text() {
      Span(' 新品 ')
        .fontSize('20fp')
        .textBackgroundStyle({color: Color.Green, radius: "5vp"})
        .fontColor(Color.White)
      // 间距控制 kerning
      Span(' ').letterSpacing(10)
      Span('距离春节仅有一个月了,红红火火的礼品尽快备起来距离春节仅有一个月了,红红火火的礼品尽快备起来距离春节仅有一个月了')
        .fontSize('20fp')
    }.maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).width('80%')
  }.width('100%').alignItems(HorizontalAlign.Center)
}


//方案二:
@Builder OverlayNode() {
  Row() {
    Text('享').fontSize(20).fontColor(Color.Red)
  }
  .width(20)
  .margin({top:2, bottom:2, left:4, right:4})
}

build() {
  Column() {
    Row() {
      Text() {
        Span('7天无理由退货').fontSize(20).fontColor(Color.Red)
      }
      .overlay(this.OverlayNode()) // 在overlay层绘制标签
      .textIndent(36) // OverlayNode 宽度
      .width(180) // 设置整体宽度
      .height(32) // 设置整体高度
    }
    .border({width: 2, color: Color.Pink})
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS Text如何设置最大宽度maxWidth
128浏览 • 1回复 待解决
HarmonyOS Text/Span使用问题
448浏览 • 1回复 待解决
HarmonyOS TextSpan显示问题
546浏览 • 1回复 待解决
HarmonyOS TextImageSpan和Span
542浏览 • 1回复 待解决
HarmonyOS TextSpan不支持align
28浏览 • 1回复 待解决
获取文本Text组件宽度
527浏览 • 1回复 待解决
HarmonyOS Span属性设置失效
20浏览 • 1回复 待解决
HarmonyOS如何测量Text组件宽度
474浏览 • 1回复 待解决
HarmonyOS 使用Text里套Span标签使用问题
326浏览 • 1回复 待解决
HarmonyOS designWidth设置无效
37浏览 • 1回复 待解决
HarmonyOS 设置 bodercolor 无效
353浏览 • 1回复 待解决
怎么设置元素最大宽度最小宽度
440浏览 • 1回复 待解决