开发中使用——组件Select/Counter暗色主题下显示问题

在API 18中发现一个问题，组件Select/Counter这两个组件，在手机暗色模式下，App中展示有些问题，我自己没有进行自定义主题和其他设置。

手机亮色模式下

• 元服务和APP中，在手机亮色模式下显示都是正常的（左边图片）。

手机暗色模式下

• 元服务中显示正常（左边图片）。
• APP中，显示是不正常的（右边图片）
  

基于一般的组件不进行自定义设置时，会自动跟随手机系统的主题进行切换。但是这里组件Select/Counter明显出现了问题。

解决办法：给这两个组件，设置固定主题为成亮色主题。

  // 设置组件为深色模式
      WithTheme({ colorMode: ThemeColorMode.DARK }) {

        Column(){
          Select(this.cateNameArr)
            .value(this.cateNameArr[this.curSelectedCateIndex].value)
            .font({ size: 16 })
            .selectedOptionFont({ size: 16 })
            .optionFont({ size: 16 })
            .onSelect((index: number) => {
              this.curSelectedCateIndex = index;
            })
            .width('100%')


          Counter() {
            Text(this.quantity.toString())
              .fontSize(16)
              .fontColor(Color.Black)
          }
          .onInc(() => {
            this.quantity++
          })
          .onDec(() => {
            if (this.quantity > 1) {
              this.quantity--
            }
          })
          .width('100%')
        }
      
      }

解决路程

由于我使用的API还算是比较新，通过AI和搜索引擎搜到的答案，并不能直接使用。
这里记录一下解决的思路历程：

• 1.组件自身出发
  通过设置组件Select/Counter自身的背景颜色或者尝试修改组件中按钮的颜色。结果并没有属性和方法可以去修改。

• 2.修改APP主题
  尝试修改主题或者设置成固定主题，只是为了两个插件有点大材小用了。

• 3.从主题出发
  尝试通过局部设置主题，通过查看官方文档。解决了问题。

总结

• 1.发现问题后，解决的方向很重要，有很多的方法，条条大路通罗马。如果10分钟不能解决，可以转变思路，尝试其他方式。

• 2.要依赖官方文档和API，不用过分依赖AI和搜索引擎，因为我们使用的技术和API比较新的时候。

参考：

官方文档——主题