Flutter:AnimatedPadding动态修改padding

html 复制代码
// 默认top为10,点击后修改为100,此时方块会向下移动
padding: EdgeInsets.fromLTRB(left, top, right, bottom),
js 复制代码
class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: AnimatedPadding(
        curve: Curves.easeIn, // 动画属性
        duration: Duration(milliseconds: 500),
        // 默认
        padding: EdgeInsets.fromLTRB(10, flag ?10 : 100, 0, 0),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          flag = !flag;
          setState(() {});
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}


相关推荐
浮江雾1 分钟前
Flutter第十节-----Flutter布局与组件全解析
android·开发语言·前端·学习·flutter·入门
浮江雾2 分钟前
Flutter第12节-----Flutter中Dio插件网络请求全解析
flutter
Jomurphys30 分钟前
Compose 适配 - 自适应布局(窗口大小类 WindowSizeClasses、列表详情、辅助窗格)
android·compose
末代iOS程序员华仔1 小时前
Cursor + GitOps:自动化运维新姿势
flutter·ios·swift
plainGeekDev1 小时前
synchronized → Coroutines
android·java·kotlin
世人万千丶2 小时前
鸿蒙Flutter Flex嵌套布局技巧
学习·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
sun0077002 小时前
gtest 行覆盖率、函数覆盖率、分支覆盖率 . 一般这3个要达到多少?算达标
android
施棠海2 小时前
设计稿一键变成可运行的Android页面:Pixel2XML全流程UI开发框架实战(附完整源码)
android·ui·架构
Jomurphys2 小时前
Compose 适配 - 分辨率(密度)
android·compose
__Witheart__2 小时前
获取产品对应文件夹
android