flutter AnimatedPositioned
Positioned 的动画版。
只有是 Stack 的 child 时才能工作。
如果 child 的 size 在动画过程会改变,则 AnimatedPositioned 是很好的选择
double indicatorWidth = (width * 2 / 3).ceilToDouble();
double indicatorHeight = 2;
double indicatorTopMargin = height - indicatorHeight*2;
double left = (currentIndex * width + indicatorWidth / 4).ceilToDouble();
Widget _indicator() {
return AnimatedPositioned(
left: left,
child: Container(
height: indicatorHeight,
width: indicatorWidth,
margin: EdgeInsets.only(top: indicatorTopMargin),
color: kGridTextColor,
),
duration: Duration(milliseconds: 200),
);
flutter AnimatedPositioned的更多相关文章
- 《Flutter 动画系列一》25种动画组件超全总结
动画运行的原理 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称&q ...
- 【Flutter 实战】一文学会20多个动画组件
老孟导读:此篇文章是 Flutter 动画系列文章第三篇,后续还有动画序列.过度动画.转场动画.自定义动画等. Flutter 系统提供了20多个动画组件,只要你把前面[动画核心](文末有链接)的文章 ...
- 【Flutter Widgets大全】电子书开源
[Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...
- Flutter 中的动画
Flutter 中动画的创建有很多种, 需要根据具体的需求选择不同的动画.如果只是简单的布局等的动画直接使用最简单的隐式动画就可以了,因为隐式动画是由框架控制的,所以仅仅只需要更改变需要变化属性就可以 ...
- Flutter 初尝:从 Java 无缝过渡
准备阶段 下载 Flutter SDK 新建 Flutter 文件夹,克隆 Flutter SDK: git clone -b beta https://github.com/flutter/flut ...
- 编写第一个Flutter App(翻译)
博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...
- 【译】Java、Kotlin、RN、Flutter 开发出来的 App 大小,你了解过吗?
现在开发 App 的方式非常多,原生.ReactNative.Flutter 都是不错的选择.那你有没有关注过,使用不同的方式,编译生成的 Apk ,大小是否会有什么影响呢?本文就以一个最简单的 He ...
- 我花了 8 小时,"掌握"了一下 Flutter | Flutter 中文站上线
Hi,大家好,我是承香墨影! 距离 Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本,Flutter 是 Google 用以帮助开发者在 Android 和 iOS ...
- flutter初体验
flutter初体验 和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词 ...
随机推荐
- Win10系统Edge浏览器怎么截取网页长图?
有时我们在工作演示时会需要截取网页上的图片,不过简单的截图可以,但如果需要截取超过屏幕大小的整个网页,你是不是就有些束手无策了.虽然拼接图片也是种方法,但毕竟还是不方便,下面好系统重装助手就教你在Wi ...
- c++实现单向链表的一些操作
#include<iostream> #include <algorithm> #include <vector> #include <set> #in ...
- RocketMQ原理分析 文章 精选【收集】
一. 推荐文章 1.以下来自OSChina的 mingxungu https://itzones.cn/ RocketMQ运维监控 RocketMQ刷盘策略 RocketMQ消息重试 RocketMQ ...
- [JLOI2009]神秘的生物——轮廓线DP
原题链接 题目大意 \(n\times n\)的带权方阵,选一个权值最大的连通块 Solution 一眼连通性DP,然后就没了 转移很好想的啦,简单讨论一下就行了 有一个坑点,就是不能一个格子都不选, ...
- 我对line-height及vertical-align的一点理解
张鑫旭老师在文章<我对CSS vertical-align的一些理解与认识(一)>中提到: vertical-align:middle属性的表现与否,仅仅与其父标签有关,至于我们通常看到的 ...
- 关于单片机特殊功能寄存器(SFR)和内存(RAM)公用地址:80-FF 如何区分
RAM 的 80-FF 需要间接寻址进行访问 如: MOV R0,#80H; MOV A,@R0 ; (内存 80H地址内的数据放到A中) SFR的80-FF需要直接寻址进行访问如: MOV ...
- TabSheet源码
TabSheet.h #if !defined(AFX_TABSHEET_H__42EE262D_D15F_46D5_8F26_28FD049E99F4__INCLUDED_) #define AFX ...
- 012_linuxC++之_类的继承定义
(一)访问控制和继承 公有继承(public):当一个类派生自公有基类时,基类的公有成员也是派生类的公有成员,基类的保护成员也是派生类的保护成员,基类的私有成员不能直接被派生类访问,但是可以通过调用基 ...
- learning docker steps(9) ----- arm linux docker 安装
参考:https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce-1 想要在arm linux上安装docker ...
- Ubuntu16.04下安装多版本cuda和cudnn
Ubuntu16.04下安装多版本cuda和cudnn 原文 https://blog.csdn.net/tunhuzhuang1836/article/details/79545625 前言 因为之 ...