Flutter开发怎么实现底部留言板

这篇文章主要介绍“Flutter开发怎么实现底部留言板”，在日常操作中，相信很多人在Flutter开发怎么实现底部留言板问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Flutter开发怎么实现底部留言板”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

主要技术

其实这个技术就是运用了动画这个功能封装实现的

实例代码分析

初始化封装

 /*初始化状态*/   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('留言列表'),                 )               ],             ),           )         ),         ],       )     );   } }

到此，关于“Flutter开发怎么实现底部留言板”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！