Una información sobre herramientas es generalmente una etiqueta de texto estático que aparece sobre algo en su pantalla para darle una mejor idea de lo que está haciendo algo. Algunos widgets vienen de fábrica con tooltip
propiedad que puede establecer:
Por ejemplo, un FloatingActionButton
viene con esta función y se muestra cuando el usuario presiona el botón durante mucho tiempo:
Sin crhábito alimenticio FloatingActionButton
No hay muchas personalizaciones disponibles para su información sobre herramientas. Nota al margen: si quieres ver cómo personalizar el widget Flutter, he escrito un artículo que te muestra como hacerlo aqui.
Sin embargo, puede utilizar Tooltip
widget directamente envolviéndolo en otro widget. En este caso, envolví el estándar Text
widget s Tooltip
crea tu propio mensaje:
Tooltip( message: "Hi this is the standard tip", child: Text( 'You have pushed the button this many times:', ),),
Cuando mantienes presionado el texto, aparece el mensaje que configuraste. Mediante el uso ToolTip
le ofrece muchas más opciones de personalización, como altura, estilo, desplazamiento vertical y duración:
Anular el predeterminado Tooltip
Los parámetros pueden proporcionar un mensaje bastante personalizado:
Tal vez algo de arriba se adapte a sus necesidades, pero si desea agregar animación o mostrar una información sobre herramientas después de otro gesto, podemos crear el nuestro OverlayEntry
.
Para crear lo que ves en el video de arriba, sigue estos pasos:
Primero usamos y GestureDetector
widget y pegar Text
widget como su bebé. Quiero que aparezca esta información sobre herramientas cuando un usuario hace doble clic en el texto para incluir un carácter onDoubleTap
propiedad:
Ahora creemos nuestro real OverlayEntry
. Cree un nuevo archivo .dart y asígnele el nombre que desee (el mío se llama hint_overlay.dart). Cree un nuevo StatefulWidget en su nuevo archivo y asígnele el nombre de acuerdo con sus necesidades (el mío se llama HintOverlay). Cuando estés ahí, agrega SingleTickerProviderStateMixin
implementación (porque lo necesitamos para la animación) initState
y dispose
métodos:
Lo necesitamos HintOverlay
tomar dos parámetros:
1. Referencia a OverlayEntry
ese HintOverlay
se insertará en (entry
)
2. Un mensaje que aparece como ayuda (message
):
(Obviamente, puede establecer cualquier cantidad de parámetros, pero verá por qué necesitamos al menos un enlace a OverlayEntry
pasado)
Quiero que mi información sobre herramientas aparezca a través de una animación: deslice el dedo desde el lado derecho de la pantalla al lado izquierdo de la pantalla, así que lo agregaré AnimationController
y Tween
animación dentro de HintOverlay initState
:
Además, creo un temporizador (_startTimer
), que eliminará OverlayEntry
después de un tiempo determinado. Empezaré por dentro initState
y establezca su duración en un segundo más que AnimationController
La duración se establece en, de esta manera se elimina cuando está fuera de la pantalla:
Cuando llamamos .remove()
en OverlayEntry
que entramos (widget.entry), dispose()
se activará. Por eso lo pasamos entry
enlace.
De regreso main.dart
archivo, necesitamos crear un archivo real OverlayEntry
y devolvamos nuestro nuevo HintOverlay
widget. Entonces tendremos el nuestro OnDoubleTap
la propiedad devuelve nuestro incrustado OverlayEntry
.
Ahora que todo está configurado, podemos hacer doble clic en el texto «Mi sugerencia de entrada de superposición» y nuestra sugerencia debe deslizarse por la pantalla en el estilo de un recorte. Aquí está otra vez: