【Flutter】自定义滚动开关

老孟Flutter

发布于 2021-07-15 16:05:55

33.3K1

发布于 2021-07-15 16:05:55

文章被收录于专栏：FlutterFlutter

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

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

pub地址：https://pub.dev/packages/lite_rolling_switch

介绍

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

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

LiteRollingSwitch有一些属性是：

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

使用

添加依赖

dependencies:
  flutter:
    sdk: flutter
 lite_rolling_switch: ^0.1.1

引入

import 'package:lite_rolling_switch/lite_rolling_switch.dart';

运行命令：flutter packages get

添加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表示用户打开或关闭开关的时间。当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。

img

完整实现

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'}');
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

原文链接：https://medium.com/flutterdevs/custom-rolling-switch-in-flutter-fe62e32700f