flutter實(shí)現(xiàn)帶刪除動(dòng)畫(huà)的listview功能
更新時(shí)間：2021年05月21日 15:40:50 作者：Mannaoz
最近接了一個(gè)新項(xiàng)目，需要開(kāi)發(fā)帶有刪除動(dòng)畫(huà)效果的listview功能，在實(shí)現(xiàn)過(guò)程中列表滾動(dòng)效果用listview實(shí)現(xiàn)的，本文通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)過(guò)程，感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
個(gè)人開(kāi)發(fā)app中，需要開(kāi)發(fā)一個(gè)帶有刪除功能的ListView
效果如下
需求動(dòng)畫(huà)分析
列表可以滾動(dòng)用listView，
有兩個(gè)動(dòng)畫(huà)，第一個(gè)動(dòng)畫(huà)是透明度變化，第二個(gè)是size變化
是順序執(zhí)行
實(shí)現(xiàn)過(guò)程
新建一個(gè)動(dòng)畫(huà)頁(yè)面進(jìn)行單獨(dú)控制
記得用statefulwidget類(lèi)，這第二個(gè)動(dòng)畫(huà)之間涉及到頁(yè)面刷新切換widget
記得with tickerproviderstatemixin 這個(gè)是動(dòng)畫(huà)類(lèi)狀態(tài)管理的必備
class AnimationListItem extends StatefulWidget {
AnimationListItem();
@override
_AnimationListItemState createState() => _AnimationListItemState();
}
class _AnimationListItemState extends State<AnimationListItem>
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container();
}
}
動(dòng)畫(huà)流程
聲明
//控制器 AnimationController lucencyController; AnimationController sizeController; // 動(dòng)畫(huà) Animation<double> lucencyAnimation; Animation<double> sizeAnimation;
初始化
///必須在initstate這個(gè)生命周期進(jìn)行初始化
@override
void initState() {
// TODO: implement initState
super.initState();
lucencyController =
AnimationController(vsync: this, duration: Duration(milliseconds: 150));
lucencyAnimation = Tween(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: lucencyController, curve: Curves.easeOut));
sizeController =
AnimationController(vsync: this, duration: Duration(milliseconds: 250));
sizeAnimation = Tween(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: sizeController, curve: Curves.easeOut));
}
注銷(xiāo)
@override
void dispose() {
lucencyController.dispose();
sizeController.dispose();
super.dispose();
}
最后內(nèi)容呈現(xiàn)
class AnimationListItem extends StatefulWidget {
AnimationListItem();
@override
_AnimationListItemState createState() => _AnimationListItemState();
}
class _AnimationListItemState extends State<AnimationListItem>
with TickerProviderStateMixin {
AnimationController lucencyController;
AnimationController sizeController;
Animation<double> lucencyAnimation;
Animation<double> sizeAnimation;
bool isChange = false;
@override
void initState() {
// TODO: implement initState
super.initState();
lucencyController =
AnimationController(vsync: this, duration: Duration(milliseconds: 150));
lucencyAnimation = Tween(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: lucencyController, curve: Curves.easeOut));
sizeController =
AnimationController(vsync: this, duration: Duration(milliseconds: 250));
sizeAnimation = Tween(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: sizeController, curve: Curves.easeOut));
}
@override
Widget build(BuildContext context) {
return buildItemBox();
}
@override
void dispose() {
lucencyController.dispose();
sizeController.dispose();
super.dispose();
}
Widget buildItemBox() {
return isChange
? SizeTransition(
axis: Axis.vertical,
sizeFactor: sizeAnimation,
child: Container(
height: duSetWidth(100),
width: double.infinity,
),
)
: FadeTransition(
opacity: lucencyAnimation,
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.only(
left: duSetWidth(15),
right: duSetWidth(15),
),
height: duSetWidth(100),
child: buildRow(),
),
);
}
Widget buildRow() {
///設(shè)置顯示的樣式
bool _isSub = false;
Color _isSubColor = Color.fromRGBO(245, 77, 130, 1);
Color _isSubBackColor = Colors.transparent;
Widget isSubWidget = InkWell(
child: Container(
alignment: Alignment.center,
width: duSetWidth(55),
height: duSetWidth(28),
decoration: BoxDecoration(
color: _isSubBackColor,
border: Border.all(color: _isSubColor),
borderRadius: BorderRadius.circular(duSetWidth(15)),
),
child: Text(
'+ 書(shū)架',
style: TextStyle(
color: _isSubColor,
),
),
),
onTap: () {
if (_isSub)
print('dasd');
else
print('dsada');
},
);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: duSetWidth(60),
height: duSetWidth(80),
child: ClipRRect(
borderRadius: BorderRadius.circular(duSetWidth(5)),
child: Image.network(
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20170307%2F20170307164725_114ea3c04f605e59bd10699f37870267_13.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623596389&t=946dba98698d8d67d773ea8f7af55f45',
fit: BoxFit.cover,
),
),
),
Container(
width: duSetWidth(155),
height: duSetWidth(80),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: duSetWidth(25),
alignment: Alignment.centerLeft,
width: double.infinity,
child: Text(
'這是標(biāo)題',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontSize: duSetFontSize(16),
),
),
),
Container(
height: duSetWidth(20),
alignment: Alignment.centerLeft,
width: double.infinity,
child: Text(
'這是副標(biāo)題',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Color.fromRGBO(162, 168, 186, 1),
fontSize: duSetFontSize(14),
),
),
),
],
),
),
Container(
width: duSetWidth(100),
height: duSetWidth(80),
padding: EdgeInsets.only(
top: duSetWidth(4),
),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isSubWidget,
InkWell(
onTap: () async {
await lucencyController.forward();
setState(() {
isChange = true;
sizeController.forward();
});
},
child: Container(
alignment: Alignment.center,
width: duSetWidth(35),
height: duSetWidth(28),
decoration: BoxDecoration(
border: Border.all(
color: Color.fromRGBO(113, 118, 140, 1),
),
borderRadius: BorderRadius.circular(duSetWidth(15)),
),
child: Icon(
Icons.delete,
color: Color.fromRGBO(113, 118, 140, 1),
size: duSetFontSize(16),
),
),
),
],
),
)
],
);
}
}
dusetwidth是我自定義的函數(shù)可以不用管，自己替換
下列是在頁(yè)面使用
class HistoryPage extends StatefulWidget {
@override
_HistoryPageState createState() => _HistoryPageState();
}
class _HistoryPageState extends State<HistoryPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView(
children: [
AnimationListItem(),
AnimationListItem(),
AnimationListItem(),
AnimationListItem(),
],
),
);
}
/// 構(gòu)造appbar
Widget buildAppabr() {
return AppBar(
backgroundColor: Color.fromRGBO(33, 39, 46, 1),
brightness: Brightness.dark,
centerTitle: true,
title: Text(
'瀏覽記錄',
style: TextStyle(
fontSize: duSetFontSize(16),
color: Colors.white,
),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: duSetFontSize(18),
),
onPressed: () {
Get.back();
},
),
);
}
}
這個(gè)我原來(lái)是準(zhǔn)備使用animatedList來(lái)進(jìn)行實(shí)現(xiàn)的，最后發(fā)現(xiàn)，animatedList里面只能設(shè)置移除動(dòng)畫(huà)，不能實(shí)現(xiàn)補(bǔ)位動(dòng)畫(huà)
第一個(gè)透明度的動(dòng)畫(huà)就是移除動(dòng)畫(huà)，第二個(gè)size變化就是補(bǔ)位動(dòng)畫(huà)，
animatedList沒(méi)有補(bǔ)位，所以下方list直接移動(dòng)上去會(huì)顯得非常突兀，我看了看源碼，修改較為麻煩。所以就直接用動(dòng)畫(huà)變換來(lái)寫(xiě)
這個(gè)List內(nèi)的內(nèi)容，并不是直接移除，而是替換成高低為0 的一個(gè)盒子
如果有animatedList簡(jiǎn)單的改造實(shí)現(xiàn)的補(bǔ)位動(dòng)畫(huà)，希望留言給我地址，非常感謝
到此這篇關(guān)于flutter實(shí)現(xiàn)帶刪除動(dòng)畫(huà)的listview功能的文章就介紹到這了,更多相關(guān)flutter listview刪除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android style的繼承方式 點(diǎn)（.）和parent詳解及實(shí)例
這篇文章主要介紹了Android style的繼承方式 點(diǎn)（.）和parent詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
Android編程經(jīng)典代碼集錦(復(fù)制,粘貼,瀏覽器調(diào)用,Toast顯示,自定義Dialog等)
這篇文章主要介紹了Android編程經(jīng)典代碼集錦,包括Android的復(fù)制,粘貼,瀏覽器調(diào)用,Toast顯示,自定義Dialog等實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-01-01
Android APP之WebView校驗(yàn)SSL證書(shū)的方法
這篇文章主要介紹了Android APP之WebView校驗(yàn)SSL證書(shū)的方法,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Android接入支付寶和微信支付的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Android編程單元測(cè)試實(shí)例詳解(附源碼)
這篇文章主要介紹了Android編程單元測(cè)試,結(jié)合完整實(shí)例形式詳細(xì)分析了Android單元測(cè)試的具體步驟與相關(guān)技巧,并附帶完整實(shí)例代碼供讀者下載參考,需要的朋友可以參考下2015-11-11
GuideView的封裝實(shí)現(xiàn)app功能引導(dǎo)頁(yè)
這篇文章主要為大家詳細(xì)介紹了GuideView的封裝實(shí)現(xiàn)app功能引導(dǎo)頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
詳解Android中的ActivityThread和APP啟動(dòng)過(guò)程
ActivityThread就是我們常說(shuō)的主線程或UI線程，ActivityThread的main方法是整個(gè)APP的入口，本篇深入學(xué)習(xí)下ActivityThread，順便了解下APP和Activity的啟動(dòng)過(guò)程。2021-06-06
Android實(shí)現(xiàn)ViewPage輪播圖效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)ViewPage輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
手把手教你實(shí)現(xiàn)Android編譯期注解
今天給大家介紹Android編譯期注解sdk的步驟以及注意事項(xiàng)，并簡(jiǎn)要分析了運(yùn)行時(shí)注解以及字節(jié)碼技術(shù)在生成代碼上與編譯期注解的不同與優(yōu)劣，感興趣的朋友一起看看吧2021-07-07
android實(shí)現(xiàn)添加耳機(jī)狀態(tài)圖標(biāo)的方法
這篇文章主要介紹了android實(shí)現(xiàn)添加耳機(jī)狀態(tài)圖標(biāo)的方法,較為詳細(xì)的分析了Android實(shí)現(xiàn)添加耳機(jī)圖標(biāo)的原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10