Flutter 自定义滚动开关【转译】

switch是两个状态的UI组件，用于在ON（选中）或OFF（未选中）状态之间切换。通常，它是带有拇指滑块的按钮，用户可以在其中来回拖拉以选择其他选项，例如“开”或“关”。它的工作就像房子的电源开关。

在本文中，我们将探讨Flutter中的Custom Rolling Switch in Flutter。我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序，该程序具有吸引人的动画和一些属性。

lite_rolling_switch

在Flutter中，开关是一个小部件，用于在两种选择（ON或OFF）之间进行选择。它没有跟上实际状态。为了保持状态，它将调用onChanged属性。假设此属性的价值回报为true，则此开关为ON，为OFF则为false。当此属性无效时，开关小部件会失效。

“自定义滚动开关”按钮具有诱人的动画效果，允许您修改颜色，符号和其他恢复性物质。处理小部件状态的方式与处理传统材质的切换小部件的方式类似。

该演示视频展示了如何在颤动中创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。它显示了在用户按下按钮后进行的切换交互，该开关将滚动到具有动画效果的另一侧，并且在滚动该开关时将更改图标和文本。它会显示在您的设备上。

LiteRollingSwitch有一些属性是：

onChanged：当用户打开或关闭开关时，将调用此属性。
value：此属性用于确定此开关是打开还是关闭。
animationDuration：此属性用于动画完成一个周期应花费的时间。
colorOn：此属性用于在开关打开时显示颜色。
colorOff：此属性用于在开关为Off时显示颜色。

步骤

步骤1：添加依赖项将依赖项添加到pubspec-yaml文件。依赖项：

  flutter：
    sdk：flutter 
  lite_rolling_switch：^ 0.1.1

步骤2：汇入

import 'package:lite_rolling_switch/lite_rolling_switch.dart';

步骤3：运行flutter软件包，将其放入应用程序的根目录中。

如何在dart文件中实现代码：

您需要分别在代码中实现它： demo_screen.dart在文件夹内创建一个名为dart的新lib文件。

在正文部分，我们将添加Center（）小部件。在小部件内，我们将添加一个列小部件。在此小部件中，我们将添加mainAxisAlignment为center。在内部，我们将添加带有样式的文本。我们将添加填充，并在其子项上添加LiteRollingSwitch（）小部件以进行自定义。

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text("Do you like Flutter?",style: TextStyle(
          fontSize: 22,
          fontWeight: FontWeight.bold
      ),
      ),

      Padding(
        padding: EdgeInsets.only(top: 20),
        child: LiteRollingSwitch(
          value: true,
          textOn: 'Yes',
          textOff: 'No',
          colorOn: Colors.cyan,
          colorOff: Colors.red[400],
          iconOn: Icons.check,
          iconOff: Icons.power_settings_new,
          animationDuration: Duration(milliseconds: 800),
          onChanged: (bool state) {
            print('turned ${(state) ? 'yes' : 'no'}');
          },
        ),
      )
    ],
  ),
),

在里面，我们将添加值为true的值，这意味着确定此开关是打开还是关闭。我们将添加textOn是字符串' Yes '表示当开关打开时，文本将显示在按钮上；当textOff是字符串' No '意味着当开关关闭时，文本将显示在按钮上。我们将添加colorOn表示当开关处于打开状态时按钮上会显示颜色，而当colorOff意味着当开关处于关闭状态时按钮上会显示颜色。我们将添加animationDuration手段来延迟动画的开始并添加onChanged表示用户打开或关闭开关的时间。当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。

import 'dart:ui';

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

class DemoScreen extends StatefulWidget {


  @override
  _DemoScreenState createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal[50],
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.black,
        title: Text('Flutter Custom Rolling Switch'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Do you like Flutter?",style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold
            ),
            ),

            Padding(
              padding: EdgeInsets.only(top: 20),
              child: LiteRollingSwitch(
                value: true,
                textOn: 'Yes',
                textOff: 'No',
                colorOn: Colors.cyan,
                colorOff: Colors.red[400],
                iconOn: Icons.check,
                iconOff: Icons.power_settings_new,
                animationDuration: Duration(milliseconds: 800),
                onChanged: (bool state) {
                  print('turned ${(state) ? 'yes' : 'no'}');
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

在本文中，我以Flutter的方式解释了基本结构的“自定义滚动开关”；您可以根据自己的选择修改此代码。这是我这边的“自定义滚动式打开用户交互”的小介绍，并且正在使用Flutter进行工作。

我希望该博客能够为您在flutter项目中尝试 “自定义滚动开关”提供足够的信息。我们将向您展示什么是简介。显示一些属性，制作一个工作于“自定义滚动开关”的演示程序，并在用户按下按钮的位置显示切换交互，然后该开关将滚动到具有动画效果的另一侧，并且在使用滚动该开关时将更改图标和文本flutter应用程序中的lite_rolling_switch软件包，请尝试一下。