Flutter消息提示插件tolyui_message的使用

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

Flutter消息提示插件tolyui_message的使用

使用须知

将 TolyMessage 嵌套在最外层：

void main() {
  runApp(TolyMessage(child: MyApp()));
}

Message功能

如何使用

你可以通过以下方式使用 TolyMessage：

void main() {
  runApp(TolyMessage(
    child: MyApp(),
    // 可以在这里添加其他配置
  ));
}

示例代码

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

void main() {
  runApp(TolyMessage(
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TolyMessage 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示消息提示
              TolyMessage.of(context).showMessage("Hello, TolyMessage!");
            },
            child: Text('点击显示消息'),
          ),
        ),
      ),
    );
  }
}

使用细节文章介绍

更多关于 TolyMessage 的使用细节可以参考这篇文章：

Notification组件

如何使用

你也可以使用 TolyMessage 来显示通知：

void main() {
  runApp(TolyMessage(
    child: MyApp(),
    // 可以在这里添加其他配置
  ));
}

示例代码

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

void main() {
  runApp(TolyMessage(
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TolyMessage 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示通知
              TolyMessage.of(context).showNotification("这是一条通知！");
            },
            child: Text('点击显示通知'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用 tolyui_message 插件在 Flutter 中实现消息提示的代码案例。tolyui_message 是一个用于显示消息提示的 Flutter 插件，它提供了简洁的 API 来显示不同类型的消息提示。

首先，确保你的 Flutter 项目已经添加了 tolyui_message 依赖。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  tolyui_message: ^最新版本号  # 替换为最新版本号

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

接下来，在你的 Flutter 应用中使用 tolyui_message。以下是一个简单的示例，展示如何在按钮点击时显示不同类型的消息提示：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TolyuiMessage tolyuiMessage = TolyuiMessage();

  void showSuccessMessage() {
    tolyuiMessage.showMessage(
      context: context,
      msg: '操作成功',
      type: TolyuiMessageType.success,
      duration: Duration(seconds: 2),
    );
  }

  void showErrorMessage() {
    tolyuiMessage.showMessage(
      context: context,
      msg: '操作失败',
      type: TolyuiMessageType.error,
      duration: Duration(seconds: 2),
    );
  }

  void showInfoMessage() {
    tolyuiMessage.showMessage(
      context: context,
      msg: '这是一个信息提示',
      type: TolyuiMessageType.info,
      duration: Duration(seconds: 2),
    );
  }

  void showWarningMessage() {
    tolyuiMessage.showMessage(
      context: context,
      msg: '警告：请注意',
      type: TolyuiMessageType.warning,
      duration: Duration(seconds: 2),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('tolyui_message 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: showSuccessMessage,
              child: Text('显示成功消息'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showErrorMessage,
              child: Text('显示错误消息'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showInfoMessage,
              child: Text('显示信息消息'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showWarningMessage,
              child: Text('显示警告消息'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个 MyHomePage 类，其中包含四个按钮，每个按钮点击时会调用 tolyuiMessage.showMessage 方法来显示不同类型的消息提示。

  • showSuccessMessage 显示成功消息。
  • showErrorMessage 显示错误消息。
  • showInfoMessage 显示信息消息。
  • showWarningMessage 显示警告消息。

每个方法都指定了消息内容、消息类型以及显示持续时间。context 参数是当前 BuildContext，确保消息提示可以在正确的位置显示。

这样，你就可以在你的 Flutter 应用中使用 tolyui_message 插件来显示各种类型的消息提示了。

回到顶部