Flutter最新提示工具插件latesttooltip的使用

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

Flutter最新提示工具插件latesttooltip的使用

为什么使用latesttooltip？

  • 📦 可以添加小部件到你的提示框中
  • ↔️ 可选择提示框相对于按钮的位置
  • ↩️ 如果预期位置不适合屏幕，则会自动更改位置
  • ✅ 没有外部依赖
  • ❤️ 可自定义布局
  • 🛡️ 支持空安全

开始使用

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  latesttooltip: <last_version>

然后导入库并调用 ElTooltip() 小部件，并传入必要的参数 child 和 content。

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

void main() {
  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const SafeArea(
      child: Center(
        child: ElTooltip(
          child: Icon(Icons.info_outline),
          content: Text('这是一个提示'),
        ),
      ),
    ),
  ));
}

El Tooltip 小部件属性

属性名称 是否必须 默认值 描述
content 是 提示框内的内容。
child 是 触发提示框的小部件（无需点击方法）。
color 否 Colors.white 提示框气泡和箭头的背景颜色。
distance 否 10.0 提示框与触发按钮之间的间距。
padding 否 EdgeInsets.all(14.0) 提示框内容周围的填充。
position 否 topCenter 基于 ElTooltipPosition 枚举的期望位置。
radius 否 Radius.circular(8.0) 提示框的圆角半径。
showModal 否 true 显示全屏暗色层在提示框后面。
showArrow 否 true 显示指向触发小部件的箭头。
showChildAboveOverlay 否 true 在提示框覆盖层上方重复显示触发小部件。
modalConfiguration 否 ModalConfiguration() 如果 showModal 为 true，则配置模态颜色和透明度。
timeout 否 Duration.zero (仅在点击时消失) 等待多长时间后提示框消失。
appearAnimationDuration 否 Duration.zero (不进行动画) 提示框淡入动画持续时间。
disappearAnimationDuration 否 Duration.zero (不进行动画) 提示框淡出动画持续时间。
controller 否 null ElTooltipController 用于显示和隐藏提示框。

El Tooltip 可用位置

示例代码

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

void main() {
  const tooltipContent = Text(
    'Hello World!',
    style: TextStyle(color: Colors.white),
    textAlign: TextAlign.center,
  );

  const tooltipIcon = Icon(
    Icons.info,
    color: Color(0XFFA5A53A),
  );

  runApp(
    MaterialApp(
      title: 'LatestTooltip Demo',
      theme: ThemeData(
        appBarTheme: const AppBarTheme(color: Color(0XFFA5A53A)),
        scaffoldBackgroundColor: const Color(0XFFFFF8C7),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('LatestTooltip Demo')),
        body: const SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                  Spacer(),
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                  Spacer(),
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                ],
              ),
              Row(
                children: [
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                  Spacer(),
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                  Spacer(),
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                ],
              ),
              Row(
                children: [
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                  Spacer(),
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                  Spacer(),
                  ElTooltip(
                    content: tooltipContent,
                    color: Color(0XFFEA4747),
                    child: tooltipIcon,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用latest_tooltip插件的一个基本示例。latest_tooltip插件可以帮助你在应用中显示带有动画效果的提示信息。

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

dependencies:
  flutter:
    sdk: flutter
  latest_tooltip: ^x.y.z  # 请将x.y.z替换为最新的版本号

然后，运行flutter pub get来安装依赖项。

接下来，你可以在你的Flutter应用中使用LatestTooltip组件。以下是一个简单的示例代码，展示了如何使用LatestTooltip来显示一个提示信息：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Latest Tooltip Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Latest Tooltip Example'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  LatestTooltipController? tooltipController;

  @override
  void initState() {
    super.initState();
    tooltipController = LatestTooltipController();
  }

  @override
  void dispose() {
    tooltipController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            tooltipController?.showTooltip(
              context: context,
              message: '这是一个提示信息',
              position: TooltipPosition.top,  // 你可以根据需要设置位置
              duration: Duration(seconds: 2),  // 提示信息显示的时间
              color: Colors.grey.shade200,
              textColor: Colors.black,
              margin: EdgeInsets.only(top: 100),  // 提示信息距离按钮的偏移量
              backgroundColor: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.circular(8),
              elevation: 6,
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            );
          },
          child: Text('显示提示信息'),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个LatestTooltipController实例，并在按钮点击事件中调用showTooltip方法来显示提示信息。你可以根据需要调整提示信息的文本、位置、显示时间和其他样式属性。

请确保你已经按照插件的文档正确安装了依赖项，并根据需要调整代码以适应你的应用需求。如果你需要更高级的功能或自定义样式，请参考latest_tooltip插件的官方文档。

回到顶部