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),
      ),
    );
  }
}


相关推荐
传奇开心果编程7 小时前
【Jetpack Compose娓娓道来】第29课:状态容器与UI事件建模——把“散装状态”变成“可穷举的契约”
android·kotlin·移动开发·android jetpack·ui框架·开发范式·声明式ui
五彩小白8 小时前
喵呜打卡项目总结
android·团队开发
古法安卓9 小时前
Android-GPU压测工具
android·java·android studio
xcLeigh11 小时前
KingbaseES数据库教程:初识数据库,从安装到跑通第一条SQL
android·数据库·sql·安装·数据库教程·kes
TimeFine14 小时前
AI 编码工作流的设计(二)
android·ai编程
2401_8818283214 小时前
MySQL操作命令
android·mysql·adb
用户607097591490616 小时前
AOSP 14 OTA 升级指导(三):三条升级链路——Java API、自研 HAL 与 TR069
android
前端小D17 小时前
React Native Android 项目搭建
android·react native·react.js
恋猫de小郭17 小时前
感人,Flutter 居然有了一个超实用提案,期待落地
android·前端·flutter
CS_Zero18 小时前
安卓开发:Linux的android工具命令
android·linux·运维