关注我们

Flutter - Tooltip

tooltip是Flutter中的材料设计类，它提供文本标签来解释按钮或用户界面操作的函数。换句话说，它用于在用户在特定窗口小部件上移动或指向特定窗口小部件时显示其他信息。

属性

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

message - 这是一个字符串消息，用于显示在tooltip中。

height - 它用于指定tooltip的高度。

textStyle - 它用于确定tooltip的样式。

margin - 用于确定tooltip周围的空白区域。

showDuration - 它用于指定释放长按后显示tooltip的时间长度。默认情况下为1.5秒。

decoration - 它用于定义tooltip的形状和背景颜色。默认的tooltip形状是圆角矩形，其边框半径为4.0 PX。

verticalOffset - 它确定tooltip和小部件之间的垂直间隙。

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

padding - 它确定了插入tooltip的子空间。默认情况下，所有方向均为16.0 PX。

preferBelow - 它用于指定是否在小部件下方显示tooltip。

无涯教程可以使用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,
                    ),
                  )
              ),
            )
          ]
      ),
    );
  }
}