摘要：控件練習地址開關帶標題的開關和一簡介開關按鈕本身也是沒有存儲狀態的。表示未選中屬性表示是否打開，通過控制這個來控制的狀態能點擊。表示選中，表示不選中當拖動改變狀態時的回調。也就是開的狀態時的顏色當是時滑道的顏色當是時滑塊上的圖片。

flutter控件練習demo地址：github

Switch “開關按鈕”

本身也是沒有存儲狀態的 Widget 。需要通過有狀態的父 Widget 來控制狀態

當 Switch 狀態發生變化的時候 onChanged 會被調用 ， 回調的參數是 bool ，true 表示 選中。 false 表示未選中

value 屬性 表示 是否打開，通過控制這個來控制 Switch 的狀態

能點擊。能滑動

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 “帶標題的開關”

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代碼

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

class SwitchDemo extends StatefulWidget {
  @override
  State 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: [
            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;
    });
  }
}