【Flutter】自定义滚动开关

2021/07/01 08:00
阅读数 60



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时显示颜色。

使用

  1. 添加依赖

    dependencies:
      flutter:
        sdk: flutter
     lite_rolling_switch: ^0.1.1
  2. 引入

    import 'package:lite_rolling_switch/lite_rolling_switch.dart';
  3. 运行命令: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



你可能还喜欢

关注「老孟Flutter」
让你每天进步一点点


本文分享自微信公众号 - 老孟Flutter(lao_meng_qd)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部