Flutter指示器按钮插件yg_indicator_button的使用

Flutter指示器按钮插件yg_indicator_button的使用

功能

示意图

开始使用

在你的 pubspec.yaml 文件中添加 yg_indicator_button。

dependencies:
  flutter:
    sdk: flutter
  yg_indicator_button:

使用方法

下面是一些简单的示例代码，展示了如何在项目中使用 YGIndicatorButton。

示例代码

以下是在一个基本的 Flutter 应用程序中使用 YGIndicatorButton 的完整示例：

import 'package:flutter/material.dart';
import 'package:yg_indicator_button/yg_indicator_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: 'Flutter Demo',
      theme: ThemeData(
        // 这是您的应用的主题。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // 这个小部件是您的应用的首页。它是一个有状态的小部件，意味着
  // 它有一个包含影响其外观的字段的状态对象。
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时，此方法都会重新运行，例如由_incrementCounter方法。
    return Scaffold(
      appBar: AppBar(
        // 从MyHomePage对象中获取值，并用于设置appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        child: YGIndicatorButton(
          normalTitle: '创建',
          height: 50,
          width: 200,
          action: (closure) {
            closure(YGIndicatorStatus.loading);
            // 模拟API请求
            Future.delayed(const Duration(seconds: 2), () {
              closure(YGIndicatorStatus.completed);
            });
          },
        ),
      ),
    );
  }
}

更多关于Flutter指示器按钮插件yg_indicator_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


yg_indicator_button 是一个用于 Flutter 的指示器按钮插件，它允许你在按钮上显示一个加载指示器，通常用于表示异步操作正在进行中。以下是如何使用 yg_indicator_button 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 yg_indicator_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  yg_indicator_button: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 yg_indicator_button 插件：

import 'package:yg_indicator_button/yg_indicator_button.dart';

3. 使用 IndicatorButton

你可以使用 IndicatorButton 来创建一个带有加载指示器的按钮。以下是一个简单的示例：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  void _startLoading() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _isLoading = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Indicator Button Example'),
      ),
      body: Center(
        child: IndicatorButton(
          isLoading: _isLoading,
          onPressed: _startLoading,
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

4. 参数说明

IndicatorButton 的主要参数包括：

  • isLoading：布尔值，表示是否显示加载指示器。
  • onPressed：按钮点击时的回调函数。
  • child：按钮的内容，通常是一个 Text 或 Icon。

5. 自定义指示器

你可以通过 indicator 参数来自定义加载指示器。例如，使用 CircularProgressIndicator：

IndicatorButton(
  isLoading: _isLoading,
  onPressed: _startLoading,
  child: Text('Click Me'),
  indicator: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
  ),
),

6. 其他自定义选项

IndicatorButton 还提供了其他一些自定义选项，例如：

  • color：按钮的背景颜色。
  • disabledColor：按钮禁用时的背景颜色。
  • textColor：按钮文本的颜色。
  • disabledTextColor：按钮禁用时文本的颜色。

7. 示例代码

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

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

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  void _startLoading() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _isLoading = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Indicator Button Example'),
      ),
      body: Center(
        child: IndicatorButton(
          isLoading: _isLoading,
          onPressed: _startLoading,
          child: Text('Click Me'),
          color: Colors.blue,
          disabledColor: Colors.grey,
          textColor: Colors.white,
          disabledTextColor: Colors.white70,
          indicator: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
          ),
        ),
      ),
    );
  }
}
回到顶部