Flutter加载状态按钮插件loading_elevated_button的使用

Flutter加载状态按钮插件loading_elevated_button的使用

Loading Elevated Button 是一个具有加载状态下禁用功能的按钮。该按钮可以根据加载状态启用或禁用，并且可以在加载时显示不同的子部件。

开始使用

简单版的 ElevatedButton 具有在加载状态下启用/禁用的功能，还可以根据其状态添加不同的子部件。

你可以查看下面的简单示例，或者查看代码中的示例项目，该示例项目包含其他基本行为（上图来自该示例）。

简单示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Elevated Button',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            width: 200,
            child: LoadingElevatedButton(
              isLoading: true,
              disabledWhileLoading: true,
              onPressed: () {
                print("Button clicked");
              },
              child: Text('Hello'),
            ),
          ),
        ),
      ),
    );
  }
}

按钮属性

LoadingElevatedButton({
    Key key,
    VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autoFocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,
    Widget? loadingChild,
    bool isLoading = false,
    bool disabledWhileLoading = true,
});

示例代码

以下是完整的示例代码，展示了如何使用 Loading Elevated Button 插件的不同状态：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Elevated Button',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  const Demo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              buildNotLoadingButton(),
              buildLoadingButton(),
              buildLoadingWithCustomizedMessageButton(),
              buildLoadingButtonNotDisabled(),
            ],
          ),
        ),
      ),
    );
  }

  // 不加载状态的按钮
  Container buildNotLoadingButton() {
    return Container(
      padding: const EdgeInsets.all(8.0),
      height: 58,
      width: 200,
      child: LoadingElevatedButton(
        isLoading: false,
        disabledWhileLoading: true,
        onPressed: () {
          print("Button clicked");
        },
        child: const Text('Not Loading'),
      ),
    );
  }

  // 加载状态的按钮
  Container buildLoadingButton() {
    return Container(
      padding: const EdgeInsets.all(8.0),
      height: 58,
      width: 200,
      child: LoadingElevatedButton(
        isLoading: true,
        disabledWhileLoading: true,
        onPressed: () {
          print("Button clicked");
        },
        child: const Text('Default Loading'),
      ),
    );
  }

  // 加载状态并自定义消息的按钮
  Container buildLoadingWithCustomizedMessageButton() {
    return Container(
      padding: const EdgeInsets.all(8.0),
      height: 58,
      width: 200,
      child: LoadingElevatedButton(
        isLoading: true,
        disabledWhileLoading: true,
        onPressed: () {
          print("Button clicked");
        },
        child: const Text('Not Loading'),
        loadingChild: const Text(
          'Customized Loading',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  // 加载状态但不被禁用的按钮
  Container buildLoadingButtonNotDisabled() {
    return Container(
      padding: const EdgeInsets.all(8.0),
      height: 58,
      width: 200,
      child: LoadingElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: Colors.green,
        ),
        isLoading: true,
        disabledWhileLoading: false,
        onPressed: () {
          print("Button clicked");
        },
        child: const Text(
          'Loading but not Disabled',
          textAlign: TextAlign.center,
        ),
        loadingChild: const Text(
          'Customized and Enabled Loading',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}