Flutter消息提示插件jhtoast的使用

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

Flutter消息提示插件jhtoast的使用

jhtoast 是一个用于 Flutter 应用的消息提示插件,支持多种样式,包括文字提示、图文提示、加载中等效果,并且提供了水平和垂直两种布局。

使用步骤

1. 添加依赖

在你的 pubspec.yaml 文件中添加 jhtoast 包:

dependencies:
  jhtoast: ^1.1.0

2. 安装依赖

运行以下命令来安装依赖:

flutter pub get

3. 导入包

在需要使用 jhtoast 的 Dart 文件中导入包:

import 'package:jhtoast/jhtoast.dart';

示例代码

以下是一个完整的示例代码,展示了如何使用 jhtoast 插件的不同样式。

import 'package:flutter/material.dart';
import 'package:jhtoast/jhtoast.dart';
import 'jhTextList.dart'; // 假设有一个名为 JhTextList 的组件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ToastTestPage(),
    );
  }
}

class ToastTestPage extends StatelessWidget {
  final List<String> titleData = [
    "文字",
    "成功",
    "失败",
    "警告",
    "加载中",
    "水平加载中",
    "自定义图文",
    "水平自定义图文",
    "iOS样式加载中"
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return JhTextList(
      title: "JhToast",
      dataArr: titleData,
      callBack: (index, str) {
        if (index == 0) {
          // 显示文字提示
          JhToast.showText(
            context,
            msg: "这是一条提示文字信息",
//            closeTime: 10
          );
        }
        if (index == 1) {
          // 显示成功提示
          JhToast.showSuccess(
            context,
            msg: "加载成功",
          );
        }
        if (index == 2) {
          // 显示失败提示
          JhToast.showError(
            context,
            msg: "上传失败。请重新上传数据",
          );
        }
        if (index == 3) {
          // 显示警告提示
          JhToast.showInfo(
            context,
            msg: "注意!注意!注意!",
          );
        }
        if (index == 4) {
          // 显示加载中提示
          var hide = JhToast.showLoadingText(
            context,
            msg: "正在加载中...",
          );
          Future.delayed(Duration(seconds: 2), () {
            hide(); // 关闭提示
          });
        }
        if (index == 5) {
          // 显示水平加载中提示
          var hide = JhToast.showHorizontalLoadingText(
            context,
            msg: "正在加载中...",
          );
          Future.delayed(Duration(seconds: 2), () {
            hide(); // 关闭提示
          });
        }
        if (index == 6) {
          // 显示自定义图文提示
          Widget img = Image.asset(
            "assets/images/toast_error.png",
            package: "jhtoast",
          );
          JhToast.showImageText(
            context,
            msg: "自定义图文",
            image: img,
          );
        }
        if (index == 7) {
          // 显示水平自定义图文提示
          Widget img = Image.asset(
            "assets/images/toast_success.png",
            package: "jhtoast",
          );
          JhToast.showHorizontalImageText(
            context,
            msg: "水平自定义图文",
            image: img,
          );
        }
        if (index == 8) {
          // 显示iOS样式加载中提示
          var hide = JhToast.showIOSLoadingText(
            context,
            msg: "正在加载中...",
          );
          Future.delayed(Duration(seconds: 2), () {
            hide(); // 关闭提示
          });
        }
      },
    );
  }
}

更多关于Flutter消息提示插件jhtoast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter消息提示插件jhtoast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用jhtoast消息提示插件的示例代码。jhtoast是一个流行的Flutter插件,用于在应用中显示Toast消息。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加jhtoast的依赖:

dependencies:
  flutter:
    sdk: flutter
  jhtoast: ^3.2.0  # 请检查最新版本号

然后运行以下命令来安装依赖:

flutter pub get

2. 导入插件

在你需要使用Toast消息的Dart文件中导入jhtoast插件:

import 'package:jhtoast/jhtoast.dart';

3. 使用JHToast

以下是一些使用JHToast的基本示例,包括显示简单文本消息、带有图标的消息、以及设置不同的显示时长。

显示简单文本消息

void showSimpleToast() {
  JHToast.toast("这是一个简单的Toast消息");
}

显示带有图标的消息

void showToastWithIcon() {
  JHToast.toastWithImage(
    message: "这是一个带有图标的Toast消息",
    image: Image.asset("assets/icons/icon.png"), // 请确保你有这个图标资源
  );
}

设置不同的显示时长

JHToast支持三种显示时长:short(默认)、longindefinite(需要手动关闭)。

void showToastWithDuration() {
  // 显示短时间Toast
  JHToast.toast("短时间Toast", duration: JHToastDuration.SHORT);

  // 显示长时间Toast
  JHToast.toast("长时间Toast", duration: JHToastDuration.LONG);

  // 显示不自动关闭的Toast(需要手动关闭)
  JHToast.toast("不自动关闭的Toast", duration: JHToastDuration.INDEFINITE);
}

自定义位置

JHToast也允许你自定义显示位置,例如顶部、中间或底部。

void showToastWithPosition() {
  // 显示在顶部
  JHToast.toast("顶部Toast", gravity: JHToastGravity.TOP);

  // 显示在中间
  JHToast.toast("中间Toast", gravity: JHToastGravity.CENTER);

  // 显示在底部(默认)
  JHToast.toast("底部Toast", gravity: JHToastGravity.BOTTOM);
}

4. 手动关闭Indefinite Toast

如果你显示了一个不自动关闭的Toast,你可能需要在某个时刻手动关闭它。你可以使用JHToast.cancel()方法来实现。

void cancelToast() {
  JHToast.cancel();
}

完整示例

以下是一个完整的示例,结合了上述所有功能:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JHToast示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: showSimpleToast,
                child: Text('显示简单Toast'),
              ),
              ElevatedButton(
                onPressed: showToastWithIcon,
                child: Text('显示带图标Toast'),
              ),
              ElevatedButton(
                onPressed: showToastWithDuration,
                child: Text('显示不同时长Toast'),
              ),
              ElevatedButton(
                onPressed: showToastWithPosition,
                child: Text('显示不同位置Toast'),
              ),
              ElevatedButton(
                onPressed: () async {
                  // 显示indefinite Toast
                  await JHToast.toast("不自动关闭的Toast", duration: JHToastDuration.INDEFINITE);
                  // 延迟2秒后手动关闭
                  await Future.delayed(Duration(seconds: 2));
                  JHToast.cancel();
                },
                child: Text('显示并手动关闭Toast'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void showSimpleToast() {
    JHToast.toast("这是一个简单的Toast消息");
  }

  void showToastWithIcon() {
    JHToast.toastWithImage(
      message: "这是一个带有图标的Toast消息",
      image: Image.asset("assets/icons/icon.png"), // 请确保你有这个图标资源
    );
  }

  void showToastWithDuration() {
    JHToast.toast("短时间Toast", duration: JHToastDuration.SHORT);
    JHToast.toast("长时间Toast", duration: JHToastDuration.LONG);
    JHToast.toast("不自动关闭的Toast", duration: JHToastDuration.INDEFINITE);
  }

  void showToastWithPosition() {
    JHToast.toast("顶部Toast", gravity: JHToastGravity.TOP);
    JHToast.toast("中间Toast", gravity: JHToastGravity.CENTER);
    JHToast.toast("底部Toast", gravity: JHToastGravity.BOTTOM);
  }
}

这个示例展示了如何在Flutter应用中使用jhtoast插件来显示各种Toast消息。请确保你的图标资源路径是正确的,并根据需要调整代码。

回到顶部