Guía para Lao Meng: use Flutter para realizar la función de bombardeo, y realice fácilmente el efecto de bombardeo de dientes de tigre y betta.
Comencemos con una representación:
Principio de implementacion
El principio de realización del bombardeo es muy simple, es decir, un bombardeo se traduce de izquierda a derecha. Por supuesto, necesitamos calcular el desplazamiento vertical del bombardeo, de lo contrario todo bombardeo estará en línea recta, cubriéndose entre sí. El código de traducción es el siguiente:
@override
void initState() {
_animationController =
AnimationController(duration: widget.duration, vsync: this)
..addStatusListener((status){
if(status == AnimationStatus.completed){
widget.onComplete('');
}
});
var begin = Offset(-1.0, .0);
var end = Offset(1.0, .0);
_animation = Tween(begin: begin, end: end).animate(_animationController);
//开始动画
_animationController.forward();
super.initState();
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: _animation,
child: widget.child,
);
}
Calcule el desplazamiento vertical:
_computeTop(int index, double perRowHeight) {
//第几轮弹幕
int num = (index / widget.showCount).floor();
var top;
top = (index % widget.showCount) * perRowHeight + widget.padding;
if (num % 2 == 1 && index % widget.showCount != widget.showCount - 1) {
//第二轮在第一轮2行弹幕中间
top += perRowHeight / 2;
}
if (widget.randomOffset != 0 && top > widget.randomOffset) {
top += _random.nextInt(widget.randomOffset) * 2 - widget.randomOffset;
}
return top;
}
Una vez que estén listos, es hora de crear un aluvión. Ahora creemos un aluvión de texto simple:
Text(
text,
style: TextStyle(color: Colors.white),
);
El efecto es el siguiente:
Crear un aluvión para usuarios VIP en realidad está cambiando el color de la fuente:
Text(
text,
style: TextStyle(color: Color(0xFFE9A33A)),
)
El efecto es el siguiente:
Agregue un fondo redondeado al texto:
return Center(
child: Container(
padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
decoration: BoxDecoration(
color: Colors.red.withOpacity(.8),
borderRadius: BorderRadius.circular(50)),
child: Text(
text,
style: TextStyle(color: Colors.white),
),
),
);
El efecto es el siguiente:
Crea una barrera de cohetes:
return Center(
child: Container(
padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
decoration: BoxDecoration(
color: Colors.red.withOpacity(.8),
borderRadius: BorderRadius.circular(50)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
text,
style: TextStyle(color: Colors.white),
),
Image.asset('assets/images/timg.jpeg',height: 30,width: 30,),
Text(
'x $count',
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
),
),
);
El efecto es el siguiente:
Los Rockets son un poco feos, pero este no es el punto.
De hecho, lograr el efecto de bombardeo no es tan simple como inicialmente pensé, y encontré algunos problemas en el proceso, pero afortunadamente, finalmente se resolvieron, y la dirección de Github: https://github.com/781238222/flutter-do/tree/master / flutter_barrage_sample
Si crees que no está mal, dale un pequeño elogio.
Comunicar
Dirección de Github: https://github.com/781238222/flutter-do
Uso detallado de más de 170 componentes: http://laomengit.com
Si aún tiene preguntas sobre Flutter o preguntas técnicas, bienvenido a unirse al grupo de comunicación de Flutter (WeChat: laomengit).
Al mismo tiempo, bienvenido a prestar atención a mi número público de Flutter [programador de Lao Meng], el primer número del contenido relevante del número público de Flutter.
La construcción ecológica de Flutter es inseparable de ti y de mí. Requiere el esfuerzo conjunto de todos. Me gusta es uno de ellos. Si el artículo te ayuda, espero que te guste.