本文实例为大家分享了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，就是用手势来改变留言板的高度的时候，动画状态没有初始化。希望知道的小伙伴跟我探讨探讨。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
