Flutter: AnimatedList 一个滚动容器,可在插入或移除项目时为其设置动画
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
Tween<Offset> myTween = Tween<Offset>(
begin: Offset(1, 0),
end: Offset(0, 0),
);
var _data = <String>[];
final _myListKey = GlobalKey<AnimatedListState>();
Widget myListItem(String d, animation) {
return SlideTransition(
position: animation.drive(myTween),
child: myItem(d),
);
}
Widget myItem(String d) {
return ListTile(
title: Text(
'${d}',
style: TextStyle(fontSize: 40),
),
trailing: IconButton(
onPressed: () {
var index = _data.indexOf(d);
_data.remove(d);
_myListKey.currentState.removeItem(
index, (context, animation) => myListItem(d, animation));
},
icon: Icon(Icons.delete_forever),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
String newv = Random().nextInt(1000).toString();
_data.add(newv);
var index = _data.lastIndexOf(newv);
_myListKey.currentState.insertItem(index);
},
child: Icon(Icons.add),
),
body: AnimatedList(
key: _myListKey,
initialItemCount: _data.length,
itemBuilder: (context, int index, Animation<double> animation) {
return myListItem(_data[index], animation);
},
),
);
}
}
Flutter: AnimatedList 一个滚动容器,可在插入或移除项目时为其设置动画的更多相关文章
- Laya的滚动容器
想实现一个简单的滚动容器.例如水平排列10个图标,可以左右滑动查看的. Egret里有布局容器可以滚动 Laya看了教程和示例,没有找到一个滚动容器,只有一个list,需要设置item,显然不是我想要 ...
- sql 根据指定条件获取一个字段批量获取数据插入另外一张表字段中+MD5加密
/****** Object: StoredProcedure [dbo].[getSplitValue] Script Date: 03/13/2014 13:58:12 ******/ SET A ...
- 集群: 如何在spring 任务中 获得集群中的一个web 容器的端口号?
系统是两台机器, 跑四个 web 容器, 每台机器两个容器 . nginx+memcached+quartz集群,web容器为 tomcat . web 应用中 用到spring 跑多个任务,任务只能 ...
- servlet的一个web容器中有且只有一个servlet实例或有多个实例的理解1
servlet的一个web容器中有且只有一个servlet实例或有多个实例的理解 (2013-06-19 19:30:40) 转载▼ servlet的非线程安全,action的线程安全 对提交 ...
- c - 向一个排序好的数组插入一个数,插入后数组依然是排序好的
概述 因为这里只是演示插入1个数,这里我不用malloc再重新分配,而是将原先数组的腾出一个占位符. 完整代码如下: #include <stdio.h> #define LEN 6 // ...
- 【中英对照】【EntLib6】【Unity】实验1:使用一个Unity容器
Lab 1: Using a Unity Container 实验1:使用一个Unity容器 Estimated time to complete this lab: 15 minutes 估计完成时 ...
- 如何设计一个web容器
开发一个web容器涉及很多不同方面不同层面的技术,例如通信层的知识,程序语言层面的知识等等,且一个可用的web容器是一个比较庞大的系统,要说清楚需要很长的篇幅,本文旨在介绍如何设计一个web容器,只探 ...
- 对于Servlet、Servlet容器以及一个Servlet容器-Tomcat
Servlet.Servlet容器等内容讲解 转载自http://blog.csdn.net/iAm333 对于Servlet.Servlet容器以及一个Servlet容器-Tomcat这些概念讲解的 ...
- jQuery生成一个DIV容器,ID是"rating".
我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做 ...
随机推荐
- jasper使用table组件设计复杂的表头
1.1 设计报表模板 1.1.1 新建模板DemoReport5.jrxml,去掉不需要的Band,保留Title,Page Header,Detail 1 , PageFooter.将组件Table ...
- Spring Boot构建 RESTful 风格应用
Spring Boot构建 RESTful 风格应用 1.Spring Boot构建 RESTful 风格应用 1.1 实战 1.1.1 创建工程 1.1.2 构建实体类 1.1.4 查询定制 1.1 ...
- Django(中间件)
中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到 ...
- (Linux环境Kafka集群安装配置及常用命令
Linux环境Kafka集群安装配置及常用命令 Kafka 消息队列内部实现原理 Kafka架构 一.下载Kafka安装包 二.Kafka安装包的解压 三.设置环境变量 四.配置kafka文件 4.1 ...
- (转)pip和easy_install使用方式
easy_install 跟 pip 都是 Python 的套件管理程式,有了它們,在使用 Python 開發程式的時候會帶來不少方便. easy_install 和 pip 有什麼不一樣?據 pip ...
- 当前日期减去TIMESTAMP(6)日期
select trunc(sysdate- to_date(to_char(j.create_date,'yyyy-mm-dd'),'yyyy-mm-dd')) 相差天数 from sys_user ...
- 浅聊TCP的三次握手和四次挥手
三次握手: 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连 ...
- 小白搭建WAMP详细教程---mysql安装与设置
MySQL分为安装版和解压版.为了以后MySQL出问题想重装时会出现各种不必要的麻烦,我们这里选择解压版MySQL.详细步骤如下: 一:Mysql官网下载Mysql解压版 到官网下载,网址为:http ...
- 答疑解惑之ExecutorService——shutdown方法和awaitTermination方法使用
ExecutorService的关闭 shutdown和awaitTermination为接口ExecutorService定义的两个方法,一般情况配合使用来关闭线程池. shutdownnow和它的 ...
- Centos8上搭建EMQ MQTT
layout: post title: Centos8上搭建EMQ MQTT subtitle: 在阿里云Centos8搭建EMQ并配置接入 date: 2020-3-11 author: Dapen ...