Flutter具有动画效果的列表实现

使用AnimateList实现动画效果的列表

AnimatedList(
  key: _listKey,
  initialItemCount: _items.length,
  itemBuilder: (context, index, animation) {
    return _buildItem(_items[index], animation);
  },
))

在_buildItem中可以指定使用哪种动态效果,这里使用SlideTransition结合CurvedAnimation实现一个滑入滑出的效果。

  Widget _buildItem(String item, Animation<double> animation) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset(1.0, 0.0), // 从右侧滑入
        end: Offset.zero, // 最终位置
      ).animate(CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut,
      )),
      child: Card(
        margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        child: ListTile(
          title: Text(item),
          trailing: IconButton(
            icon: Icon(Icons.delete),
            onPressed: () => _removeItem(_items.indexOf(item)),
          ),
        ),
      ),
    );
  }


评论列表
0/1000
共 0 评论