Flutter浮动操作按钮插件sliding_action_button的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter浮动操作按钮插件sliding_action_button的使用

关于这个包

sliding_action_button 包是为了方便 Flutter 开发者实现一个滑动以执行操作的按钮而开发的。该包可以通过更改按钮容器颜色、添加自定义图标到可拖动按钮、启用或禁用按钮并应用不同的颜色状态来定制。

可用功能：

  • CircleSlidingActionButton
  • SquareSlidingActionButton
  • 上述选项带有完成滑动动作后的加载状态功能

使用此包的好处：

  • 节省开发时间
  • 只需几行代码即可实现滑动动作功能

要求

  • 最低 Flutter SDK 版本：3.0.0

示例用法

配置

所有选项通用参数

参数名称 描述
height 这是整个小部件的高度。
width 这是整个小部件的宽度。
parentBoxRadiusValue 这是 BorderRadius.circular() 属性的双精度值，用于配置父框的角。
parentBoxBackgroundColor 这是当 isEnable 为 True 时父框的背景色。注意：你不能同时设置 parentBoxGradientBackgroundColor 或 parentBoxDisableGradientBackgroundColor。
parentBoxDisableBackgroundColor 这是当 isEnable 为 False 时父框的背景色。注意：你不能同时设置 parentBoxGradientBackgroundColor 或 parentBoxDisableGradientBackgroundColor。
parentBoxGradientBackgroundColor 如果你想使用渐变，则这是 isEnable 为 True 时父框的背景色。注意：你不能同时设置 parentBoxBackgroundColor 或 parentBoxDisableBackgroundColor。
parentBoxDisableGradientBackgroundColor 如果你想使用渐变，则这是 isEnable 为 False 时父框的背景色。注意：你不能同时设置 parentBoxBackgroundColor 或 parentBoxDisableBackgroundColor。
initialSlidingActionLabel 这是在滑动动作之前出现在父框中的文本。
finalSlidingActionLabel 这是在滑动动作之后出现在父框中的文本。如果此字段为空，则将使用相同的样式作为 initialSlidingActionLabelTextStyle。
initialSlidingActionLabelTextStyle 这是滑动动作之前的标签文本样式。
finalSlidingActionLabelTextStyle 这是滑动动作之后的标签文本样式。如果此字段为空，则将使用相同的样式作为 initialSlidingActionLabelTextStyle。
isEnable 这用于启用或禁用滑动动作，默认值为 True。
loaderColor 这是滑动动作完成后加载器的颜色，默认为 白色。
animationDuration 这是从滑动到动作按钮再到加载器所需的时间，默认为 700 毫秒。
onSlideActionCompleted 这是一个回调，用于指示滑动动作成功结束。
onSlideActionCanceled 这是一个回调，用于指示滑动动作未成功结束。

CircleSlidingActionButton

参数描述

参数名称 描述
circleSlidingButtonSize 这是圆形（可拖动）按钮的宽度和高度。
circleSlidingButtonRadiusValue 这是圆形按钮上的 BorderRadius.circular() 属性的双精度值。
leftEdgeSpacing 这用于对齐圆形按钮的左侧。
rightEdgeSpacing 这用于确定圆形滑动按钮小部件与父部件在右侧的间距。
circleSlidingButtonIcon 这是在滑动按钮上显示的图标。
circleSlidingButtonBackgroundColor 这是当 isEnable 为 True 时圆形滑动按钮的背景色。
circleSlidingButtonDisableBackgroundColor 这是当 isEnable 为 False 时圆形滑动按钮的背景色。
slideActionButtonType 这个字段表示滑动动作的基本行为（类型）。默认为 SlideActionButtonType.basicSlideActionButton。 
CircleSlideToActionButton(
  width: 250,
  parentBoxRadiusValue: 27,
  circleSlidingButtonSize: 47,
  leftEdgeSpacing: 3,
  initialSlidingActionLabel: 'Add To Basket',
  finalSlidingActionLabel: 'Added To Basket',
  circleSlidingButtonIcon: const Icon(
    Icons.add_shopping_cart,
    color: Colors.orange,
  ),
  parentBoxBackgroundColor: Colors.orange,
  parentBoxDisableBackgroundColor: Colors.grey,
  circleSlidingButtonBackgroundColor: Colors.white,
  isEnable: true,
  onSlideActionCompleted: () {
    print("Sliding action completed");
  },
  onSlideActionCanceled: () {
    print("Sliding action cancelled");
  },
)

SquareSlidingActionButton

参数描述

参数名称 描述
squareSlidingButtonSize 这是方形（可拖动）按钮的宽度和高度。
squareSlidingButtonRadiusValue 这是方形按钮上的 BorderRadius.circular() 属性的双精度值。
leftEdgeSpacing 这用于对齐方形按钮的左侧。
rightEdgeSpacing 这用于确定方形滑动按钮小部件与父部件在右侧的间距。
squareSlidingButtonIcon 这是在滑动按钮上显示的图标。
squareSlidingButtonBackgroundColor 这是当 isEnable 为 True 时方形滑动按钮的背景色。
squareSlidingButtonDisableBackgroundColor 这是当 isEnable 为 False 时方形滑动按钮的背景色。
slideActionButtonType 这个字段表示滑动动作的基本行为（类型）。默认为 SlideActionButtonType.basicSlideActionButton。 
SquareSlideToActionButton(
  width: 250,
  parentBoxRadiusValue: 15,
  initialSlidingActionLabel: 'Add To Basket',
  finalSlidingActionLabel: 'Added To Basket',
  squareSlidingButtonSize: 50,
  squareSlidingButtonIcon: const Icon(
    Icons.add_shopping_cart,
    color: Colors.orange,
  ),
  squareSlidingButtonBackgroundColor: Colors.white,
  parentBoxGradientBackgroundColor: LinearGradient(
      colors: [Colors.orange, Colors.grey.withOpacity(0.5)]),
  parentBoxDisableGradientBackgroundColor: LinearGradient(colors: [
    Colors.grey,
  ]),
  leftEdgeSpacing: 2,
  rightEdgeSpacing: 4,
  onSlideActionCompleted: () {
    print("Sliding action completed");
  },
  onSlideActionCanceled: () {
    print("Sliding action cancelled");
  },
);

其他信息

新功能即将推出！

感谢您对我的包感兴趣。如果您有任何反馈、发现错误或需要缺少的功能，请随时在以下链接创建问题。 https://github.com/r1n1os/sliding_action_button/issues

完整示例代码

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Sliding Action Button'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Circle Basic Slide To Action Button Example',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 15,
              ),
              CircleSlideToActionButton(
                width: 250,
                parentBoxRadiusValue: 27,
                circleSlidingButtonSize: 47,
                leftEdgeSpacing: 3,
                rightEdgeSpacing: 3,
                initialSlidingActionLabel: 'Add To Basket',
                finalSlidingActionLabel: 'Added To Basket',
                circleSlidingButtonIcon: const Icon(
                  Icons.add_shopping_cart,
                  color: Colors.orange,
                ),
                parentBoxBackgroundColor: Colors.orange,
                parentBoxDisableBackgroundColor: Colors.grey,
                circleSlidingButtonBackgroundColor: Colors.white,
                isEnable: true,
                onSlideActionCompleted: () {
                  print("Sliding action completed");
                },
                onSlideActionCanceled: () {
                  print("Sliding action cancelled");
                },
              ),
              const SizedBox(
                height: 100,
              ),
              const Text(
                'Circle Slide To Action With Loader Button Example',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 15,
              ),
              CircleSlideToActionButton(
                width: 250,
                parentBoxRadiusValue: 27,
                circleSlidingButtonSize: 47,
                leftEdgeSpacing: 3,
                initialSlidingActionLabel: 'Add To Basket',
                finalSlidingActionLabel: 'Added To Basket',
                circleSlidingButtonIcon: const Icon(
                  Icons.add_shopping_cart,
                  color: Colors.orange,
                ),
                parentBoxBackgroundColor: Colors.orange,
                parentBoxDisableBackgroundColor: Colors.grey,
                circleSlidingButtonBackgroundColor: Colors.white,
                isEnable: true,
                slideActionButtonType:
                    SlideActionButtonType.slideActionWithLoaderButton,
                onSlideActionCompleted: () {
                  print("Sliding action completed");
                },
                onSlideActionCanceled: () {
                  print("Sliding action cancelled");
                },
              ),
              const SizedBox(
                height: 100,
              ),
              const Text(
                'Circle Slide To Action Disable Button Example',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 15,
              ),
              CircleSlideToActionButton(
                width: 250,
                parentBoxRadiusValue: 27,
                circleSlidingButtonSize: 50,
                leftEdgeSpacing: 2,
                rightEdgeSpacing: 4,
                initialSlidingActionLabel: 'Add To Basket',
                finalSlidingActionLabel: 'Added To Basket',
                circleSlidingButtonIcon: const Icon(
                  Icons.add_shopping_cart,
                  color: Colors.orange,
                ),
                parentBoxBackgroundColor: Colors.orange,
                parentBoxDisableBackgroundColor: Colors.grey.withOpacity(0.5),
                circleSlidingButtonBackgroundColor: Colors.white,
                circleSlidingButtonDisableBackgroundColor: Colors.white,
                isEnable: false,
                onSlideActionCompleted: () {
                  print("Sliding action completed");
                },
                onSlideActionCanceled: () {
                  print("Sliding action cancelled");
                },
              ),
              const SizedBox(
                height: 100,
              ),
              const Text(
                'Square Slide To Action Button Example',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 15,
              ),
              SquareSlideToActionButton(
                width: 250,
                parentBoxRadiusValue: 15,
                initialSlidingActionLabel: 'Add To Basket',
                finalSlidingActionLabel: 'Added To Basket',
                squareSlidingButtonSize: 50,
                squareSlidingButtonIcon: const Icon(
                  Icons.add_shopping_cart,
                  color: Colors.orange,
                ),
                squareSlidingButtonBackgroundColor: Colors.white,
                parentBoxBackgroundColor: Colors.orange,
                parentBoxDisableBackgroundColor: Colors.grey,
                leftEdgeSpacing: 2,
                rightEdgeSpacing: 4,
                onSlideActionCompleted: () {
                  print("Sliding action completed");
                },
                onSlideActionCanceled: () {
                  print("Sliding action cancelled");
                },
              ),
              const SizedBox(
                height: 100,
              ),
              const Text(
                'Square Slide To Action Button with Gradient Example',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 15,
              ),
              SquareSlideToActionButton(
                width: 250,
                parentBoxRadiusValue: 15,
                initialSlidingActionLabel: 'Add To Basket',
                finalSlidingActionLabel: 'Added To Basket',
                squareSlidingButtonSize: 50,
                squareSlidingButtonIcon: const Icon(
                  Icons.add_shopping_cart,
                  color: Colors.orange,
                ),
                squareSlidingButtonBackgroundColor: Colors.white,
                parentBoxGradientBackgroundColor: LinearGradient(
                    colors: [Colors.orange, Colors.grey.withOpacity(0.5)]),
                parentBoxDisableGradientBackgroundColor:
                    LinearGradient(colors: [
                  Colors.grey,
                ]),
                leftEdgeSpacing: 2,
                rightEdgeSpacing: 4,
                onSlideActionCompleted: () {
                  print("Sliding action completed");
                },
                onSlideActionCanceled: () {
                  print("Sliding action cancelled");
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter浮动操作按钮插件sliding_action_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter浮动操作按钮插件sliding_action_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用sliding_action_button插件来创建一个浮动操作按钮（FAB）及其滑动动作的示例代码。首先，确保你已经在pubspec.yaml文件中添加了sliding_action_button依赖项：

dependencies:
  flutter:
    sdk: flutter
  sliding_action_button: ^0.4.0  # 请检查最新版本号

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

以下是一个完整的示例代码，展示了如何使用sliding_action_button：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sliding Action Button Example'),
        ),
        body: Center(
          child: Text('Swipe up to reveal more options'),
        ),
        floatingActionButton: SlidingActionButton(
          totalActions: 4,
          closedColor: Colors.blue,
          openedColor: Colors.blue[700]!,
          hoverColor: Colors.blue[400]!,
          iconWhenClosed: Icons.add,
          label: 'Actions',
          backgroundColor: Colors.transparent,
          foregroundColor: Colors.white,
          actions: <Widget>[
            SlidingActionButtonAction(
              icon: Icons.star,
              label: 'Favorite',
              onPressed: () {
                // Handle favorite action
                print('Favorite pressed');
              },
            ),
            SlidingActionButtonAction(
              icon: Icons.share,
              label: 'Share',
              onPressed: () {
                // Handle share action
                print('Share pressed');
              },
            ),
            SlidingActionButtonAction(
              icon: Icons.edit,
              label: 'Edit',
              onPressed: () {
                // Handle edit action
                print('Edit pressed');
              },
            ),
            SlidingActionButtonAction(
              icon: Icons.delete,
              label: 'Delete',
              color: Colors.red,
              onPressed: () {
                // Handle delete action
                print('Delete pressed');
              },
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 导入必要的包：

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

  2. 定义主应用：

    void main() {
  runApp(MyApp());
}

  3. 创建MyApp组件：

    • 使用MaterialApp包裹主页面。
    • 使用Scaffold定义页面布局，包括AppBar和页面主体。
    • 在floatingActionButton属性中使用SlidingActionButton。

  4. 配置SlidingActionButton：

    • totalActions：定义滑动后显示的动作数量。
    • closedColor、openedColor、hoverColor：分别定义按钮关闭、打开和悬停时的颜色。
    • iconWhenClosed：定义按钮关闭时的图标。
    • label：定义按钮打开时的标签。
    • backgroundColor和foregroundColor：定义背景色和前景色（标签和图标颜色）。
    • actions：定义动作列表，每个动作使用SlidingActionButtonAction。

  5. 定义每个动作：

    • icon：动作图标。
    • label：动作标签。
    • onPressed：动作点击时的回调函数。
    • color（可选）：特定动作的颜色。

运行这个示例应用，你将看到一个可滑动的浮动操作按钮，向上滑动可以显示更多的动作选项。每个动作点击时都会在控制台打印相应的信息。

回到顶部