Flutter消息提示插件jhtoast的使用
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
更多关于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
(默认)、long
和indefinite
(需要手动关闭)。
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消息。请确保你的图标资源路径是正确的,并根据需要调整代码。