📌  相关文章
📜  Flutter工具提示

📅  最后修改于: 2021-01-02 05:15:53             🧑  作者: Mango

flutter 工具提示

工具提示是Flutter中的材料设计类，它提供文本标签来解释按钮或用户界面操作的功能。换句话说，它用于在用户移动或指向特定窗口小部件时显示其他信息。它增加了我们应用程序的可访问性。如果我们用它包装小部件，那么当用户长按小部件时，它非常有用，因为在这种情况下，它显示为浮动标签。

特性：

以下是用于自定义应用程序的属性。

message ：这是一个字符串消息，用于显示在工具提示中。

height ：用于指定工具提示子级的高度。

textStyle ：用于确定工具提示消息的样式。

margin ：用于确定工具提示周围的空白区域。

showDuration ：用于指定在释放长按后显示工具提示的时间长度。默认情况下为1.5秒。

装饰：用于定义工具提示的形状和背景颜色。默认的工具提示形状是圆角矩形，其边框半径为4.0 PX。

verticalOffset ：它确定工具提示和小部件之间的垂直间隙。

waitDuration ：用于指定指针在显示工具提示之前悬停在工具提示的窗口小部件上的时间。当指针离开窗口小部件时，工具提示消息将消失。

padding ：它确定插入工具提示的子级的空间。默认情况下，所有方向均为16.0 PX。

preferredBelow ：用于指定是否在小部件下方显示工具提示。默认情况下，这是事实。如果我们没有足够的空间来沿首选方向显示工具提示，则将以相反的方向显示工具提示。

如何在Flutter中使用工具提示小部件?

我们可以使用Flutter中的工具提示作为以下代码：

Tooltip(
        message: 'User Account',
        child: IconButton(
        icon: Icon(Icons.high_quality),
        onPressed: () {
        /* your code */
        },
    ),
),

输出量

例

让我们借助一个示例尝试了解它，其中我们试图覆盖上述大多数属性。在以下示例中，我们将使用带Icon的FlatButton作为子项，并使用tooltip将该按钮包围起来。如果我们长按此按钮，它将显示一个标签，其中包含为工具提示小部件提供的消息。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Tooltip Example"),
      ),
      body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children:[
            Container(
              margin: EdgeInsets.all(10),
              child: Tooltip(
                  waitDuration: Duration(seconds: 1),
                  showDuration: Duration(seconds: 2),
                  padding: EdgeInsets.all(5),
                  height: 35,
                  textStyle: TextStyle(
                      fontSize: 15, color: Colors.white, fontWeight: FontWeight.normal),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10), color: Colors.green),
                  message: 'My Account',
                  child: FlatButton(
                    child: Icon(
                      Icons.account_box,
                      size: 100,
                    ),
                  )),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: Tooltip(
                  message: 'My Account',
                  child: FlatButton(
                    child: Icon(
                      Icons.account_box,
                      size: 100,
                    ),
                  )
              ),
            )
          ]
      ),
    );
  }
}

输出：

当我们在IDE中运行该应用程序时，我们将看到如下屏幕截图所示的UI：

如果长按该图标，我们将在下面的屏幕截图中看到工具提示。