当前位置: 首页 > article >正文

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

上效果图

在这里插入图片描述
有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.kler.cn/a/488497.html

相关文章:

  • Ubuntu问题 -- 硬盘存储不够了, 如何挂载一个新的硬盘上去, 图文简单明了, 已操作成功
  • 基于 Python 和 OpenCV 的人脸识别上课考勤管理系统
  • 如何在 Ubuntu 22.04 上安装 Caddy Web 服务器教程
  • 新时期下k8s 网络插件calico 安装
  • 谷歌开放语音命令数据集,助力初学者踏入音频识别领域
  • L1G5000 XTuner 微调个人小助手认知
  • vue3 初体验
  • 学习通过几何约束从单个图像预测 3D 车道形状和相机姿态 | 论文解读
  • 前端哪些内容最好添加专属前缀?
  • 嵌入式系统 tensorflow
  • HarmonyOS开发:ArkTS初识
  • Windows使用AutoHotKey解决鼠标键连击现象(解决鼠标连击、单击变双击的故障)
  • package包机制详解
  • HTML实战课堂之倒计时页面
  • 如何使用Scala和Selenium爬取知乎视频并保存到本地
  • 分布式ID—雪花算法
  • 【python翻译软件V1.0】
  • 计算机毕业设计hadoop+spark+hive新能源汽车推荐系统 汽车数据分析可视化大屏 新能源汽车推荐系统 汽车爬虫 汽车大数据 机器学习
  • istio-proxy oom问题排查步骤
  • JVM 触发类加载的条件有哪些?
  • 修改sshd默认配置,提升安全
  • Elasticsearch—索引库操作(增删查改)
  • word论文排版常见问题汇总
  • 【JAVA】时间戳和日期时间互转
  • 使用 Spring Boot 实现钉钉消息发送消息
  • computer与watch坚挺的区别与使用