【Flutter&Dart】tolyui_feedback组件例子效果(23 /100)

上效果图

有12种位置展示效果;很能满足大部分需要

代码如下:

dart 复制代码
import 'package:flutter/material.dart';
import 'package:tolyui_feedback/tolyui_feedback.dart';

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

  @override
  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 参数设置浮层弹框文字内容

配置如下:

yaml 复制代码
# 仅使用反馈模块 
dependencies: 
   tolyui_feedback: ^0.2.0
# 或者使用
# 使用 tolyui 全家桶 
dependencies: 
    tolyui: ^0.2.0

选了TolyTooltip来介绍一下,tolyui有个全家桶可以使用的;嗯!

具体详情参考地址:Flutter TolyUI 框架#02 | Popover 与 Tooltip 设计

应该是很强大,但目前我这需要的不多蛤!感兴趣的大佬试试!!!

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

相关推荐
雨白39 分钟前
实现双向滑动的 ScalableImageView(上)
android
Y4090011 小时前
数据库基础知识——聚合函数、分组查询
android·数据库
没有了遇见6 小时前
Android 原生定位(替代高德 / 百度等三方定位)<终极版本>
android
蓝倾7 小时前
京东商品属性API数据解析:颜色、尺寸与材质
api·fastapi
2501_916008897 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921437 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
CYRUS_STUDIO8 小时前
LLVM 全面解析:NDK 为什么离不开它?如何亲手编译调试 clang
android·编译器·llvm
CYRUS_STUDIO8 小时前
静态分析神器 + 动态调试利器:IDA Pro × Frida 混合调试实战
android·逆向
g_i_a_o_giao10 小时前
Android8 binder源码学习分析笔记(一)
android·java·笔记·学习·binder·安卓源码分析
翻滚丷大头鱼10 小时前
android 四大组件—BroadcastReceiver
android