Flutter响应式按钮插件reactive_button的使用

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

Flutter响应式按钮插件reactive_button的使用

这个包提供了一个可定制的按钮小部件，并内置了加载、成功和失败状态。它设计用于与Flutter的Bloc架构一起工作，并允许你传递自己的函数来处理成功和失败。

特性

  • 当按钮被按下时显示加载指示器。
  • 自动处理成功和失败状态。
  • 可以传递自定义操作在按钮按下时执行。
  • 通过回调轻松自定义操作成功或失败时会发生什么。

安装

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

dependencies:
  reactive_button: "latest version"

运行flutter pub get来安装包。

使用

以下是如何使用Reactive Button小部件的示例：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  // 按钮点击事件处理函数
  void onPressed() {
    // 这里可以写一些异步操作，例如网络请求等
    Future.delayed(Duration(seconds: 2), () {
      // 模拟操作成功
      return true;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义按钮示例'),
      ),
      body: Center(
        child: ReactiveButton(
          onPressed: onPressed, // 按钮点击事件
          title: '提交', // 按钮标题
          onSuccess: () {
            print('操作成功！');
          }, // 成功回调
          onFailure: (String error) {
            print('操作失败：$error'); // 失败回调
          },
        ),
      ),
    );
  }
}

更多关于Flutter响应式按钮插件reactive_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter响应式按钮插件reactive_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用reactive_button插件的示例代码。reactive_button是一个用于创建响应式按钮的Flutter插件，它允许开发者根据按钮的状态（如加载中、禁用等）自定义按钮的外观和行为。

首先，确保你已经在pubspec.yaml文件中添加了reactive_button依赖：

dependencies:
  flutter:
    sdk: flutter
  reactive_button: ^x.y.z  # 请替换为最新的版本号

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

接下来是一个简单的示例，展示如何使用ReactiveButton：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reactive Button Example'),
        ),
        body: Center(
          child: ReactiveButtonExample(),
        ),
      ),
    );
  }
}

class ReactiveButtonExample extends StatefulWidget {
  @override
  _ReactiveButtonExampleState createState() => _ReactiveButtonExampleState();
}

class _ReactiveButtonExampleState extends State<ReactiveButtonExample> {
  bool isLoading = false;
  bool isDisabled = false;

  void handleButtonClick() async {
    setState(() {
      isLoading = true;
      isDisabled = true;
    });

    // 模拟一个异步操作，比如网络请求
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      isLoading = false;
      isDisabled = false;
    });

    // 显示一个SnackBar作为操作完成的反馈
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Button clicked!')));
  }

  @override
  Widget build(BuildContext context) {
    return ReactiveButton(
      onPressed: !isLoading && !isDisabled ? handleButtonClick : null,
      loading: isLoading,
      disabled: isDisabled,
      child: Text('Click Me'),
      loadingChild: CircularProgressIndicator(color: Colors.white),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.blue),
        foregroundColor: MaterialStateProperty.all(Colors.white),
        overlayColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) {
              return Colors.blue.withOpacity(0.5);
            }
            return null;
          },
        ),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
          ),
        ),
      ),
      disabledStyle: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.grey.shade300),
        foregroundColor: MaterialStateProperty.all(Colors.black.withOpacity(0.5)),
      ),
      loadingStyle: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.grey.shade600),
      ),
    );
  }
}

在这个示例中：

  1. ReactiveButton的onPressed属性接收一个回调函数，该函数在按钮被点击时执行。当按钮处于加载状态或禁用状态时，这个回调函数不会被调用。
  2. loading属性用于指示按钮是否处于加载状态。
  3. disabled属性用于指示按钮是否处于禁用状态。
  4. child属性定义了按钮的默认文本或子组件。
  5. loadingChild属性定义了当按钮处于加载状态时显示的子组件。
  6. style属性用于定义按钮的默认样式。
  7. disabledStyle属性用于定义按钮在禁用状态下的样式。
  8. loadingStyle属性用于定义按钮在加载状态下的样式。

这个示例展示了如何根据按钮的不同状态（默认、加载、禁用）来自定义按钮的样式和行为。

回到顶部