Flutter滑动按钮组件插件slide_button的使用

概述

滑动按钮组件插件 slide_button 是一个基于多种设备的“滑动解锁”功能的 Flutter 小部件。它高度可定制且灵活。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  slide_button: ^0.2.8

然后运行 flutter pub get 来安装依赖。

使用

以下是使用 slide_button 的步骤：

1. 添加依赖。
2. 在任何地方使用 SlideButton 小部件。
3. 配置所需属性。
4. 实现滑动逻辑。

示例代码

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 控制器用于动态更新文本
  TextEditingController textController1 = TextEditingController();
  TextEditingController textController2 = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 监听控制器变化
    textController2.addListener(() {
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('滑动按钮示例'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            // 显示滑动状态的文本
            Container(
              height: 64,
              width: double.infinity,
              color: Colors.grey,
              child: Center(
                child: Column(
                  children: <Widget>[
                    Text("滑动状态: ${textController1.text}"),
                    Text("滑动值: ${textController2.text}"),
                  ],
                ),
              ),
            ),
            // 第一个滑动按钮
            SlideButton(
              height: 64, // 设置高度
              backgroundChild: Center( // 背景内容
                child: Text("滑动解锁"),
              ),
              backgroundColor: Colors.amber, // 背景颜色
              slidingBarColor: Colors.blue, // 滑动条颜色
              slideDirection: SlideDirection.RIGHT, // 滑动方向
              onButtonOpened: () { // 滑动完成回调
                textController1.text = "已解锁";
              },
              onButtonClosed: () { // 回到初始位置回调
                textController1.text = "已锁定";
              },
              onButtonSlide: (value) { // 动态滑动回调
                textController2.text = value.toString();
              },
            ),
            // 第二个滑动按钮
            SlideButton(
              height: 64,
              borderRadius: 0.0, // 边框圆角
              backgroundColor: Colors.transparent, // 背景透明
              slidingChild: Center( // 滑动条内容
                child: Text("滑动解锁"),
              ),
              slidingBarColor: Colors.blue, // 滑动条颜色
              slideDirection: SlideDirection.LEFT, // 滑动方向
            ),
            // 第三个滑动按钮
            SlideButton(
              height: 64,
              slidingChild: Align( // 自定义滑动条内容
                alignment: Alignment.centerRight,
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 16),
                  child: Icon(Icons.chevron_right), // 图标
                ),
              ),
              backgroundColor: Colors.amber, // 背景颜色
              slidingBarColor: Colors.blue, // 滑动条颜色
              slideDirection: SlideDirection.RIGHT, // 滑动方向
            ),
            // 扩展滑动按钮
            SizedBox(
              height: 300,
              child: SlideButton(
                backgroundColor: Colors.amber, // 背景颜色
                backgroundChild: Center( // 背景内容
                  child: Text("我可以扩展！"),
                ),
                slidingBarColor: Colors.blue, // 滑动条颜色
                slideDirection: SlideDirection.LEFT, // 滑动方向
              ),
            ),
          ],
        ),
      ),
    );
  }
}