Flutter中的提示工具
2023-09-11 14:20:21 时间
当用户将鼠标悬停、点击或聚焦在某个元素上时,工具提示会显示一条信息性消息。
在 Flutter 中,您可以使用名为 Tooltip 的内置小部件轻松创建工具提示。本文将带您了解 Tooltip 小部件的基础知识以及在实践中使用它的示例。
为了向小部件添加工具提示,您需要做的是将该小部件包装在一个工具提示小部件中,如下所示:
Tooltip(
message: 'This is a tooltip',
child: OutlinedButton(onPressed: () {}, child: const Text('A Button')),
)
常用选项:
- height : 指定工具提示的高度
- padding : 工具提示的填充
- margin : 工具提示的边距
- 装饰:控制工具提示的形状和背景颜色
- preferBelow:工具提示是否会显示在孩子的下方
- showDuration : 工具提示将显示多长时间
- textStyle : 工具提示消息的样式
- waitDuration:在消息出现之前指针必须在工具提示上的时间量
- verticalOffset : 小部件和显示的工具提示之间的垂直间隙
- enableFeedback:工具提示是否提供声音和/或触觉反馈
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
),
body: Center(
child: Tooltip(
message: 'This is a cute dog. Do you like him?',
padding: const EdgeInsets.all(30),
margin: const EdgeInsets.only(top: 80, left: 50),
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(20)),
textStyle: const TextStyle(
fontSize: 15,
fontStyle: FontStyle.italic,
color: Colors.white),
child: SizedBox(
width: 320,
height: 240,
child: Image.network(
'https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20210507081032836.png',
fit: BoxFit.cover,
),
))),
);
}
相关文章
- Flutter 自定义 TextInputFormatter 文本输入过滤器 Flutter 实现输入4位自动添加空格
- Flutter 随机颜色 颜色处理工具类
- flutter开发仿抖音首页面上下滑动切换播放视频效果
- 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码
- Flutter 真的可以做 Desktop 吗?
- Flutter macOS 教程之 01 macOS App开发快速入门 (教程含源码)
- flutter系列之:把box布局用出花来
- flutter系列之:flutter架构什么的,看完这篇文章就全懂了
- 在Flutter中设置更好的Logging的指南
- Flutter 学习之旅 之 flutter 工程目录文件夹说明,以及几个简单 Flutter 案例
- 通过 flutter 实现一个列表功能