Flutter开发实现底部留言板
本文实例为大家分享了Flutter实现底部留言板的具体代码,供大家参考,具体内容如下
前言
现在大家基本上都会去接触抖音那款app,其中抖音中的留言区域的效果也是要前几天工作的需求,看了网上对这块并没有什么博客介绍。只能自己封装编写了。
主要技术
其实这个技术就是运用了动画这个功能封装实现的
实例代码分析
初始化封装
/*初始化状态*/ initState() { super.initState(); /*创建动画控制类对象*/ controller = new AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); /*创建补间对象*/ tween = new Tween(begin: 0.0, end: 1.0) .animate(controller) //返回Animation对象 ..addListener(() { //添加监听 setState(() { Provide.value<IndexProvide>(context).changHeight(tween.value); // print(tween.value); //打印补间插值 }); }); // controller.forward(); //执行动画 }
全部代码
import 'package:flutter/material.dart'; void main(){ runApp( MaterialApp( debugShowCheckedModeBanner: false, home: cityContent(), ) ); } class cityContent extends StatefulWidget { cityContent({Key key}) : super(key: key); _cityContentState createState() => _cityContentState(); } class _cityContentState extends State<cityContent> with SingleTickerProviderStateMixin{ Animation<double> tween; AnimationController controller; /*初始化状态*/ initState() { super.initState(); /*创建动画控制类对象*/ controller = new AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); /*创建补间对象*/ tween = new Tween(begin: 0.0, end: 1.0) .animate(controller) //返回Animation对象 ..addListener(() { //添加监听 setState(() { Provide.value<IndexProvide>(context).changHeight(tween.value); // print(tween.value); //打印补间插值 }); }); // controller.forward(); //执行动画 } @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: <Widget>[ InkWell( onTap: (){ // 动作反方向执行,即关闭留言板 controller.reverse(); }, child: ListView( children: <Widget>[ Center( child: InkWell( onTap: (){ controller.forward(); //执行动画,即打开留言板 }, child: Text( '打开底部抽屉' ), ) ), ], ), ), Positioned( bottom: 0, child: Container( margin: EdgeInsets.fromLTRB(20, 0, 20, 0), height: 400*controller.value, width: 300, color: Colors.grey.shade300, child: ListView( // physics: NeverScrollableScrollPhysics(), children: <Widget>[ Container( margin: EdgeInsets.only(left: 240), child: InkWell( onTap: (){ // 动作反方向执行,即关闭留言板 controller.reverse(); }, child: Icon(Icons.clear), ) ), Center( child: Text('留言列表'), ) ], ), ) ), ], ) ); } }
现在这个大部分的功能是现在的,不过还是差一个手势的问题。我有一个初步的想法是结合状态管理可以做的,不过有一个bug,就是用手势来改变留言板的高度的时候,动画状态没有初始化。希望知道的小伙伴跟我探讨探讨。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android RecyclerView四级缓存源码层详细分析
RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法2022-11-11Android开发中Activity的生命周期及加载模式详解
这篇文章主要介绍了Android开发中Activity的生命周期及加载模式详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下2016-05-05OnSharedPreferenceChangeListener详解及出现不触发解决办法
本文主要介绍 Android OnSharedPreferenceChangeListener的知识,在Android应用开发过程中会遇到监听器不触发事件问题,这里介绍了相应的解决办法2016-08-08简析Android五大布局(LinearLayout、FrameLayout、RelativeLayout等)
这篇文章主要为大家简单分析了Android五大布局,内容有LinearLayout、FrameLayout、RelativeLayout、AbsoluteLayout和TableLayout的相关资料,感兴趣的小伙伴们可以参考一下2016-06-06
最新评论