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;
    });
  }
}

複製代碼