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


相关推荐
松叶似针5 小时前
Flutter三方库适配OpenHarmony【secure_application】— 五平台隐私保护机制横向对比
flutter·harmonyos
空白诗5 小时前
基础入门 Flutter for OpenHarmony:Opacity 透明度组件详解
flutter
lili-felicity5 小时前
进阶实战 Flutter for OpenHarmony:animations 第三方库实战 - 流畅过渡动画系统
flutter
lili-felicity5 小时前
进阶实战 Flutter for OpenHarmony:geolocator 第三方库实战 - GPS定位与位置服务系统
flutter
九狼JIULANG5 小时前
基于Flutter+Riverpod+MVI 实现的跨平台「AI 提示词优化工具」
android·开源·github
山北雨夜漫步5 小时前
点评day03优惠卷秒杀-库存超卖,一人一单(单机模式)
android
zh_xuan6 小时前
React Native页面加载流程
android·react native
yuezhilangniao6 小时前
从Next.js到APK:Capacitor跨平台(安卓端)打包完全指南
android·开发语言·javascript
lili-felicity6 小时前
进阶实战 Flutter for OpenHarmony:webview_flutter 第三方库实战 - 智能内嵌浏览器系统
flutter
WoodyPhang6 小时前
Android开机动画修改完全指南:从原理到实战
android