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

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%' })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.