1. 基本介紹

Switch 是一個常見的選擇器。

2. 示例代碼

代碼下載地址。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. Switch 屬性介紹

4. Switch 詳解

4.1 容器創(chuàng)建

import 'package:flutter/material.dart';

class FMSwitchVC extends StatefulWidget{
  @override
  FMSwitchState createState() => FMSwitchState();
}

class FMSwitchState extends State <FMSwitchVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Switch"),),
      body: Center(
        child: _switch(),
      ),
    );
  }

  bool switchValue = true;

  Switch _switch(){
    return Switch(
        value: switchValue,
        onChanged: (value){
          switchValue = !switchValue;
          setState(() {

          });
        }
    );
  }
}

4.2 點擊事件

使用 onChanged 捕捉點擊事件，并對狀態(tài)進行記錄，更新控件，完成一個可以反復(fù)點擊的效果。

Switch normal.gif

4.3 顏色

  Switch _switch(){
    return Switch(
        value: switchValue,
        activeColor: Colors.red,
        activeTrackColor: Colors.blue,
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.cyan,

        onChanged: (value){
          switchValue = !switchValue;
          print(value);
          setState(() {

          });
        }
    );
  }

顏色	效果
activeColor	(打開時滑塊顏色 Colors.red) Switch activeColor.png
activeTrackColor	(打開時軌道顏色 Colors.blue) Switch activeTrackColor.png
inactiveThumbColor	(關(guān)閉時滑塊顏色 Colors.yellow) Switch inactiveThumbColor.png
inactiveTrackColor	(關(guān)閉時軌道顏色 Colors.cyan) Switch inactiveTrackColor.png

4.4 圖片

不會導(dǎo)入、使用圖片的請看這里，Flutter入門（9）：Flutter 組件之 Image、AssetImage 詳解

  Switch _switch(){
    return Switch(
        value: switchValue,
        activeColor: Colors.red,
        activeTrackColor: Colors.blue,
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.cyan,

        activeThumbImage: AssetImage('images/base_widgets/bear_white.png'),
        inactiveThumbImage: AssetImage('images/base_widgets/bear_brown.png'),

        onChanged: (value){
          switchValue = !switchValue;
          print(value);
          setState(() {

          });
        }
    );
  }

圖片	效果
activeThumbImage	Swtich activeThumbImage.png
inactiveThumbImage	Switch inactiveThumbImage.png

4.5 圖片錯誤回調(diào)

onActiveThumbImageError 與 onInactiveThumbImageError 分別是選中和未選中狀態(tài)下，滑塊圖片錯誤回調(diào)。一般來說本地圖片不會有什么問題，當加載網(wǎng)絡(luò)圖片時，有時候就會出現(xiàn)這個問題。

我們來給 activeThumbImage 與 inactiveThumbImage 兩個錯誤的網(wǎng)絡(luò)地址，當拿不到正確的圖片時，就會走錯誤回調(diào)了。

  Switch _switch(){
    return Switch(
        value: switchValue,
        activeColor: Colors.red,
        activeTrackColor: Colors.blue,
        inactiveThumbColor: Colors.yellow,
        inactiveTrackColor: Colors.cyan,

        activeThumbImage: NetworkImage("https://activeThumbImage"),
        inactiveThumbImage: NetworkImage("https://inactiveThumbImage"),

        // activeThumbImage: AssetImage('images/base_widgets/bear_white.png'),
        // inactiveThumbImage: AssetImage('images/base_widgets/bear_brown.png'),

        onActiveThumbImageError: (error, stack){
          print("onActiveThumbImageError = $error");
        },

        onInactiveThumbImageError: (error, stack){
          print("onInactiveThumbImageError = $error");
        },

        onChanged: (value){
          switchValue = !switchValue;
          print(value);
          setState(() {

          });
        }
    );
  }

當點擊 Switch 時，會有如下報錯

flutter: onInactiveThumbImageError = SocketException: Failed host lookup: 'inactivethumbimage' (OS Error: nodename nor servname provided, or not known, errno = 8)
flutter: onActiveThumbImageError = SocketException: Failed host lookup: 'activethumbimage' (OS Error: nodename nor servname provided, or not known, errno = 8)

Switch errors.png

5. 技術(shù)小結(jié)

Switch 控件的應(yīng)用場景不是特別多，多加練習(xí)很容易掌握。