【引言】

微信的字体大小调节功能允许用户通过一个简单的滑块来调整聊天记录中的文字大小，从而满足不同用户的阅读习惯和视觉偏好。我们的目标是实现一个类似的UI交互体验，在鸿蒙NEXT环境中为用户提供一种方便、直观的方式来改变应用内的文本显示尺寸。本篇文章将基于鸿蒙NEXT（HarmonyOS NEXT）框架，测试项目为API 12

【设计思路】

为了实现这个功能，我们需要构建一个包含以下要素的组件：

1. 滑块(Slider)：用于接收用户输入，根据滑动位置调整字体大小。
2. 预览区：实时反映当前选择的字体大小效果。
3. 参考标记：提供一组固定的字体大小样本，帮助用户更准确地选择合适的字体大小。

【实现步骤】

1. 创建滑块组件

首先，我们定义一个buildSlider函数来创建一个定制化的滑块。该滑块不仅具备基本的数值调节功能，还带有装饰性的线条以模拟微信的样式。此外，我们添加了状态监听器，以便在值变化时更新相关文本的字体大小。

function buildSlider(config: SliderConfiguration) {
  Row() {
    // ... (保持原代码不变)
  }
}

2. 定义样式修饰器

接下来，我们创建了一个名为MySliderStyle的类，它实现了ContentModifier<SliderConfiguration>接口，用于控制滑块的显示状态和行为。这使得我们可以灵活地修改滑块的内容而无需更改其核心逻辑。

class MySliderStyle implements ContentModifier<SliderConfiguration> {
  // ... (保持原代码不变)
}

3. 构建主组件

最后，我们设计了SliderExample结构体作为整个页面的入口。在这个组件中，我们将滑块、预览区以及参考标记整合在一起，形成一个完整的字体大小调节界面。同时，利用状态管理机制确保所有UI元素能够响应用户操作并同步更新。

【完整代码】

@Builder
function buildSlider(config: SliderConfiguration) {
  Row() {
    Stack() {
      Row() {
        Line().height(1).layoutWeight(1).backgroundColor("#c8c8c8")
      }.width('90%')

      Row() {
        Line().height(10).width(1).backgroundColor("#c8c8c8")
        Blank()
        Line().height(10).width(1).backgroundColor("#c8c8c8")
        Blank()
        Line().height(10).width(1).backgroundColor("#c8c8c8")
        Blank()
        Line().height(10).width(1).backgroundColor("#c8c8c8")
        Blank()
        Line().height(10).width(1).backgroundColor("#c8c8c8")
        Blank()
        Line().height(10).width(1).backgroundColor("#c8c8c8")
      }.width('90%')

      Slider({
        value: config.value,
        min: config.min,
        max: config.max,
        step: config.step,
      })
        .blockColor(Color.White)
        .trackColor(Color.Transparent)
        .selectedColor(Color.Transparent)
        .blockBorderColor("#c8c8c8")
        .blockBorderWidth(1)
        .blockSize({ width: 30, height: 30 })
        .width('100%')// .width(config.max)
          // .visibility((config.contentModifier as MySliderStyle).showSlider ? Visibility.Visible : Visibility.Hidden)
        .showSteps(false)
        .onChange((value: number, mode: SliderChangeMode) => {
          config.triggerChange(value, mode)
        })

    }.width('100%') //.backgroundColor(Color.Orange)
  }.width('100%')
}

class MySliderStyle implements ContentModifier<SliderConfiguration> {
  showSlider: boolean = true
  sliderChangeMode: number = 0

  constructor(showSlider: boolean, sliderChangeMode: number) {
    this.showSlider = showSlider
    this.sliderChangeMode = sliderChangeMode
  }

  applyContent(): WrappedBuilder<[SliderConfiguration]> {
    return wrapBuilder(buildSlider)
  }
}


@Entry
@Component
struct SliderExample {
  @State showSlider: boolean = true
  @State sliderValue: number = 0
  @State sliderMin: number = 0
  @State sliderMax: number = 100
  @State sliderStep: number = 20
  @State sliderChangeMode: number = 0

  build() {
    Column({ space: 20 }) {

      Row() {
        Text('测试字体').fontSize(this.sliderValue / 20 * 5 + 10)
      }.width('100%').height(100).justifyContent(FlexAlign.Center)

      Row() {
        Text('A').textAlign(TextAlign.Center).layoutWeight(1).fontSize(12)
        Text('标准').textAlign(TextAlign.Center).layoutWeight(1)
        Text('').textAlign(TextAlign.Center).layoutWeight(3)
        Text('A').textAlign(TextAlign.Center).layoutWeight(1).fontSize(30)
      }.alignItems(VerticalAlign.Bottom)

      Row() {

        Slider({
          value: this.sliderValue,
          min: this.sliderMin,
          max: this.sliderMax,
          step: this.sliderStep,
        })
          .layoutWeight(1)
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.sliderValue = value
            this.sliderChangeMode = mode
            console.info('【SliderLog】value:' + value + 'mode:' + mode.toString())
          })
          .contentModifier(new MySliderStyle(this.showSlider, this.sliderChangeMode))

      }.width('100%').padding({ left: 15, right: 15 })

    }.width('100%').height('100%')
  }
}