HarmonyOS Toggle组件设备type为Switch时,滑槽颜色无法设置

容器组件背景是黑色时,滑槽根本无法看到,如附件图片:

HarmonyOS Toggle组件设备type为Switch时,滑槽颜色无法设置-鸿蒙开发者社区

HarmonyOS
2024-10-29 10:47:04
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

当容器组件背景为黑色的时候,可以通过backgroundColor结合borderRadius来设置switch的背景颜色,示例如下:

@Entry  
@Component  
struct ToggleExample {  
  build() {  
    Column({ space: 10 }) {  
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')  
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {  
        Toggle({ type: ToggleType.Switch, isOn: false })  
          .selectedColor('red')  // 设置选中时的switch颜色  
          .switchPointColor('#fff')  // 设置switch类型的圆形滑块颜色。  
          .onChange((isOn: boolean) => {  
            console.info('Component status:' + isOn)  
          })  
          .backgroundColor(Color.Green) // 设置switch背景颜色  
          .borderRadius(10) // 设置按钮圆角为switch高度的一半  
          .hoverEffect(HoverEffect.None)  // 去除switch按钮点击背景  
  
        Toggle({ type: ToggleType.Switch, isOn: false })  
          .selectedColor('#007DFF')  
          .switchPointColor('#FFFFFF')  
          .onChange((isOn: boolean) => {  
            console.info('Component status:' + isOn)  
          })  
      }  
    }  
    .width('100%')  
    .padding(24)  
    .height('100%')  
    .backgroundColor('#000')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-29 16:46:26
相关问题
如何将背景颜色设置透明
2496浏览 • 1回复 待解决
HarmonyOS Toggle组件怎么拦截?
238浏览 • 1回复 待解决
HarmonyOS page和WebView无法设置透明
327浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
2060浏览 • 1回复 待解决
如何设置边框的颜色渐变色?
408浏览 • 1回复 待解决
设置XComponent组件透明
419浏览 • 1回复 待解决
HarmonyOS toggle组件是否支持完全受控
331浏览 • 0回复 待解决
控件enabled设置false,hover失效
2052浏览 • 1回复 待解决
怎样TextArea组件设置最小高度?
289浏览 • 1回复 待解决