一 概述

本文介绍Flutter中的开关控件：

• Switch：只有开关功能，打开/关系开关
• SwitchListTile：带有文字描述和开关的开关控件
• CupertinoSwitch：IOS风格的开关控件

二 Switch-只有开关

2.1 构造方法

const Switch({
    Key? key,
    required this.value,
    required this.onChanged,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.onActiveThumbImageError,
    this.inactiveThumbImage,
    this.onInactiveThumbImageError,
    this.thumbColor,
    this.trackColor,
    this.materialTapTargetSize,
    this.dragStartBehavior = DragStartBehavior.start,
    this.mouseCursor,
    this.focusColor,
    this.hoverColor,
    this.overlayColor,
    this.splashRadius,
    this.focusNode,
    this.autofocus = false,
  })

2.2 常用属性

2.3 示例

代码

var _switchValue = false;
Switch(
         activeThumbImage: AssetImage('images/bird.png',),
         inactiveThumbColor: Colors.green,
         inactiveTrackColor: Colors.orange,
         activeColor: Colors.red,
         activeTrackColor: Colors.blue,
         value: _switchValue,
         onChanged: (value) {
                 setState(() {
                   _switchValue = value;
                   });
       })

效果图

三 SwitchListTile-开关+文字

3.1 构造方法

 const SwitchListTile({
    Key? key,
    required this.value,
    required this.onChanged,
    this.tileColor,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.contentPadding,
    this.secondary,
    this.selected = false,
    this.autofocus = false,
    this.controlAffinity = ListTileControlAffinity.platform,
    this.shape,
    this.selectedTileColor,
  })

3.2 常用属性

3.3 示例

代码

var _switchListValue = false;
SwitchListTile(
                title: Text("开启消息推送？"),
                subtitle: Text("subTitle"),
                 value: _switchListValue,
                 onChanged: (value) {
                    setState(() {
                      _switchListValue = value;
                    });
                 })

效果图

四 CupertinoSwitch-仿IOS

4.1 构造方法

const CupertinoSwitch({
    Key? key,
    required this.value,
    required this.onChanged,
    this.activeColor,
    this.trackColor,
    this.dragStartBehavior = DragStartBehavior.start,
  })

4.2 示例

 var _switchValue = false;
 CupertinoSwitch(
                  value: _switchValue,
                  onChanged: (value) {
                    setState(() {
                      _switchValue = value;
                    });
                  })

效果图