Android實現(xiàn)列表元素動態(tài)效果
前言
列表是移動應用中用得最多的組件了,我們也會經(jīng)常對列表元素進行增加或刪除操作,最簡單的方法是列表數(shù)據(jù)變動后,直接 setState
更新列表界面。這種方式存在一個缺陷就是列表元素會突然消失(刪除)或出現(xiàn)(添加),當列表元素內(nèi)容接近時,我們都沒法知道操作是否成功了。而如果能夠有動效展示這個消失和出現(xiàn)的過程,那么體驗就會好很多,比如下面的這種效果,刪除元素的時候,會有個逐漸消失的動畫,而添加元素的時候會有漸現(xiàn)效果。
AnimatedList.gif
這里使用到的就是 AnimatedList
,本篇文章的示例代碼主要來自官方文檔:AnimatedList 組件。需要注意的是,畢竟列表帶了動畫效果,對性能肯定會有影響,建議只對需要對元素進行刪除、增加操作的小數(shù)據(jù)量的列表使用。
AnimatedList 介紹
AnimatedList
是 ListView
的替代,構(gòu)造函數(shù)基本上和 ListView
一致。
const?AnimatedList({ ??Key??key, ??required?this.itemBuilder, ??this.initialItemCount?=?0, ??this.scrollDirection?=?Axis.vertical, ??this.reverse?=?false, ??this.controller, ??this.primary, ??this.physics, ??this.shrinkWrap?=?false, ??this.padding, ??this.clipBehavior?=?Clip.hardEdge, })
不同的地方在于 itemBuilder
的定義不同,itemBuilder
與 ListView
相比,多了一個 animation
參數(shù):
typedef?AnimatedListItemBuilder?=?Widget?Function( ??BuildContext?context,? ??int?index,? ??Animation<double>?animation );
animation
是一個 Animation<double>
對象,因此可以使用 animation
來構(gòu)建元素的過渡動畫。比如我們這里的示例就使用了 FadeTransition
來構(gòu)建列表元素,從而有漸現(xiàn)效果。
class?ListItem?extends?StatelessWidget?{ ??const?ListItem({ ????Key??key, ????required?this.onRemove, ????required?this.animation, ????required?this.item, ??})?:?super(key:?key); ??final?Animation<double>?animation; ??final?ValueChanged?onRemove; ??final?int?item; ??@override ??Widget?build(BuildContext?context)?{ ????return?Padding( ??????padding:?const?EdgeInsets.all(2.0), ??????child:?FadeTransition( ????????opacity:?animation, ????????child:?Container( ??????????child:?Row(children:?[ ????????????Expanded( ??????????????child:?Text( ????????????????'Item?$item', ????????????????style:?TextStyle( ??????????????????color:?Colors.blue, ????????????????), ??????????????), ????????????), ????????????IconButton( ??????????????onPressed:?()?{ ????????????????onRemove(this.item); ??????????????}, ??????????????icon:?Icon(Icons.delete_forever_rounded,?color:?Colors.grey), ????????????), ??????????]), ????????), ??????), ????); ??} }
元素的插入和刪除
使用 AnimatedList
時,我們需要調(diào)用 AnimatedListState
的insertItem
和 removeItem
方法來操作,而不能直接操作完數(shù)據(jù)后刷新界面。也就是在插入和刪除數(shù)據(jù)的時候,應該是先修改列表數(shù)據(jù),然后再調(diào)用AnimatedListState
的 insertItem
或 removeItem
方法來刷新列表界面。例如刪除元素的代碼:
E?removeAt(int?index)?{ ??final?E?removedItem?=?_items.removeAt(index); ??if?(removedItem?!=?null)?{ ????_animatedList!.removeItem( ??????index, ??????(BuildContext?context,?Animation<double>?animation)?{ ????????return?removedItemBuilder(removedItem,?context,?animation); ??????}, ????); ??} ??return?removedItem; }
這里 removedItem
接收兩個參數(shù),一個是要移除元素的下標,另一個是一個構(gòu)建移除元素的方法 builder
。之所以要這個方法是因為元素實際從列表馬上移除的,為了在動畫過渡時間內(nèi)還能夠看到被移除的元素,需要通過這種方式來構(gòu)建一個被移除的元素來感覺是動畫刪除的。這里也可以使用 animation
參數(shù)自定義動畫效果。insertItem
方法沒有 builder
參數(shù),它直接將新插入的元素傳給 AnimatedList
的 builder
方法來插入新的元素,這樣能夠保持和列表新增元素的動效一致。
使用 GlobalKey 獲取 AnimatedListState
由于 AnimatedList
的所有控制都是在 AnimatedState
中進行的,而 AnimatedState
對象沒法直接獲取得到,因此需要使用 GlobalKey
來獲取 AnimatedListState
對象。在構(gòu)建 AnimatedList
的時候給 key
屬性傳入一個 GlobalKey
,。然后就可以通過 currentState
獲取到 AnimatedListState
對象了。
class?_AnimatedListSampleState?extends?State<AnimatedListSample>?{ ??final?GlobalKey<AnimatedListState>?_listKey?=?GlobalKey<AnimatedListState>(); ??late?ListModel<int>?_list; ??late?int?_nextItem; ??@override ??void?initState()?{ ????super.initState(); ????_list?=?ListModel<int>( ??????listKey:?_listKey, ??????initialItems:?<int>[0,?1,?2], ??????removedItemBuilder:?_buildRemovedItem, ????); ????_nextItem?=?3; ??} ??Widget?_buildRemovedItem( ??????int?item,?BuildContext?context,?Animation<double>?animation)?{ ????return?ListItem( ??????animation:?animation, ??????item:?item, ??????onRemove:?_remove, ????); ??} ??//?Insert?the?"next?item"?into?the?list?model. ??void?_insert()?{ ????final?int?index?=?_list.length; ????_list.insert(index,?_nextItem++); ??} ??//?Remove?the?selected?item?from?the?list?model. ??void?_remove(item)?{ ????if?(item?!=?null)?{ ??????_list.removeAt(_list.indexOf(item!)); ????} ??} ??@override ??Widget?build(BuildContext?context)?{ ????return?Scaffold( ??????appBar:?AppBar( ????????title:?const?Text('AnimatedList'), ????????actions:?<Widget>[ ??????????IconButton( ????????????icon:?const?Icon(Icons.add), ????????????onPressed:?_insert, ????????????tooltip:?'添加', ??????????), ????????], ??????), ??????body:?Padding( ????????padding:?const?EdgeInsets.all(16.0), ????????child:?AnimatedList( ??????????key:?_listKey, ??????????initialItemCount:?_list.length, ??????????itemBuilder:?(context,?index,?animation)?{ ????????????return?FadeTransition( ??????????????opacity:?animation, ??????????????child:?ListItem( ????????????????onRemove:?_remove, ????????????????animation:?animation, ????????????????item:?_list[index], ??????????????), ????????????); ??????????}, ????????), ??????), ????); ??} }
總結(jié)
本篇介紹了 AnimatedList
的使用,對于我們的一些數(shù)據(jù)量少、又有插入或刪除元素操作的列表,可以考慮使用 AnimatedList
來提升用戶體驗。
到此這篇關(guān)于Android實現(xiàn)列表元素動態(tài)效果的文章就介紹到這了,更多相關(guān)Android列表動態(tài)效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Flutter檢查連接網(wǎng)絡(luò)connectivity_plus實現(xiàn)步驟
這篇文章主要為大家介紹了Flutter檢查連接網(wǎng)絡(luò)connectivity_plus實現(xiàn)步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06Android中使用 AutoCompleteTextView 實現(xiàn)手機號格式化附帶清空歷史的操作
有個小伙伴遇到了這樣一個問題,就是AutoCompleteTextView實現(xiàn)自動填充的功能。同時要具備手機格式化的功能。接下來通過本文給大家分享使用 AutoCompleteTextView 實現(xiàn)手機號格式化附帶清空歷史的操作方法,需要的朋友參考下2017-03-03Android編程入門之HelloWorld項目目錄結(jié)構(gòu)分析
這篇文章主要介紹了Android編程入門之HelloWorld項目目錄結(jié)構(gòu)分析,較為詳細的分析了Android項目的目錄結(jié)構(gòu)與具體作用,需要的朋友可以參考下2015-12-12