Flutter忙碌状态指示插件busy的使用

介绍

busy 是一个专注于处理忙碌状态的 Flutter 包。

开始使用

功能

• 在 State 对象中添加了一个 isBusy 属性。
• 添加了 startBusyContext 方法，该方法可以自动管理 isBusy 属性的状态。
• BusyScaffold：带有自动管理忙碌状态的 scaffold。
• BusyCupertinoScaffold：带有自动管理忙碌状态的 cupertino scaffold。
• BusyWidget：带有自动管理忙碌状态的 widget。
• 不依赖任何外部包，放心使用。

使用

BusyScaffold

在你的 Material 应用程序中使用此小部件。

class _BusyScaffoldPageState extends State<BusyScaffoldPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BusyScaffold(
      isBusy: isBusy,
      scaffold: Scaffold(
        appBar: AppBar(
          title: const Text("Busy scaffold"),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const SizedBox(height: 8),
                FilledButton(
                  onPressed: () {
                    startBusyContext(() async {
                      await Future.delayed(const Duration(seconds: 2));
                    });
                  },
                  child: Text("Start async method"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

BusyCupertinoScaffold

在你的 iOS 应用程序中使用此小部件。

class _BusyCupertinoScaffoldPageState extends State<BusyCupertinoScaffoldPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BusyCupertinoScaffold(
      isBusy: isBusy,
      scaffold: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text("Busy cupertino scaffold"),
        ),
        child: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const SizedBox(height: 8),
                FilledButton(
                  onPressed: () {
                    startBusyContext(() async {
                      await Future.delayed(const Duration(seconds: 2));
                    });
                  },
                  child: const Text("Start async method"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

BusyWidget

class _BusyWidgetPageState extends State<BusyWidgetPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Busy widget"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            BusyWidget(
              isBusy: isBusy,
              child: SizedBox(
                height: MediaQuery.of(context).size.height * 0.33,
                child: Container(
                  color: Colors.blue,
                  child: const Center(child: Text("Busy widget")),
                ),
              ),
            ),
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.33,
              child: Container(
                color: Colors.red,
                child: const Center(child: Text("Non busy widget")),
              ),
            ),
            FilledButton(
              onPressed: () {
                startBusyContext(() async {
                  await Future.delayed(const Duration(seconds: 2));
                });
              },
              child: const Text("Start async method"),
            ),
          ],
        ),
      ),
    );
  }
}

完整示例

以下是一个完整的示例代码：

import 'package:busy/busy.dart';
import 'package:example/busy_widget_page.dart';
import 'package:flutter/material.dart';

import 'busy_cupertino_scaffold_page.dart';
import 'busy_scaffold_page.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(useMaterial3: true, colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  bool isBusy = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BusyScaffold(
      isBusy: isBusy,
      scaffold: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const SizedBox(height: 8),
                FilledButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const BusyScaffoldPage()),
                    );
                  },
                  child: const Text("Go to busy scaffold"),
                ),
                FilledButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const BusyCupertinoScaffoldPage()),
                    );
                  },
                  child: const Text("Go to busy cupertino scaffold"),
                ),
                FilledButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const BusyWidgetPage()),
                    );
                  },
                  child: const Text("Go to busy widget"),
                ),
                ExampleStatelessWidget(
                  functionToCall: () async {
                    await Future.delayed(const Duration(seconds: 1));
                  },
                  isBusyValueChanged: (isBusyNewValue) {
                    setState(() {
                      isBusy = isBusyNewValue;
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ExampleStatelessWidget extends StatelessWidget {
  const ExampleStatelessWidget(
      {super.key,
      required this.functionToCall,
      required this.isBusyValueChanged});

  final Function functionToCall;
  final Function(bool) isBusyValueChanged;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FilledButton(
      onPressed: () async {
        startBusyContext(
            functionToCall: functionToCall,
            isBusyValueChanged: isBusyValueChanged);
      },
      child: const Text("Load from stateless widget"),
    );
  }
}