Flutter Switch 开关控制

知识共享许可协议 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

参数详解

属性 说明
value 当前开关状态 布尔值
onChanged 监听(开关状态改变时调用)
activeColor 打开 状态 轨道 和 按钮颜色
activeTrackColor 打开 状态轨道颜色
inactiveThumbColor 关闭 状态按钮颜色
inactiveTrackColor 关闭 状态轨道颜色
activeThumbImage 打开 状态下按钮图片
inactiveThumbImage 关闭 状态下按钮图片
materialTapTargetSize 配置tap目标的最小大小
dragStartBehavior 确定处理拖动启动行为的方式。(没看出有什么变化)

Flutter 还提供了仿苹果的Switch组件CupertinoSwitch。下面来介绍一下:

属性 说明
value 当前开关状态 布尔值
onChanged 监听(开关状态改变时调用)
activeColor 打开 状态 轨道 和 按钮颜色

代码示例

Switch代码示例

Switch(
  activeColor:Colors.red,
  activeTrackColor:Colors.yellow,
  inactiveThumbColor:Colors.pink[200],
  inactiveTrackColor:Colors.black,
  activeThumbImage:AssetImage('images/aa.jpg'),
  inactiveThumbImage:AssetImage('images/ba.jpg'),
  dragStartBehavior:DragStartBehavior.start,
  
  value: this.valuea,
  onChanged: (bool v) {
    setState(() {
      this.valuea = v; 
    });
  }, 
),

CupertinoSwitch 代码示例 

CupertinoSwitch(
  value: this.valueb,
  onChanged: (bool value) { 
    setState(() { 
      this.valueb = value; 
    }); 
  },
),

效果图

完整代码

查看完整代码

猜你喜欢

转载自blog.csdn.net/ruoshui_t/article/details/94127375