Flutter開發(fā)實(shí)現(xiàn)底部留言板

更新時(shí)間：2022年03月23日 16:09:46 作者：追逐驀然

這篇文章主要為大家詳細(xì)介紹了Flutter開發(fā)實(shí)現(xiàn)底部留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter實(shí)現(xiàn)底部留言板的具體代碼，供大家參考，具體內(nèi)容如下

前言

現(xiàn)在大家基本上都會(huì)去接觸抖音那款app，其中抖音中的留言區(qū)域的效果也是要前幾天工作的需求，看了網(wǎng)上對(duì)這塊并沒有什么博客介紹。只能自己封裝編寫了。

主要技術(shù)

其實(shí)這個(gè)技術(shù)就是運(yùn)用了動(dòng)畫這個(gè)功能封裝實(shí)現(xiàn)的

實(shí)例代碼分析

初始化封裝

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

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

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

全部代碼

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)建動(dòng)畫控制類對(duì)象*/
? ? controller = new AnimationController(
? ? ? ? duration: const Duration(milliseconds: 1000),
? ? ? ? vsync: this);

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

? @override
? Widget build(BuildContext context) {
? ? return Scaffold(
? ? ? ? body: Stack(
? ? ? ? children: <Widget>[
? ? ? ? ? InkWell(
? ? ? ? ? ? ? onTap: (){
? ? ? ? ? ? ? ? // 動(dòng)作反方向執(zhí)行，即關(guān)閉留言板
? ? ? ? ? ? ? ? controller.reverse();
? ? ? ? ? ? ? },
? ? ? ? ? ? child: ?ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? Center(
? ? ? ? ? ? ? ? child: InkWell(
? ? ? ? ? ? ? ? ? onTap: (){
? ? ? ? ? ? ? ? ? ? controller.forward(); ? ? ? //執(zhí)行動(dòng)畫，即打開留言板
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? 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: (){
? ? ? ? ? ? ? ? ? ? ? // 動(dòng)作反方向執(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í)候，動(dòng)畫狀態(tài)沒有初始化。希望知道的小伙伴跟我探討探討。

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

您可能感興趣的文章: