Text嵌套Span组件maxFontSize失效
=========================

#### 问题现象

Span导致maxFontSize/minFontSize失效了，如何处理？

代码如下：

Text() {
  Span("机构最近7天调研")
  Span(this.value.count ?? '--')
    .fontColor($r('app.color.standard\_eb3c3c'))
  Span("次")
}
.fontSize(12)
.fontColor($r('app.color.standard\_999999'))
.maxLines(1)
.margin({ top: 5 })
.maxFontSize(30)
.minFontSize(20)
.width('100%')
.textAlign(TextAlign.Start)

#### 背景知识

[Span](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-span)是[Text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text)、[ContainerSpan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-containerspan)组件的子组件，用于显示行内文本的组件。支持继承父组件Text的部分属性，仅包括：fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontFamily、textShadow。

#### 解决方案

由于Span不能继承Text的maxFontSize和minFontSize属性，需要定义一个方法来判断Span的fontSize，实现最大最小fontSize设置。

代码如下：

@Entry
@Component
struct TextMaxFontSizeFile {
  @State sizeNum: number = 0;

  test(num: number) {
    if (num > 30) {
      this.sizeNum = 30;
    } else if (num < 20) {
      this.sizeNum = 20;
    } else {
      this.sizeNum = num;
    }
    return this.sizeNum;
  }

  build() {
    Column({ space: 10 }) {
      Text() {
        Span('机构最近7天调研');
        Span('--').fontColor('#f3a2c8');
        Span('次');
      }
      .fontSize(this.test(this.sizeNum))
      .fontColor('#c3c3c3')
      .maxLines(1)
      .margin({ top: 5, bottom: 20 })
      .width('100%')
      .textAlign(TextAlign.Center);

      Button('修改sizeNum>30')
        .onClick(() => {
          this.sizeNum = 100;
        });

      Button('修改sizeNum<15')
        .onClick(() => {
          this.sizeNum = 10;
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

代码运行展示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c1/v3/7KgTIWaZQLOvOuTlFRYyzg/zh-cn_image_0000002633800272.png?HW-CC-KV=V1&HW-CC-Date=20260709T133950Z&HW-CC-Expire=86400&HW-CC-Sign=03DA833C307FEEF25D12F7FF9CDCF5A506DBAC15CF4835E251450E0B8E767F01 "点击放大")

#### 常见FAQ

Q：ContainerSpan作为Text组件的子组件，可以使用类似Flex布局排列样式吗？

A：ContainerSpan的子组件仅包含Span和ImageSpan组件。其属性仅支持textBackgroundStyle，attributeModifier，无法做到类似Flex布局排列样式。