Flutter控件--Switch 和 SwitchListTile

flutter控件练习demo地址： github

Switch(开关)、SwitchListTile(带标题的开关) 和 AnimatedSwitch

一 Switch

1.1简介

Switch “开关按钮”

• 本身也是没有存储状态的 Widget 。需要通过有状态的父 Widget 来控制状态
• 当 Switch 状态发生变化的时候 onChanged 会被调用 ， 回调的参数是 bool ，true 表示 选中。 false 表示未选中
• value 属性 表示 是否打开，通过控制这个来控制 Switch 的状态
• 能点击。能滑动

1.2属性

• value： 来初始化此 Switch 是否被选中。true 表示选中 ，false 表示不选中
• onChanged： 当 拖动改变状态时的回调。
• activeColor： 当 value 是 true 时按钮的背景颜色。也就是开的状态时的颜色
• activeTrackColor： 当 value 是 true 时 滑块的颜色
• activeThumbImage： 当 value 是 true 时 滑块的图片
• activeThumbImage： 当 value 是 true 时 滑块上的图片。 如果 activeColor 也设置了 ， 以 activeThumbImage 为准 。如果设置的是网络图片的话。当 滑块 滑到这里 才开始加载。所以 没加载出图片的之前 ，以 activeColor 为准
• inactiveThumbColor： 当 value 是 false 时 滑块的颜色。也就是开的状态时的颜色
• **inactiveTrackColor：**当 value 是 false 时 滑道的颜色
• **inactiveThumbImage：**当 value 是 false 时 滑块上的图片。 如果 inactiveThumbColor 也设置了 ， 以 inactiveThumbImage 为准

二 SwitchListTile

2.1简介

SwitchListTile “带标题的开关”

2.2属性

• value： 是否选中 是否打开
• onChanged： 当打开关闭的时候的回调
• activeColor： 选中时 滑块的颜色
• activeTrackColor： 选中时 滑道的颜色
• inactiveThumbColor： 未选中时 滑块的颜色
• inactiveTrackColor： 未选中时 滑道的颜色
• activeThumbImage： 选中时 滑块的图片
• inactiveThumbImage： 未选中时 滑块的图片
• title： 标题 典型的是 Text
• subtitle： 副标题 在标题下面的 典型的是 Text
• isThreeLine = false： 是不是三行， true 时： subtitle 不能为null， false时可以为 null
• dense： 是否垂直密集居中
• secondary： 左边的一个东西
• selected = false： 如果为 true ，则 text 和 icon 都用 activeColor 时的color

三 demo图片

四 demo代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/generated/i18n.dart';

class SwitchDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFieldStateDemo();
  }
}

class TextFieldStateDemo extends State {
  bool _isCheck;

  @override
  void initState() {
    super.initState();
    _isCheck = false;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Switch 和 SwitchListTile"),
        centerTitle: true,
      ),
      body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(),
            SizedBox(
              height: 20,
            ),
            Text(
              "一：普通的Switch",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            Switch(
              value: _isCheck,
              onChanged: _changed,
            ),
            Text(
              "二：特质的Switch",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            Switch(
              //来初始化此 Switch 是否被选中。true 表示选中 ，false 表示不选中
              value: _isCheck,
              //当 拖动改变状态时的回调。
              onChanged: _changed,
              //当 value 是 true 时 滑块的颜色。也就是开的状态时的颜色
              activeColor: Colors.red,
              // 当 value 是 true 时 滑道的颜色
              activeTrackColor: Colors.blueAccent,
              // 当 value 是 true 时 滑块上的图片。 如果 activeColor 也设置了  ， 以 activeThumbImage 为准
              // 如果设置的是网络图片的话。当 滑块 滑到这里 才开始加载。所以 没加载出图片的之前 ，以 activeColor 为准

              activeThumbImage: NetworkImage(
                  "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3868620627,2694438302&fm=58"),

              // 当 value 是 false 时 滑块的颜色。也就是开的状态时的颜色
              inactiveThumbColor: Colors.amberAccent,
              // 当 value 是 false 时 滑道的颜色
              inactiveTrackColor: Colors.green,
              // 当 value 是 false 时 滑块上的图片。 如果 inactiveThumbColor 也设置了  ， 以 inactiveThumbImage 为准
              inactiveThumbImage: AssetImage("images/hashiqi.jpg"),
            ),
            Text(
              "三：SwitchListTile",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            SizedBox(
              width: 200,
              child: SwitchListTile(
                // 是否选中 是否打开
                value: _isCheck,
                // 当打开关闭的时候的回调
                onChanged: _changed,
                // 选中时 滑块的颜色
                activeColor: Colors.red,
                // 选中时 滑道的颜色
                activeTrackColor: Colors.black,
                // 选中时 滑块的图片
//              activeThumbImage: AssetImage("images/hashiqi.jpg"),
                // 未选中时 滑块的颜色
                inactiveThumbColor: Colors.green,
                // 未选中时 滑道的颜色
                inactiveTrackColor: Colors.amberAccent,
                // 未选中时 滑块的颜色
                inactiveThumbImage: AssetImage("images/hashiqi.jpg"),
                // 标题
                title: Text("标题"),
                // 副标题 在标题下面的
//              subtitle: Text("副标题"),
                // 是不是三行， true 时： subtitle 不能为null， false时可以为 null
//              isThreeLine: true,
                // 如果为 true ，则 text 和 icon 都用 activeColor 时的color
//              selected: true,
                // 是否垂直密集居中
                dense: true,
                // 左边的一个东西
                secondary: Icon(Icons.access_time),
              ),
            ),
          ]),
    );
  }

  void _changed(isCheck) {
    setState(() {
      _isCheck = isCheck;
    });
  }
}

复制代码