本文实例为大家分享了Flutter实现底部留言板的具体代码,供大家参考,具体内容如下 前言 现在大家基本上都会去接触抖音那款app,其中抖音中的留言区域的效果也是要前几天工作的需求,
本文实例为大家分享了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,就是用手势来改变留言板的高度的时候,动画状态没有初始化。希望知道的小伙伴跟我探讨探讨。
--结束END--
本文标题: Flutter开发实现底部留言板
本文链接: https://www.lsjlt.com/news/143643.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0