?/*初始化狀態(tài)*/
? initState() {
? ? super.initState();

? ? /*創(chuàng)建動畫控制類對象*/
? ? controller = new AnimationController(
? ? ? ? duration: const Duration(milliseconds: 1000),
? ? ? ? vsync: this);

? ? /*創(chuàng)建補(bǔ)間對象*/
? ? tween = new Tween(begin: 0.0, end: 1.0)
? ? ? ? .animate(controller) ? ?//返回Animation對象
? ? ? ..addListener(() { ? ? ? ?//添加監(jiān)聽
? ? ? ? setState(() {
? ? ? ? ? Provide.value<IndexProvide>(context).changHeight(tween.value);
? ? ? ? ?// print(tween.value); ? //打印補(bǔ)間插值
? ? ? ? });
? ? ? });
? ? // controller.forward(); ? ? ? //執(zhí)行動畫
? }

全部代碼

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;

? /*初始化狀態(tài)*/
? initState() {
? ? super.initState();

? ? /*創(chuàng)建動畫控制類對象*/
? ? controller = new AnimationController(
? ? ? ? duration: const Duration(milliseconds: 1000),
? ? ? ? vsync: this);

? ? /*創(chuàng)建補(bǔ)間對象*/
? ? tween = new Tween(begin: 0.0, end: 1.0)
? ? ? ? .animate(controller) ? ?//返回Animation對象
? ? ? ..addListener(() { ? ? ? ?//添加監(jiān)聽
? ? ? ? setState(() {
? ? ? ? ? Provide.value<IndexProvide>(context).changHeight(tween.value);
? ? ? ? ?// print(tween.value); ? //打印補(bǔ)間插值
? ? ? ? });
? ? ? });
? ? // controller.forward(); ? ? ? //執(zhí)行動畫
? }

? @override
? Widget build(BuildContext context) {
? ? return Scaffold(
? ? ? ? body: Stack(
? ? ? ? children: <Widget>[
? ? ? ? ? InkWell(
? ? ? ? ? ? ? onTap: (){
? ? ? ? ? ? ? ? // 動作反方向執(zhí)行，即關(guān)閉留言板
? ? ? ? ? ? ? ? controller.reverse();
? ? ? ? ? ? ? },
? ? ? ? ? ? child: ?ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? Center(
? ? ? ? ? ? ? ? child: InkWell(
? ? ? ? ? ? ? ? ? onTap: (){
? ? ? ? ? ? ? ? ? ? controller.forward(); ? ? ? //執(zhí)行動畫，即打開留言板
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? 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: (){
? ? ? ? ? ? ? ? ? ? ? // 動作反方向執(zhí)行，即關(guān)閉留言板
? ? ? ? ? ? ? ? ? ? ? controller.reverse();
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? child: Icon(Icons.clear),
? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? Center(
? ? ? ? ? ? ? ? ? child: Text('留言列表'),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? )
? ? ? ? ),
? ? ? ? ],
? ? ? )
? ? );
? }
}

現(xiàn)在這個(gè)大部分的功能是現(xiàn)在的，不過還是差一個(gè)手勢的問題。我有一個(gè)初步的想法是結(jié)合狀態(tài)管理可以做的，不過有一個(gè)bug，就是用手勢來改變留言板的高度的時(shí)候，動畫狀態(tài)沒有初始化。希望知道的小伙伴跟我探討探討。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: