Flutter - Switch

Switch是两种状态的用户界面元素，用于在ON（选中）或OFF（未选中）状态之间切换。切换时将调用onChanged。如果此属性返回的值为true，则此开关为ON，为OFF则为false。如果此属性为null，则禁用开关小部件。在本文中，无涯教程将了解如何在Flutter应用程序中使用switch小部件。

Switch Widget属性

Switch小部件的一些基本属性如下：

无涯教程网

在此应用程序中，无涯教程定义了一个switch widget。每次切换时，都会调用onChanged属性。为了存储状态，无涯教程定义了一个布尔变量isSwitched，可以在下面的代码中显示。

打开您正在使用的IDE，然后创建Flutter应用程序。接下来，打开lib文件夹，并将main.dart替换为以下代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.blue,
              title: Text("Flutter Switch Example"),
            ),
            body: Center(
                  child: SwitchScreen()
            ),
        )
    );
  }
}

class SwitchScreen extends StatefulWidget {
  @override
  SwitchClass createState() => new SwitchClass();
}

class SwitchClass extends State {
  bool isSwitched = false;
  var textValue = 'Switch is OFF';

  void toggleSwitch(bool value) {

    if(isSwitched == false)
    {
      setState(() {
        isSwitched = true;
        textValue = 'Switch Button is ON';
      });
      print('Switch Button is ON');
    }
    else
    {
      setState(() {
        isSwitched = false;
        textValue = 'Switch Button is OFF';
      });
      print('Switch Button is OFF');
    }
  }
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:[ Transform.scale(
            scale: 2,
            child: Switch(
              onChanged: toggleSwitch,
              value: isSwitched,
              activeColor: Colors.blue,
              activeTrackColor: Colors.yellow,
              inactiveThumbColor: Colors.redAccent,
              inactiveTrackColor: Colors.orange,
            )
          ),
          Text('$textValue', style: TextStyle(fontSize: 20),)
        ]);
  }
}

当无涯教程在模拟器或设备中运行应用程序时，无涯教程应该类似于以下屏幕截图的UI

如果无涯教程按下Switch，它将将状态从OFF变为ON。请参阅下面的屏幕截图:

自定义Switch按钮

Flutter还允许用户自定义其切换按钮。定制使用户界面更具交互性。为此，无涯教程可以在pubspec.yaml文件中添加自定义switch依赖项，然后将其导入到dart文件中。

示例: 打开main.dart文件，并将其替换为以下代码：

import 'package:flutter/material.dart';
import 'package:custom_switch/custom_switch.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.blue,
              title: Text("Custom Switch Example"),
            ),
            body: Center(
                  child: SwitchScreen()
            ),
        )
    );
  }
}

class SwitchScreen extends StatefulWidget {
  @override
  SwitchClass createState() => new SwitchClass();
}

class SwitchClass extends State {
  bool isSwitched = false;
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
            CustomSwitch(
              value: isSwitched,
              activeColor: Colors.blue,
              onChanged: (value) {
                print("VALUE : $value");
                setState(() {
                  isSwitched = value;
                });
              },
            ),
          SizedBox(height: 15.0,),
          Text('Value : $isSwitched', style: TextStyle(color: Colors.red,
              fontSize: 25.0),)
        ]);
    }
}

当无涯教程在模拟器或设备中运行应用程序时，无涯教程应该类似于以下屏幕截图的UI:

如果无涯教程按下switch时，它将将状态从OFF变为ON。请参阅下面的屏幕截图: