AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding

import 'package:flutter/material.dart';

class AuthList extends StatefulWidget {
@override
_AuthListState createState() => _AuthListState();
} class _AuthListState extends State<AuthList> {
// 方法和变量需要定义override之前
double paddingVal = 20;
_changePadding() {
setState(() {
paddingVal = paddingVal == 20.0 ? 100.0 : 20.0;
});
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('代码测试'),
centerTitle: true,
),
body: Column(
children: <Widget>[
AnimatedPadding(
padding: EdgeInsets.all(paddingVal),
duration: Duration(microseconds: 3000),
curve: Curves.easeInOut, // 弧线
child: Container(
color: paddingVal == 20.0 ? Colors.redAccent: Colors.blue,
height: 200.0,
),
),
RaisedButton(
color: Colors.blue,
child: Text(
'Toggle padding',
style: TextStyle(color: Colors.white),
),
onPressed: _changePadding,
)
],
),
);
}
}

Flutter 容器(3) - AnimatedPadding的更多相关文章

  1. Flutter 容器Container类和布局Layout类

    1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组 ...

  2. Flutter 容器(7) - DecoratedBox

    DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dar ...

  3. Flutter 容器 (1) - Center

    Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...

  4. flutter 容器

    Flutter 有着丰富的布局控件库 . Flutter 中的布局整体分为 Single-child layout widget (单子布局部件) Multi-child layout widget ...

  5. Flutter 容器(8) - SizedOverflowBox | OverflowBox

    SizedOverflowBox: 子组件在超出SizedOverflowBox指定的宽高时,不会隐藏,依然进行绘制 OverflowBox: 限制子组件的宽高. import 'package:fl ...

  6. Flutter 容器(6) - FractionallySizedBox

    FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...

  7. Flutter 容器(5) - SizedBox

    SizedBox: 两种用法:一是可用来设置两个widget之间的间距,二是可以用来限制子组件的大小. import 'package:flutter/material.dart'; class Au ...

  8. Flutter 容器(4) - Container

    Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWid ...

  9. Flutter 容器 (2) - Padding

    Padding: 内边距Widget,与CSS中的padding相似. import 'package:flutter/material.dart'; class AuthList extends S ...

随机推荐

  1. clang-format的介绍和使用

    目录 参考信息 介绍 安装 命令格式 基本使用 使用.clang-format来实现自定义格式化 导出.clang-format文件 使用.clang-format文件 .clang-format配置 ...

  2. SpringMVC集成Mybatis

    1.pom.xml中添加引入架包 <dependency> <groupId>mysql</groupId> <artifactId>mysql-con ...

  3. win7下建立docker共享文件夹

    前言 建立本机(win7)和VirtualBox中docker虚拟机的共享文件夹,注:下面的命令都是以root身份运行的,使用sudo -i切换到root身份,如无法切换,请自行在命令前加上sudo命 ...

  4. 利用宝塔和rainloop搭建咱的邮箱

    需要咱准备的东东:一枚域名.服务器需根据情况开放25.110.143.465.993端口.宝塔邮局管理器.rainloop.LNMP或者LAMP. 搭建步骤: 1.安装宝塔邮局管理器: 2.设置宝塔邮 ...

  5. IOS上传图片方向问题

    在显示上传完毕的图片的时候遇到了一个问题, 图片莫名其妙被逆时针旋转了90度就很离谱 如下图 经过一番查询, 原来是 IOS 的相机拍照的时候会把方向角写入到图片里面 因为我用的是 element 的 ...

  6. web自动化 -- 浏览器窗口切换

    切换浏览器窗口 示例: from time import sleep from selenium import webdriver from selenium.webdriver.support.wa ...

  7. 面试题四十三:在1~n整数中1出现的次数

    方法一:直观来看,遍历1到n,每个数去做%10的循环判断 int Number1_B_1toN( int n){ int sum=0; for(int i=1;i<=n;i++){ int k= ...

  8. 前端学习(十六):JavaScript运算

    进击のpython ***** 前端学习--JavaScript运算 在这一节之前,应该做到的是对上一节的数据类型的相关方法都敲一遍,加深印象 这部分的知识的特点就是碎而且杂,所以一定要多练~练习起来 ...

  9. python爬虫获取localStorage中的数据(获取token)

    # 此为获取东航登录时的token(经分析js得出此token存储于localstorage中) browser = webdriver.Chrome(executable_path='xxxx')b ...

  10. three.js 制作魔方

    因为之前的几节讲了一些数学方法,例如Vector3.Matrix4.Euler还有Quaternion的知识.所以这篇郭先生就来说说用three.js怎么制作一个魔方.在线案例请点击博客原文 制作魔方 ...