日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter開發(fā)實現底部留言板_Android

作者：追逐驀然 ? 更新時間： 2022-05-26 編程語言

本文實例為大家分享了Flutter實現底部留言板的具體代碼，供大家參考，具體內容如下

前言

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

主要技術

其實這個技術就是運用了動畫這個功能封裝實現的

實例代碼分析

初始化封裝

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

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

? ? /*創(chuàng)建補間對象*/
? ? tween = new Tween(begin: 0.0, end: 1.0)
? ? ? ? .animate(controller) ? ?//返回Animation對象
? ? ? ..addListener(() { ? ? ? ?//添加監(jiān)聽
? ? ? ? setState(() {
? ? ? ? ? Provide.value(context).changHeight(tween.value);
? ? ? ? ?// print(tween.value); ? //打印補間插值
? ? ? ? });
? ? ? });
? ? // 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 with SingleTickerProviderStateMixin{

? Animation tween;
? AnimationController controller;

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

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

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

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

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

原文鏈接：https://blog.csdn.net/qq_35905501/article/details/96476775

欄目分類
最近更新