【FlutterDart】tolyui_feedback组件例子效果(23 /100)

news2025/1/11 11:46:45

上效果图

在这里插入图片描述
有12种位置展示效果;很能满足大部分需要

代码如下:

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

class TolyTooltipDemo extends StatelessWidget {
  const TolyTooltipDemo({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TolyTooltipDemo'),
        ),
        body: Center(
          child: Column(
            spacing: 10.0,
            children: [
              TolyTooltip(
                message: '默认位置展示',
                child: Text('默认'),
              ),
              TolyTooltip(
                placement: TooltipPlacement.left,
                message: '左侧展示',
                child: Text('设置左侧提示'),
              ),
              TolyTooltip(
                placement: TooltipPlacement.right,
                message: '右侧展示',
                child: Text('设置右侧提示'),
              ),
              TolyTooltip(
                placement: TooltipPlacement.bottom,
                message: '底部展示',
                child: Text('设置底部提示'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

TolyUI介绍:

  • 动画展示/隐藏浮层弹框。
  • 支持 12 种弹框与目标组件的对齐方式。
  • 支持气泡框和非气泡框,填充与边模式线的弹框。
  • 支持边界溢出检测,并自动适应偏移功能。

使用方式非常简单,直接通过 TolyTooltip 组件嵌套在目标组件之上即可。其中:

textStyle 参数可以指定浮窗内文字样式。
padding 参数设置浮层弹框内边距。
placement 参数设置浮层弹框和目标组件的对其方式。
gap 参数设置浮层弹框和目标组件的距离。
message 参数设置浮层弹框文字内容

配置如下:

# 仅使用反馈模块 
dependencies: 
   tolyui_feedback: ^0.2.0
# 或者使用
# 使用 tolyui 全家桶 
dependencies: 
    tolyui: ^0.2.0

选了TolyTooltip来介绍一下,tolyui有个全家桶可以使用的;嗯!
具体详情参考地址:Flutter TolyUI 框架#02 | Popover 与 Tooltip 设计
应该是很强大,但目前我这需要的不多蛤!感兴趣的大佬试试!!!

==============================END

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2274885.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

服务器攻击方式有哪几种?

随着互联网的快速发展,网络攻击事件频发,已泛滥成互联网行业的重病,受到了各个行业的关注与重视,因为它对网络安全乃至国家安全都形成了严重的威胁。面对复杂多样的网络攻击,想要有效防御就必须了解网络攻击的相关内容…

Mermaid 使用教程之流程图 - 从入门到精通

本文由 Mermaid中文文档 整理而来,并且它同时提供了一个Mermaid在线编辑器。 Mermaid 流程图 - 基本语法​ 流程图由节点(几何形状)和边(箭头或线)组成。Mermaid代码定义了如何创建节点和边,并适应不同的…

Flink系统知识讲解之:如何识别反压的源头

Flink系统知识之:如何识别反压的源头 什么是反压 Ufuk Celebi 在一篇古老但仍然准确的文章中对此做了很好的解释。如果您不熟悉这个概念,强烈推荐您阅读这篇文章。如果想更深入、更低层次地了解该主题以及 Flink 网络协议栈的工作原理,这里有…

网络-ping包分析

-a:使 ping 在收到响应时发出声音(适用于某些操作系统)。-b:允许向广播地址发送 ping。-c count:指定发送的 ping 请求的数量。例如,ping -c 5 google.com 只发送 5 个请求。-i interval:指定两…

国产linux系统(银河麒麟,统信uos)使用 PageOffice 实现后台生成单个PDF文档

PageOffice 国产版 :支持信创系统,支持银河麒麟V10和统信UOS,支持X86(intel、兆芯、海光等)、ARM(飞腾、鲲鹏、麒麟等)、龙芯(LoogArch)芯片架构。 PageOffice 版本&…

Win10微调大语言模型ChatGLM2-6B

在《Win10本地部署大语言模型ChatGLM2-6B-CSDN博客》基础上进行,官方文档在这里,参考了这篇文章 首先确保ChatGLM2-6B下的有ptuning AdvertiseGen下载地址1,地址2,文件中数据留几行 模型文件下载地址 (注意&#xff1…

Windows11环境下设置MySQL8字符集utf8mb4_unicode_ci

1.关闭MySQL8的服务CTRLshiftESC,找到MySQL关闭服务即可 2.找到配置文件路径(msi版本默认) C:\ProgramData\MySQL\MySQL Server 8.0 3.使用管理员权限编辑my.ini文件并保存 # Other default tuning values # MySQL Server Instance Config…

js代理模式

允许在不改变原始对象的情况下,通过代理对象来访问原始对象。代理对象可以在访问原始对象之前或之后,添加一些额外的逻辑或功能。 科学上网过程 一般情况下,在访问国外的网站,会显示无法访问 因为在dns解析过程,这些ip被禁止解析,所以显示无法访问 引…

vue3 + ts + element-plus(el-upload + vuedraggable实现上传OSS并排序)

这里创建项目就不多说了 安装element-plus npm install element-plus 安装vuedraggable npm install vuedraggable 安装ali-oss npm install ali-oss 这里是封装一下:在components创建文件夹jc-upload>jc-upload.vue 在封装的过程中遇到了一个问题就是dr…

理解Unity脚本编译过程:程序集

https://docs.unity3d.com/Manual/script-compilation.html 关于Unity C#脚本编译的细节,其中一个比较重要的知识点就是如何自定义Assembly。 预定义的assembly 默认情况下,Unity会按照这个规则进行编译。 PhaseAssembly nameScript files1Assembly-…

设计模式 行为型 责任链模式(Chain of Responsibility Pattern)与 常见技术框架应用 解析

责任链模式(Chain of Responsibility Pattern)是一种行为型设计模式,它允许将请求沿着处理者链进行发送。每个处理者对象都有机会处理该请求,直到某个处理者决定处理该请求为止。这种模式的主要目的是避免请求的发送者和接收者之间…

VS2022如何修改我们新建工程打开新建文件中,默认输入我们的main函数和宏定义

1.右击我们的VS环境,选择【打开文件位置】 2. 进入C:\Program Files\Microsoft Visual Studio\2022\Community\Common7\IDE 目录 进入【VC】文件夹 进入【VCProjectItems】文件夹 3. 修改newcfile.cpp文件 右击选择【打开方式】选择【记事本】 添加如下内容 #defi…

2025-1-10-sklearn学习(36、37) 数据集转换-无监督降维+随机投影 沙上并禽池上暝。云破月来花弄影。

文章目录 sklearn学习(36、37) 数据集转换-无监督降维随机投影sklearn学习(36) 数据集转换-无监督降维36.1 PCA: 主成份分析36.2 随机投影36.3 特征聚集 sklearn学习(37) 数据集转换-随机投影37.1 Johnson-Lindenstrauss 辅助定理37.2 高斯随机投影37.3 稀疏随机矩阵 sklearn学…

openssl编译

关于windows下,openssl编译 环境准备 安装 perl:https://djvniu.jb51.net/200906/tools/ActivePerl5_64.rar安装nasm:https://www.nasm.us/pub/nasm/releasebuilds/2.13.01/win64/nasm-2.13.01-installer-x64.exe下载opensll源码:https://o…

2025-1-9 QT 使用 QXlsx库 读取 .xlsx 文件 —— 导入 QXlsx库以及读取 .xlsx 的源码 实践出真知,你我共勉

文章目录 1. 导入QXlsx库2. 使用 QXlsx库 读取 .xlsx 文件小结 网上有很多教程,但太费劲了,这里有个非常简便的好方法,分享给大家。 1. 导入QXlsx库 转载链接 :https://github.com/QtExcel/QXlsx/blob/master/HowToSetProject.md…

先辑芯片HPM5300系列之SEI多摩川协议命令表问题研究

多摩川协议有9条命令,但是先辑SEI的命令表只有8张。0-6是可用的,第7张是黑洞表,所以只有7张可用。 命令表的限制颇多,比如命令表只能按顺序使用 :例如0、1、3,那么命令表3是不能用的。 如果想要实现9个命令…

kotlin项目无法访问Java类的问题

使用IntelliJ创建一个Kotlin项目,然后在src/main/kotlin中创建一个java接口:Animal.java,然后在Main.kt中打印这个java接口,如下: fun main() {println(Animal::class.java) }代码在编辑器中并没有报错,但…

全栈面试(一)Basic/微服务

文章目录 项目地址一、Basic InterviewQuestions1. tell me about yourself?2. tell me about a time when you had to solve a complex code problem?3. tell me a situation that you persuade someone at work?4. tell me a about a confict with a teammate and how you…

医疗可视化大屏 UI 设计新风向

智能化交互 借助人工智能与机器学习技术,实现更智能的交互功能。如通过语音指令或手势控制来操作大屏,医护人员无需手动输入,可更便捷地获取和处理信息。同时,系统能根据用户的操作习惯和数据分析,自动推荐相关的医疗…

Angular由一个bug说起之十三:Cross Origin

跨域 想要了解跨域,首要要了解源 什么是源,源等于协议加域名加端口号 只有这三个都相同,才是同源,反之则是非同源。 比如下面这四个里,只有第4个是同源 而浏览器给服务器发送请求时,他们的源一样&#xff0…