Flutter Switch 开关控制

最新推荐文章于 2024-05-14 21:52:05 发布

原创最新推荐文章于 2024-05-14 21:52:05 发布 · 9.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Switch 开关 #Flutter Switch #Flutter CupertinoSwitch #Flutter 仿苹果开关

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中Switch和CupertinoSwitch组件的属性与使用方法，包括开关状态、颜色、图片配置及监听开关状态改变的回调函数。通过具体代码示例展示了如何自定义Switch组件的外观和行为。

参数详解

属性	说明
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; 
    }); 
  },
),

效果图

完整代码

查看完整代码