Flutter 开关

2025年3月17日 | 阅读 3 分钟

开关是一种双状态的用户界面元素，用于在开（选中）或关（未选中）状态之间切换。通常，它是一个带有拇指滑块的按钮，用户可以在其中来回拖动以选择开或关形式的选项。它的工作原理类似于家用电开关。

在 Flutter 中，开关是一个用于在两个选项之间进行选择的 Widget，即开或关。它本身不维护状态。为了维护状态，它将调用 onChanged 属性。如果此属性返回的值为 true，则开关处于打开状态，如果为 false，则处于关闭状态。当此属性为 null 时，开关 Widget 被禁用。在本文中，我们将了解如何在 Flutter 应用程序中使用开关 Widget。

Switch Widget 的属性

以下是开关 Widget 的一些基本属性

属性	描述
onChanged	每当用户点击开关时，都会调用它。
值	它包含一个布尔值 true 或 false，以控制开关功能是开还是关。
activeColor	用于指定开关圆球在打开时的颜色。
activeTrackColor	它指定开关轨道栏颜色。
inactiveThubmColor	用于指定开关圆球在关闭时的颜色。
inactiveTrackColor	它指定开关轨道栏在关闭时的颜色。
dragStartBehavior	它处理拖动开始行为。如果我们将其设置为 DragStartBehavior.start，拖动将使开关从开移动到关。

示例

在此应用程序中，我们定义了一个开关 Widget。每次我们切换开关 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

如果我们按下开关，它将把它们的状态从关闭更改为打开。请参阅下面的屏幕截图

如何在 Flutter 中自定义 Switch 按钮？

Flutter 还允许用户自定义他们的开关按钮。自定义使用户界面更具交互性。我们可以通过在 pubspec.yaml 文件中添加 custom-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

如果我们按下开关，它将把它们的状态从关闭更改为打开。请参阅下面的屏幕截图

下一主题Flutter 图表

Flutter 开关

Switch Widget 的属性

如何在 Flutter 中自定义 Switch 按钮？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 开关

Switch Widget 的属性

如何在 Flutter 中自定义 Switch 按钮？

相关帖子

Flutter 日历

Flutter Tabbar

Flutter 列表

Flutter Stack

Flutter 主题

Flutter 行和列

Flutter 文本字段

Flutter 复选框

Flutter 按钮

Flutter Scaffold

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器