Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of Android how to achieve the dynamic effect of list elements, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value, I believe you will have something to gain after reading this Android article on how to achieve the dynamic effects of list elements, let's take a look.

Preface

List is the most frequently used component in mobile applications, and we often add or delete list elements. the easiest way is to update the list interface directly after the list data is changed. One drawback of this approach is that list elements suddenly disappear (delete) or appear (add). When the contents of list elements are close, we have no way to know whether the operation is successful or not. If you can have dynamic effects to show the process of disappearing and appearing, then the experience will be much better, such as the following effect, when you delete an element, there will be an animation that gradually disappears, while when you add an element, there will be a gradual effect.

AnimatedList.gif

AnimatedList is used here, and the sample code for this article is mainly from the official document: the AnimatedList component. It should be noted that, after all, the list is animated, which will definitely have an impact on performance. It is recommended to use only a small amount of data that needs to be deleted or added to the list.

AnimatedList introduction

AnimatedList is an alternative to ListView, and the constructor is basically the same as 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,})

The difference is that the definition of itemBuilder is different. Compared with ListView, itemBuilder has one more animation parameter:

Typedef AnimatedListItemBuilder = Widget Function (BuildContext context, int index, Animation animation)

Animation is an Animation object, so you can use animation to build transition animation of elements. For example, our example here uses FadeTransition to build list elements to have a gradual effect.

Class ListItem extends StatelessWidget {const ListItem ({Key? Key, required this.onRemove, required this.animation, required this.item,}): super (key: key); final Animation animation; final ValueChanged onRemove; final int item @ override Widget build (BuildContext context) {return Padding (padding: const EdgeInsets.all), 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),),]),);}} element insertion and deletion

When using AnimatedList, we need to call the insertItem and removeItem methods of AnimatedListState to operate, rather than refresh the interface directly after manipulating the data. That is, when inserting and deleting data, you should modify the list data first, and then call the insertItem or removeItem method of AnimatedListState to refresh the list interface. For example, the code to delete an element:

E removeAt (int index) {final E removedItem = _ items.removeAt (index); if (removedItem! = null) {_ animatedListlist.removeItem (index, (BuildContext context, Animation animation) {return removedItemBuilder (removedItem, context, animation);},);} return removedItem;}

Here removedItem takes two parameters, one is to remove the subscript of the element, and the other is to build a method to remove the element, builder. The reason for this method is that the element is actually removed from the list immediately, and in order to see the removed element during the animation transition time, you need to build a removed element in this way to feel that it is animated deleted. You can also use the animation parameter to customize the animation here. The insertItem method has no builder parameter, and it passes the newly inserted element directly to the AnimatedList's builder method to insert the new element, which keeps the dynamic effect consistent with the new element in the list.

Use GlobalKey to get AnimatedListState

Because all the control of AnimatedList is done in AnimatedState, and the AnimatedState object cannot be obtained directly, you need to use GlobalKey to get the AnimatedListState object. Pass a GlobalKey to the key attribute when you build the AnimatedList. You can then get the AnimatedListState object through currentState.

Class _ AnimatedListSampleState extends State {final GlobalKey _ listKey = GlobalKey (); late ListModel _ list; late int _ nextItem; @ override void initState () {super.initState (); _ list = ListModel (listKey: _ listKey, initialItems: [0,1,2], removedItemBuilder: _ buildRemovedItem,); _ nextItem = 3 } Widget _ buildRemovedItem (int item, BuildContext context, Animation 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: [IconButton (icon: const Icon (Icons.add), onPressed: _ insert, tooltip:' add',),]) Body: Padding (padding: const EdgeInsets.all), child: AnimatedList (key: _ listKey, initialItemCount: _ list.length, itemBuilder: (context, index, animation) {return FadeTransition (opacity: animation, child: ListItem (onRemove: _ remove, animation: animation Item: _ list [index],),) This is the end of the article on "how Android achieves the dynamic effects of list elements". Thank you for your reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve the dynamic effect of list elements in Android". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.