Skip to content
On this page

Switch 开关

代码演示

基础用法

dart
Switch(
  onChange: (v) => model.value = v,
  value: model.value,
),

禁用状态

dart
Switch(
  value: model.value,
  disabled: true,
),

自定义大小

dart
Switch(
  value: model.value,
  onChange: (v) => model.value = v,
  size: 20,
),

自定义颜色

dart
Switch(
  value: model.value,
  onChange: (v) => model.value = v,
  bgOnColor: const Color(0xFFEE0A24),
),

自定义按钮

dart
Switch(
  value: model.value,
  onChange: (v) => model.value = v,
  drawThumb: (v) => Icon(v ? VanIcons.success : VanIcons.cross),
),

搭配单元格使用

dart
Cell(
  title: "标题",
  center: true,
  value: WithModel(true, (model) {
    return Switch(
      value: model.value,
      onChange: (v) => model.value = v,
    );
  }),
),

API

Props类型描述
valuebool当前选中
sizedouble大小
disabledbool禁用状态
onChangeFunction(bool)选中变化触发
bgOffColorColor关闭时背景颜色
bgOnColorColor打开时背景颜色
drawThumbWidget Function(bool)绘制滑块