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

複製程式碼