首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter -隐藏其中一个列子对象时对高度进行动画更改

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它使用Dart编程语言,可以同时在iOS和Android平台上构建高性能、美观的原生应用。

在Flutter中,隐藏一个列子对象时对高度进行动画更改可以通过使用动画库来实现。Flutter提供了丰富的动画库,其中包括Animation、Tween和AnimatedBuilder等类,可以帮助开发者实现各种动画效果。

具体实现步骤如下:

  1. 创建一个AnimationController对象,用于控制动画的执行。可以设置动画的持续时间、曲线等属性。
  2. 创建一个Animation对象,通过AnimationController的方法来生成。可以设置动画的起始值和结束值。
  3. 创建一个Tween对象,用于定义动画的插值范围。可以设置动画的起始值和结束值的类型。
  4. 使用AnimatedBuilder组件,将Animation对象和需要进行动画更改的部分进行绑定。在AnimatedBuilder的builder回调函数中,可以根据Animation对象的值来改变部分的高度。

示例代码如下:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  bool _isHidden = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animation = Tween<double>(begin: 100.0, end: 0.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggleHidden() {
    setState(() {
      _isHidden = !_isHidden;
      if (_isHidden) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Height'),
      ),
      body: Column(
        children: [
          AnimatedBuilder(
            animation: _animation,
            builder: (context, child) {
              return Container(
                height: _animation.value,
                color: Colors.blue,
              );
            },
          ),
          RaisedButton(
            onPressed: _toggleHidden,
            child: Text(_isHidden ? 'Show' : 'Hide'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyWidget(),
    );
  }
}

在上述示例中,我们创建了一个AnimationController对象来控制动画的执行,创建了一个Animation对象来定义动画的起始值和结束值,创建了一个Tween对象来定义动画的插值范围。然后使用AnimatedBuilder组件将Animation对象和需要进行动画更改的部分进行绑定,在builder回调函数中根据Animation对象的值来改变部分的高度。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

以上是关于Flutter中隐藏一个列子对象时对高度进行动画更改的完善且全面的答案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter进阶之实现动画效果(一)

上一篇文章我们了解了Flutter动画基础,这一篇文章我们就来实现一个图表的动画效果。...我们已经用setState划分了这个变化,以便Flutter可以进行内部管理,并调度控件树进行重建。...Flutter一个AnimationController的概念,用于编排动画,通过注册一个监听器,我们被告知当动画值(0.0~1.0)改变。...现在程序已经变得复杂性,我们的数据集仍然只是一个数字,设置动画控制所需的代码是一个小问题,因为当我们获得更多的图表数据,它不会被分解。...真正的问题是变量startHeight、currentHeight和endHeight,反映了对数据集和动画值所做的更改,并在三个不同的地方更新。 我们需要一个概念来处理这个混乱的情况。

1.2K41

​打开Flutter动画的另一种姿势——Flare

imageMogr2/auto-orient/strip) 3.通过 CustomPainter 结合 Canvas 来实现自定义的动画其中,第三点可实现的内容最为丰富,同时也最为复杂。...10帧) [1240] 在00:01:00处,更改矩形的属性: [1240] 点击播放键,效果如下: [strip] 目前,动画是线性运行的,我们圈中所有的时间节点,然后在右下角进行一个插值器的调节:...,把矩形属性设置为 tap 动画最后一帧的属性,同时记录下三个小球的高度属性,之后再做动画: [strip] 因为是loading,所以选择了循环动画,效果如下: [strip] [1240] 由于每次在资源区新增元素后...: [strip] 勾创建完成后,像之前一样,隐藏掉,需要使用时再显示,然后创建用来表示错误的叉 cross: [strip] 然后创建动画,只以success为例,效果如下: [strip] [1240...] 只需要注意,其中勾 路径动画 实现的要点在于图形以路径存在,而不是填充式存在 [1240] 接着是错误时的动画效果: [image] 然后再创建一个不动动画 normal 用于记录按钮的初始状态即可

2K30

Flutter 视图布局-前言

01 - 视图的布局方式 简单说一下我 Flutter 视图布局的看法,在前篇中我有提到 Flutter 是使用了 Dart 语言进行编写,所以弱化了视图编辑的部分,视图的渲染、结构、布局都通过代码逻辑来生成...CustomMultiChildLayout 使用一个委托来多个子元素进行设置大小和定位的小部件。 每一种 Widget 所实现的布局方式都不一样,都有一个主要的实现场景,以及对子元素的展示方式。...Align 一个 Widget,它可以将其子元素对齐,并可以根据子元素的大小自动调整大小。 Baseline 根据子项的基线它们的位置进行定位的 Widget。...Offstage 一个布局 Widget,可以控制其子元素的显示和隐藏。 ConstrainedBox 其子项施加附加约束的 Widget。...LimitedBox 一个当其自身不受约束才限制其大小的盒子。 OverflowBox 其子项施加不同约束的 Widget,它可能允许子项溢出父级。 SizedBox 一个特定大小的盒子。

2.2K110

Flutter 构建完整应用手册-动画

淡入淡出部件 作为UI开发人员,我们经常需要在屏幕上显示和隐藏元素。 但是,在屏幕上或屏幕外快速弹出元素会让最终用户感到不安。 相反,我们可以使用不透明动画淡入淡出元素,以创建流畅的体验。...为了达到这个目的,我们可以使用一个StatefulWidget。 StatefulWidget是创建State对象的类。 State对象拥有关于我们应用程序的一些数据,并提供了更新数据的方法。...当我们更新数据,我们也可以使用Flutter用这些更改重建我们的UI。 在我们的例子中,我们将有一块数据:一个布尔值,表示按钮是可见还是不可见。...在我们的情况下,如果该框可见,我们想隐藏它。 如果该框隐藏,我们想要显示它! 为了达到这个目的,我们会显示一个按钮。...当用户按下按钮,我们会将布尔值从true更改为false,或将false更改为true。 我们需要使用setState进行更改,这是State类中的一个方法。

1.3K20

Flutter | 动画

UI 系统动画进行了抽象,如 Android 中可以通过 xml 来描述一个动画并设置给 View,Flutter 中也动画进行了抽象,主要涉及 Animation,Curve,Controller...Flutter 中的动画基于 Animation 对象的,widget 可以在 build 函数中读取 Animation 对象的当前值,并且可以监听动画的状态改变 动画感知 我们可以通过 Animation...animation 参数,这是 Flutter 路由管理器提供的,在路由切换,每一帧都会被回调,因此我们可以通过 animation 对象来自定义过度动画 无论是 MaterialPageRoute...AnimatedSwitch AnimatedSwitch 可以同时其新,旧子元素添加显示,隐藏动画。也就是说在 AnimatedSwitch 的子元素发生变化时,会对其旧元素和新元素。...,答案是否定的,究其原因,就是因为 Animation 是对称的,所以只要打破这个规则就可以了,下面我们封装一个 MySlideTransition,他与 SlideTransition 唯一的不同就是动画的反向执行进行了定制

1.5K10

掌握Flutter底部导航栏:畅游导航之旅

StatefulWidget,其中包含一个BottomNavigationBar作为底部导航栏。...底部导航栏与状态管理 底部导航栏通常需要与应用程序的状态进行交互,例如根据用户的操作更新当前选中的导航项。Flutter提供了多种状态管理方法,其中包括使用Provider和Bloc进行状态管理。...7.3 实现底部导航栏的动画效果 为了提升用户体验,有时候我们还可以为底部导航栏添加一些动画效果,例如切换导航项的渐变动画、滑动导航栏的缩放动画等。...通过本文的介绍,我们如何使用Flutter构建底部导航栏有了全面的了解。...接着,我们讨论了如何自定义底部导航栏的外观,包括更改选中项的颜色和图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。

13310

View编程指南(三)

为了防止这种情况发生,当您隐藏,您应该强制您的view退出第一个响应者状态。 如果要为view的可视化转换为隐藏(或相反),您必须使用view的alpha属性进行动画处理。...隐藏的属性不是一个动画属性,所以你它做出的任何改变立即生效。...因此,应用旋转因子围绕其中心点旋转view。 缩放view会更改view的宽度和高度,但不会更改其center....应用程序经常手动布置root view的一个地方是在实现大的可滚动区域。由于其可滚动内容拥有一个大view是不切实际的,因此应用程序通常会实现一个root view,其中包含许多较小的view。...当触摸事件发生,window将相应的事件对象分派到发生触摸的view。如果你的view一个事件不感兴趣,它可以忽略它,或者把它传递给响应者链,由另一个对象处理。

1.7K30

Flutter&Flame游戏 - 拾玖】构件特效 | 了解 EffectController 体系

image.png ---- 如下是 EffectController 类的定义,首先它是一个抽象类,其中维护了一些动画相关的 get 属性,包括动画时长 duration 、进度 progress 、...以及四个应用控制动画的抽象方法: image.png ---- 它作为抽象类,是无法直接作为运行时对象被实例化的,必定有其实现类功能进行具体实现。...transform 方法,进度进行变换而已: image.png 而 Curves.ease 是一个静态的 Cubic 对象,它的 transform 方法,就是按照三次贝塞尔曲线方程,入参进行变换...也就是说,你可以通过 Cubic 对象,自定义任何的三次贝塞尔曲线,让速度按照该曲线进行其中四个入参分别代表三次贝塞尔曲线的两个控制点坐标,另外起始坐标为 (0,0) ,终止坐标为 (1,1) 。...总的来看,这一族非常简单,就是利用不同的函数进度数值进行转换而已,本身没有什么难点。通过这些控制器,就可以让动画不那么 “死板” ,可以让运动的速度产生变化,以及进行周期性的震荡。

42210

Flutter | 布局组件

children 参数,接收一个 Widget 数组,如 Row,Column,Stack 等 Flutter 中很多 widget 都是继承自 StatelessWidget 或者 StatefulWidget...Flutter 中弹性布局主要通过 Flex 和 Expanded 来配合实现 Flex 组件可以沿着水平或者垂直方向排列子组件,如果知道主轴方向,使用 Row 或者 Column 会更方便一些。...Flow 主要用于以下需要高度自定义布局或者性能要求较高(如动画中) 的场景, Flow 有如下优点 性能好:Flow 是一个队子组件尺寸以及位置调整非常高效的控件。...Flow 用转换矩阵对子组件进行位置调整的时候进行了优化:在 Flutter 定位过后,如果子组件尺寸发生了变化,在 FlowDelegate 中的 paintChildren() 方法中调用 context.paintChild...第三个组件在最上层,正常显示 对齐与相对定位 Align 通过 Stack 和 Positioned 可以指定一个或多个子组件相对于父元素的各个边进行精确偏移,并且可以重叠, 但是如果只想简单调整一个子组件在父元素中的位置的话

2.7K30

Flutter开篇

Windows、MacOS 和 Linux)应用程序Dart 语言:Flutter 使用 Dart 语言进行编程。...Dart 是 Google 开发的一种现代、面向对象的编程语言,它专为 Flutter 优化,易于学习且性能出色。...热重载:Flutter 的热重载功能使开发者能够在应用运行时即时查看更改效果,这极大提高了开发效率。...在原生应用程序中使用 Flutter 提供的 UI 组件和动画,实现高度定制化的界面。在原生应用程序中调用 Flutter 代码,实现原生和 Flutter 之间的通信。...: 用于创建和管理 Flutter 应用程序中的动画效果frameworkframework(框架)是一个预先设计好的软件架构可以避免重复造轮子,减少开发时间和成本 ,比如react、vue官方地址:https

22820

Flutter质感设计之底部导航

:图标主题的高度减8.0 height: iconTheme.size - 8.0, // 子控件的装饰:创建一个装饰 decoration: new BoxDecoration( // 背景颜色:图标主题的颜色...} // 动画控制器的值更改时的操作 void _rebuild() { // 通知框架此对象的内部状态已更改 setState((){ // 重建,以便为视图创建动画 }); } // 建立过渡堆栈...navigationViews) // 在存储不透明度转换的列表中添加transition函数的返回值 transitions.add(view.transition(_type, context)); // 存储不透明度转换的列表进行排序...进行比较 * 返回一个负整数,aValue排序在bValue之前 * 返回一个正整数,aValue排序在bValue之后 */ return aValue.compareTo(bValue); });...以上就是本文的全部内容,希望大家的学习有所帮助。

3K21

浏览器的渲染流程--重排、重绘、合成

触发时机和影响范围: DOM节点信息更改,触发重排,这个DOM更改程度会决定周边DOM更改范围。...全局范围: 就是从根节点html开始整个渲染树进行重新布局,例如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等。 局部范围: 渲染树的某部分或某一个渲染对象进行重新布局。...浏览器窗口大小发生改变——resize事件发生。 元素尺寸或位置发生改变——定位、边距、填充、边框、宽度和高度。 元素内容变化(文字数量或图片大小等等)。 元素字体大小变化。...如果在一个局部方法中需要多次访问同一个dom,可以在第一次获取元素用变量保存下来,减少遍历时间。 用事件委托来减少事件处理器的数量。...的元素上,这样其他元素影响较小 动画实现的速度的选择:牺牲平滑度换取速度。

96020

腾讯开源超实用的UI轮子库,我是轮子搬运工

QMUIBottomSheet 在 Dialog 的基础上重新定制了 show() 和 hide() 动画效果, 使 Dialog 在界面底部升起和降下。...QMUITipDialog 提供一个浮层展示在屏幕中间,提供了以下两种样式: 使用 QMUITipDialog.Builder 生成,提供了一个图标和一行文字的样式, 其中图标有 Loading、...QMUIWrapContentListView 支持高度值为 wrap_content 的 ListView,解决原生 ListView 在设置高度为 wrap_content 高度计算错误的 bug...QMUIViewHelper View 工具类,按照功能类型来划分,总共包含以下几个特性: ImageView 进行处理,可以按比例缩放图片。... View 做背景颜色变化动画,支持多个动画参数。 View 做进退场动画,支持透明度变化和上下位移两种方式。

4.7K30

带你轻松掌握Flutter 动画开发核心技能

在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助; 精心设计的动画会让用户界面感觉更直观、流畅,能改善用户体验。...Animation是一个抽象类,它拥有其当前值和状态(完成或停止)。其中一个比较常用的Animation类是[Animation]()。...Flutter中的Animation对象一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。...; stop({ bool canceled = true }):停止动画; 当创建一个AnimationController,需要传递一个vsync参数,存在vsync时会防止屏幕外动画消耗不必要的资源...是拆分动画一个工具类,借助它我们可以将动画和widget进行分离: 在上面的实例中我们的代码存在的一个问题: 更改动画需要更改显示logo的widget。

65010

谷歌 Flutter 1.17 发布

2018年10月的PR 22330中增加了新配置的选择加入支持,但不对新名称提供支持。现有的文本样式名称未更改,因为这样做是一个重大的API更改,可能会影响大多数应用程序。...这允许重复flutter run命令的启动速度更快,因为Dart代码或资产的更改不需要重新构建APK。...如果您以Android为目标,则要注意的另一个变化是,现在创建新的Flutter项目,AndroidX是唯一的选择。...如果您希望在Android Studio或IntelliJ的Flutter插件中更早地访问此类更改Flutter团队现在为IntelliJ插件提供了一个开发通道,您可以选择该通道以更快地进行更新。...数字代理商做得令人惊奇的事情之一就是Superformula,该公司最近与MGM Resorts合作,其移动应用程序进行了重大更新,并已在Flutter进行了完全重建。

3.5K10

Flutter 动画组件那么多,记不住不会用怎么办?我都给你整理好了,收藏吧!

AnimatedWidget AnimatedWidget 是一个抽象类,可以通过 Animation 对象的值动态刷新每一帧从而实现动画效果。...AnimatedWidget 的构造方法如下,其中 listenable 是一个抽象类 Listenable 对象,一般是 Animation 或 ChangeNotifier。...key, required this.listenable, }) 复制代码 Animation Animation 不算是一个组件,但是构建隐式动画组件都需要 Animation 对象来控制动画起止参数...AnimatedList 的构造方法如下,其中关键的是 itemBuilder 接收了一个 animation 对象,因此可以用来完成插入动画。...这个就很好理解了,在动画过程中更改组件透明度。我们在Flutter 入门与实战(九十五):小姐姐渐现效果 —— AnimatedOpacity 使用 已经有过介绍了。

68900

Flutter TolyUI 框架#04 | 侧栏菜单设计

但在交互过程在,菜单项的某些视觉表现也存在共性,比如 悬浮事件、动画效果、宽度拖拽 等功能。所以对于条目来说,如何在封装共性,提供给开发者个性化的构建方式,是一个挑战。...同样自定义一个 BilibliMenuCell 作为 cellBuilder 返回值即可: 这个效果中使用了动画,通过 DisplayMate 对象可以感知到当前动画值这样借由 Tween 皆可以轻松实现数值上的过渡...hideActiveText: false, // 激活隐藏文字 height: 56, // 高度 heightLarge:46, // 宽模式高度...就目前而言 TolyRailMenuBar 有足够灵活的自定义方式进行展示,它只是封装了宽度拖拽、布局结构、动画处理等共性功能。...自定义菜单项 菜单项是一个右圆角矩形,在激活变化时,宽度、颜色、字号会动画渐变。这里通过三个 Tween 动画数值进行计算。

11910

Flutter 1.22 正式发布

iOS 14 每当发布新版本的移动操作系统,我们都会对其进行彻底测试,以查找影响Flutter及其工具的不兼容性或更改。...对于iOS 14,我们Flutter进行了很多更改,以确保它可以按照开发人员的方式工作: Xcode 12需要iOS 9.0或更高版本,因此我们的默认模板将其默认值从8.0增加到9.0 iOS 14特定崩溃和字体渲染问题已在...其次,动画在显示软件键盘与Android 11同步。 ? 问题 #19279是一个长期存在的问题,其中系统键盘的显示/隐藏动画Flutter的插图不同步。这在Android 11中已修复。...Navigator 2.0 如果您以前在Flutter应用程序中使用过导航功能,则可能已经注意到核心数据结构(用户正在浏览的页面堆栈)您而言是隐藏的。...但是,与在ColorListScreen的build方法中创建的Container列表不同,该堆栈隐藏

7.4K20

Flutter 1.17版本重磅发布

2018年10月的PR 22330中增加了新配置的选择加入支持,但不对新名称提供支持。现有的文本样式名称未更改,因为这样做是一个重大的API更改,可能会影响大多数应用程序。...可访问性和国际化 最后,可访问性是我们持续关注的一个重要领域,因为我们认为Flutter应用程序尽可能广泛的用户可用是一个优先事项。...由于Dart代码或素材资源的更改无需重新构建APK,因此可以使重复的flutter运行命令更快地启动。...如果您希望在Android Studio或IntelliJ的Flutter插件中更早地访问此类更改,我们现在为IntelliJ插件提供了一个开发通道,您可以选择该通道以更快地进行更新。...数字代理机构做得令人惊奇的事情之一就是Superformula,该公司最近与MGM Resorts合作,其移动应用程序进行了重大更新,并已在Flutter进行了完全重建。

2.5K10
领券