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

flutter控件練習(xí)demo地址：github

Switch “開關(guān)按鈕”

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

當(dāng) Switch 狀態(tài)發(fā)生變化的時候 onChanged 會被調(diào)用 ， 回調(diào)的參數(shù)是 bool ，true 表示 選中。 false 表示未選中

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

能點(diǎn)擊。能滑動

value： 來初始化此 Switch 是否被選中。true 表示選中 ，false 表示不選中

onChanged： 當(dāng) 拖動改變狀態(tài)時的回調(diào)。

activeColor： 當(dāng) value 是 true 時按鈕的背景顏色。也就是開的狀態(tài)時的顏色

activeTrackColor： 當(dāng) value 是 true 時 滑塊的顏色

activeThumbImage： 當(dāng) value 是 true 時 滑塊的圖片

activeThumbImage： 當(dāng) value 是 true 時 滑塊上的圖片。 如果 activeColor 也設(shè)置了 ， 以 activeThumbImage 為準(zhǔn) 。如果設(shè)置的是網(wǎng)絡(luò)圖片的話。當(dāng) 滑塊 滑到這里 才開始加載。所以 沒加載出圖片的之前 ，以 activeColor 為準(zhǔn)

inactiveThumbColor： 當(dāng) value 是 false 時 滑塊的顏色。也就是開的狀態(tài)時的顏色

**inactiveTrackColor：**當(dāng) value 是 false 時 滑道的顏色

**inactiveThumbImage：**當(dāng) value 是 false 時 滑塊上的圖片。 如果 inactiveThumbColor 也設(shè)置了 ， 以 inactiveThumbImage 為準(zhǔn)

SwitchListTile “帶標(biāo)題的開關(guān)”

value： 是否選中 是否打開

onChanged： 當(dāng)打開關(guān)閉的時候的回調(diào)

activeColor： 選中時 滑塊的顏色

activeTrackColor： 選中時 滑道的顏色

inactiveThumbColor： 未選中時 滑塊的顏色

inactiveTrackColor： 未選中時 滑道的顏色

activeThumbImage： 選中時 滑塊的圖片

inactiveThumbImage： 未選中時 滑塊的圖片

title： 標(biāo)題 典型的是 Text

subtitle： 副標(biāo)題 在標(biāo)題下面的 典型的是 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(
              "二：特質(zhì)的Switch",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            Switch(
              //來初始化此 Switch 是否被選中。true 表示選中 ，false 表示不選中
              value: _isCheck,
              //當(dāng) 拖動改變狀態(tài)時的回調(diào)。
              onChanged: _changed,
              //當(dāng) value 是 true 時 滑塊的顏色。也就是開的狀態(tài)時的顏色
              activeColor: Colors.red,
              // 當(dāng) value 是 true 時 滑道的顏色
              activeTrackColor: Colors.blueAccent,
              // 當(dāng) value 是 true 時 滑塊上的圖片。 如果 activeColor 也設(shè)置了  ， 以 activeThumbImage 為準(zhǔn)
              // 如果設(shè)置的是網(wǎng)絡(luò)圖片的話。當(dāng) 滑塊 滑到這里 才開始加載。所以 沒加載出圖片的之前 ，以 activeColor 為準(zhǔn)

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

              // 當(dāng) value 是 false 時 滑塊的顏色。也就是開的狀態(tài)時的顏色
              inactiveThumbColor: Colors.amberAccent,
              // 當(dāng) value 是 false 時 滑道的顏色
              inactiveTrackColor: Colors.green,
              // 當(dāng) value 是 false 時 滑塊上的圖片。 如果 inactiveThumbColor 也設(shè)置了  ， 以 inactiveThumbImage 為準(zhǔn)
              inactiveThumbImage: AssetImage("images/hashiqi.jpg"),
            ),
            Text(
              "三：SwitchListTile",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            SizedBox(
              width: 200,
              child: SwitchListTile(
                // 是否選中 是否打開
                value: _isCheck,
                // 當(dāng)打開關(guān)閉的時候的回調(diào)
                onChanged: _changed,
                // 選中時 滑塊的顏色
                activeColor: Colors.red,
                // 選中時 滑道的顏色
                activeTrackColor: Colors.black,
                // 選中時 滑塊的圖片
//              activeThumbImage: AssetImage("images/hashiqi.jpg"),
                // 未選中時 滑塊的顏色
                inactiveThumbColor: Colors.green,
                // 未選中時 滑道的顏色
                inactiveTrackColor: Colors.amberAccent,
                // 未選中時 滑塊的顏色
                inactiveThumbImage: AssetImage("images/hashiqi.jpg"),
                // 標(biāo)題
                title: Text("標(biāo)題"),
                // 副標(biāo)題 在標(biāo)題下面的
//              subtitle: Text("副標(biāo)題"),
                // 是不是三行， 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;
    });
  }
}