Flutter – 加载进度指示器按钮

Flutter是一款强大的跨平台移动应用开发框架，可以帮助开发者快速构建漂亮、高性能、可扩展的移动应用。其中，加载进度指示器按钮是Flutter中常用的UI控件之一，用于在用户等待某个操作完成时展示进度指示器。本文将介绍如何在Flutter应用中使用加载进度指示器按钮。

创建一个简单的Flutter应用

首先，我们需要创建一个简单的Flutter应用。我们可以使用Flutter官方提供的工具来创建和运行Flutter应用。在终端中执行以下命令：

flutter create loading_button
cd loading_button
flutter run

这样，就可以创建一个名为loading_button的Flutter应用，并在模拟器中启动它。

添加依赖项

添加依赖项是使用任何Flutter插件的第一步。在这种情况下，我们需要添加以下依赖项：

flutter_spinkit：Flutter中实现各种加载指示器的组件

在pubspec.yaml文件中，添加依赖项并运行flutter packages get：

dependencies:
  flutter_spinkit: ^5.0.0

创建一个加载按钮

1. 导入必要的包

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

2. 创建一个状态fulWidget并实现它

class LoadingButtonWidget extends StatefulWidget {
  final VoidCallback onPressed;
  final bool isLoading;
  final String text;

  const LoadingButtonWidget(
      {Key key,
      @required this.onPressed,
      @required this.isLoading,
      @required this.text})
      : super(key: key);

  @override
  _LoadingButtonWidgetState createState() => _LoadingButtonWidgetState();
}

class _LoadingButtonWidgetState extends State<LoadingButtonWidget> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: widget.onPressed,
      disabledColor: Colors.grey[400],
      color: Colors.blue[500],
      child: widget.isLoading
          ? SpinKitCircle(
              color: Colors.white,
              size: 20.0,
            )
          : Text(
              widget.text,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
            ),
    );
  }
}

以上代码中，我们创建了一个名为LoadingButtonWidget的状态fulWidget，它接受3个必要参数：onPressed：点击按钮时要调用的回调函数，isLoading：指示器是否应该显示和text：显示在按钮上的文本。

在build方法中，我们使用RaisedButton来创建一个有(style)样式的扁平按钮。我们使用widget.isLoading来确定SpinKitCircle是否应该显示在按钮上，并同时处理相应的UI逻辑。

最后，我们将RaisedButton返回到调用方。

使用加载按钮

现在，我们已经创建了一个加载按钮，现在是时候将其添加到我们的Flutter应用程序中了。

在Flutter应用程序中添加以下代码：

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
         appBar: AppBar(
            title: Text('Loading Button Demo'),
          ),
          body: Builder(
            builder: (context) => Center(
              child: LoadingButtonWidget(
                isLoading: false,
                text: 'Submit',
                onPressed: () {
                  setState(() {
                    isLoading = true;
                    Future.delayed(Duration(seconds: 3), () {
                      setState(() {
                        isLoading = false;
                      });
                      Scaffold.of(context).showSnackBar(
                          SnackBar(content: Text('Data submitted successfully')));
                    });
                  });
                },
              ),
            ),
          ),
        ),
    );
  }
}

在以上代码中，我们首先创建了一个名为MyApp的无状态Widget，在build方法中使用MaterialApp来创建我们的Flutter应用程序。

接下来，我们在Scaffold中 생성了一个AppBar和一个Center小部件，以显示我们的LoadingButtonWidget小部件。

在LoadingButtonWidget中，我们定义isLoading为false。当用户点击按钮时，我们使用Future.delayed模拟一个异步操作，并在模拟异步操作完成时更改isLoading来展示加载button的load效果。我们还在完成异步操作后将Scaffold中的SnackBar消息显示给用户。

总结

在本 article中，我们介绍了如何在Flutter应用中使用Loading Button Widget来显示简单的加载指示器。我们已经看到了如何创建一个名为LoadingButtonWidget的自定义flutter组件，并将它添加到我们的应用程序中。如果想要深入学习关于Flutter的更多内容，可以查看Flutter官方文档，里面有许多详尽的示例和文档供开发者参考。