#鸿蒙通关秘籍#如何在中间区域自定义半圆环进度条的样式？

通过传入自定义内容，可以改变进度条中间显示的内容。以下为配置不同中间样式的代码示例：

CircularProgressBar({ radius: 100, currentValue: this.value, activeColor: '#2EB977' }) {
  Column() {
    Text('剩余里程（km）').fontSize(12).fontColor('#FFF')
    Text((100 - this.value).toString())
      .fontSize(45)
      .fontColor('#FFF')
      .fontWeight(700)
      .margin({ top: 8 })
  }.margin({ top: '18%' })
}

CircularProgressBar({
  radius: 120,
  currentValue: this.value,
  activeColor: '#FAA10F',
  showPercentage: false
}) {
  Column() {
    Flex({ alignItems: ItemAlign.Baseline, justifyContent: FlexAlign.Center }) {
      Text(getPercentageTxt()).fontColor('#fff').fontSize(55)
      Text('%').fontSize(15).fontColor('#fff').margin({ left: 2 })
    }

    Text(`已行驶${this.value}km`).fontSize(12).fontColor('#fff').margin({ top: 8 })
  }.margin({ top: '15%' })
}