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

如何获取父级中动画值的子小部件大小

在Flutter中,要获取父级中动画值的子小部件大小,可以使用LayoutBuilder小部件。LayoutBuilder小部件会在其子小部件的布局阶段被调用,并提供了一个回调函数,该回调函数接收一个BuildContext和一个BoxConstraints参数。通过这个回调函数,我们可以获取到父级小部件的大小信息。

下面是一个示例代码:

代码语言: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;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 200).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parent Animation'),
      ),
      body: Center(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
              child: Text(
                'Child Widget',
                style: TextStyle(color: Colors.white),
              ),
            );
          },
        ),
      ),
    );
  }
}

在上面的示例中,我们使用LayoutBuilder包裹了一个Container小部件,并将其宽度和高度设置为动画值_animation.value。这样,当动画值发生变化时,子小部件的大小也会相应地改变。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于Flutter的动画和布局,你可以参考腾讯云的Flutter开发文档:Flutter开发文档

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

相关·内容

京东一面:线程如何获取线程ThreadLocal

源码解析 分布式事务中间件 TCC-Transaction 源码解析 Eureka 和 Hystrix 源码解析 Java 并发源码 来源:blog.csdn.net/ weixin_44912855 线程如何获取线程...京东一面」线程如何获取线程ThreadLocal 线程如何获取线程ThreadLocal 想要子线程获取线程 ThreadLocal ,需要其子类 InheritableThreadLocal...");     parentParent.start(); } 运行结果如下: 线程获取线程 ThreadLocal 原理如下: 首先我们要知道 Thread类维护了两个ThreadLocalMap...inheritableThreadLocals 这就是线程可以获取线程ThreadLocal关键。...} createMap方法不仅创建了threadLocals,同时也将要添加本地变量值添加到了threadLocals

1.2K50

微信程序-如何获取用户表单控件

背景 在程序开发,经常有用到表单,我们往往需要在程序端获取用户表单输入框(通常用户输入有:switch,input,checkbox,slider,radio,picker)等,通过触发事件...,然后提交给后端处理 那么在程序当中有哪些方式可以获取到表单呢,又怎么通过非表单提交方式获取用户输入框呢 换言之,若提交按钮在form之外,又如何实现表单提交呢 在程序中有两种方式可以获取表单...,同样也可以获取到表单组件各个数值 这种应用场景在程序是很常见,表单提交数据,不一定就非得是button按钮方式,只要能拿到表单组件,就达到目的了 非表单方式获取表单组件 下面是实例效果...,而非form表单形式提交数据,需要给表单组件绑定bindchang,通过事件对象方式获取组件数据 这个是有应用场景,比如:如下下面程序页面爱鼓励页面,就是用非表单方式提交数据,...有些时候,不一定就要非用form表单提交方式,都有对应应用场景 (打开小程序-爱鼓励页面表单用就是非form提交方式) 总结 全文总结两段话就是: 程序获取表单组件有两种方式,一种是通过传统

6.7K11

Unity基础教程系列(新)(六)——Jobs(Animating a Fractal)

由于比例尺也适用于节点,这意味着每降低一,尺寸就会减半。 ? ? (逐渐减小球) 为了使球体再次接触在一起,我们需要减小其偏移量。局部半径以前都是0.5,因此偏移1会使它们接触。...深度4处某些部件最终会碰到1根节点。因此,这些部分向上最终会穿透根部件,而该级别的其他一些则触及2部分,依此类推。...要相对于其父放置部件,我们还需要访问Transform组件。为此,还要追踪部件数组。是该数组元素,其索引等于当前部分索引除以五。之所以有效,是因为我们执行整数除法,因此没有余数。...因此,索引为0–4部分将获得索引0,索引为5–9部分将获得索引1,依此类推。 ? 现在我们可以设置部件相对于其指定位置。...生成四元数表示通过执行第二四元数旋转,然后应用第一四元数旋转而获得旋转。因此,在转换层次结构,首先执行节点旋转,然后执行旋转。

3.4K31

Flutte部件目录-基本部件(一)

没有组件容器尽可能大,除非传入约束是无限。在这种情况下,他们尽可能,有组件容器将自己尺寸扩大到他们孩子大小,构造函数宽度,高度和constraints参数将覆盖这些。...如果部件没有且没有alignment(对齐),但是提供了高度,宽度或constraints(约束),那么基于给定这些约束和对象约束相结合容器会尝试尽可能。...如果小部件没有孩子,没有高度,没有宽度,没有约束,也没有对齐,但提供有界约束,则Container展开以适应提供约束。...如果部件具有alignment,并且提供了无界约束,那么容器会尝试围绕该子部件调整自己大小。...如果部件有alignment,并且提供了有界限约束,那么容器会尝试展开以适合,然后根据alignment将该定位到其自身内。

7.4K20

Flutter —布局系统概述

在第一个阶段,framework 以递归地方式沿着渲染树 把BoxConstraints传递给组件。它为组件提供了一种方式来调节/增强组件尺寸,并根据需要更新这些限制。...收集所有大小,然后使用此几何信息将每个子正确定位在自己笛卡尔系统。这个阶段负责确定大小和位置,在此阶段,组件知道每个子组件大小以及他们位置。 那么,这到底意味着什么?...这意味着组件有责任定义/限制/约束组件尺寸,并相对于其坐标系进行定位。换句话说,小部件可以选择其大小,但是它必须始终遵守从其父收到约束。此外,小部件不知道其在屏幕上位置,但其父知道。...它使AppBar有机会选择所需任何高度,但仍必须使用width = 390。 AppBar是一种特殊部件,称为PreferredSizeWidget。这种类型部件不会对其施加任何约束。...Main获取此“最终”窗口小部件,并将其最终绑定到屏幕。 RenderBox树最终绑定在屏幕上。我们有一个正在运行应用程序。 有趣事情要记住 小部件不知道其在屏幕上位置;它组件才知道。

1.7K20

jQuery 尺寸、位置操作

jQuery 尺寸操作 ​ jQuery 尺寸操作包括元素宽高获取和设置,且不一样API对应不一样盒子模型。 语法   1.以上参数为空,则是获取相应,返回是数字型。...() 设置或获取元素偏移 ① offset() 方法设置或返回被选元素相对于文档偏移坐标,跟没有关系。...③ 可以设置元素偏移:offset({ top: 10, left: 30 });  2. position() 获取元素偏移 ① position() 方法用于返回被选元素相对于带有定位偏移坐标...position().top 用于获取距离定位顶部距离,position().left 用于获取距离定 位左侧距离。 ③ 该方法只能获取。...获取距离带有定位位置(偏移) position 如果没有带有定位,则以文档为准 // 这个方法只能获取不能设置偏移 console.log(

1.1K20

Qt DesignerQWidget属性表介绍

sizeHint和minimumSizeHint sizeHint:是布局管理器中部件缺省大小,如果部件不在布局管理,那么这就是无效;该是Qt对每个部件大小建议,也是缺省,不能修改。...minimumSizeHint:是Qt推荐部件最小尺寸,如果部件不在布局管理,那么这就是无效,在布局管理器的话minimumSizeHint 就是部件缺省最小,除非当前部件大小策略为QSizePolicy.Ignore...---- 模式窗口防止其他窗口中部件获取输入。 此属性控制对应窗口可见时阻塞哪些类型窗口获取输入。...,有三个取值 image.png 在部件上设置布局方向时,它将传播到部件, 但不会传播到作为窗口, 也不会传播到已显式调用setLayoutDirection()。...此外,为调用setLayoutDirection()之后添加部件不会继承布局方向。

10.3K20

在 Flutter 创建可拖动浮动操作按钮

child小部件使用Positioned基于当前偏移量部件呈现。它也被包装为Listener小部件。还有一种方法_updatePosition可以根据移动增量更新当前偏移量。...您需要向部件添加一个键并将其传递给DraggableFloatingActionButton小部件从key,你可以从currentContext属性获取RenderBox,它有findRenderObject...然后,您可以从 RenderBox size 属性获取大小。您必须小心,因为必须在构建树之后调用 findRenderObject 方法。...不仅是尺寸,您还需要考虑按钮尺寸来确定最大偏移量。因此,您需要为部件做类似的事情。对于子部件,可以将其包装为 Container 部件并将 GlobalKey 传递给 Container。...您还需要获取和按钮大小,以防止按钮脱离框。

5.5K10

这可能是2020大小厂问最经典Android面试题了——事件分发机制、View渲染过程

specMode有三种: MeasureSpec.UPSPECIFIED : 容器对于容器没有任何限制,容器想要多大就多大。...View布局大小View和View共同决定。...View 凡是layout_XXX布局属性都是针对View,如果View没有容器则layout_XXX属性是没有任何意义 使用View getWidth()和getHright()方法获取...View默认不绘制任何内容,真正绘制都在自己子类实现 View绘制是借助onDraw()方法传入Canvas类来进行 区分View 动画和ViewGroup动画,前者是View自身动画可以通过...setAnimation添加,后者可以通过xml布局layoutAnimation属性添加 在获取画布剪切区(每个Viewdraw传入Canvas)时会自动处理掉padding,View获取Canvas

99920

Flutte部件目录-布局

Padding 通过给定填充来插入其部件。 Center 一个将自己部件集中在自己中心部件。 Align 一个部件,它自己内部排列它部件,并根据子部件大小自行选择大小。...Offstage 一个部件可以让子部件像在部件树中一样,但是不需要绘画任何东西,也不需要将孩子用于点击测试,也不需要在占用任何空间。...如果给定孩子,这个小部件强制它孩子有一个特定宽度和/或高度(假设这个小部件父母允许这个)。 如果宽度或高度为空,则此小部件将自行调整大小以匹配该维度大小。...SizedOverflowBox 一个具有特定大小部件,但将其原始约束传递给其,这可能会溢出。 Transform 绘制其之前应用转换部件。...ListBody 一个小部件,它沿着一个给定轴顺序排列它元素,强制它们到另一个轴元素维度。 ListView 可滚动线性小部件列表。 ListView是最常用滚动小部件

1.5K10

Python Qt GUI设计:UI界面可视化组件、属性概述(基础篇—3)

在Qt Designer每种组件属性编辑部分可以进行设置,如下图所示: 每种组件属性会有所不同之处,这里以Push Button(按钮)组件为例,简单聊聊其属性,如下所示: 可以看到,最顶层节点为组件对应类...让我们一起看看吧~ geometry属性 geometry属性保存组件相对于其父对象位置和大小,Qt实际上是以一个长方形来表示组件位置和大小,包括左上角坐标位置、长和宽。...sizePolicy属性 sizePolicy属性用于说明组件在布局管理缩放方式,当部件没有在布局管理器时,该设置无效。...如果组件在布局管理器,且布局管理器也设置了最小尺寸,则部件本身最小尺寸以部件mimimumSize为准,布局管理器设置不起作用。...如果一个部件没有设置语言环境,则使用对象语言环境或者默认语言环境(如果部件是顶层部件)。

5.4K40

【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

39、z-index属性在什么情况下会失效 40、Flex 布局容器属性和项目属性有哪些? 41、flex 布局 align-content 与 align-items 有何区别?...2、em是相对长度单位,相对于当前对象内文本字体尺寸。如当前对行内文本字体尺寸未被人为设置,则相对浏览器默认字体尺寸。它会继承元素字体大小,因此并不是一个固定。...19、CSS属性overflow属性定义溢出元素内容区内容会如何处理? 参数是scroll时候,必会出现滚动条。 参数是auto时候,元素内容大于元素时出现滚动条。...自适应单位有以下几个 百分比:% 相对于视口宽度单位:ww 相对于视口高度单位:vh 相对于视口宽度或者高度(取决于哪个单位:Vm 相对于元素字体大小单位:em 相对于根元素字体大小单位...解决:float去除,改为display:inline-block; 40、Flex 布局容器属性和项目属性有哪些?

3K20

css学习笔记,持续记录。

flex-shrink,默认为1,所有元素长宽超出元素时缩放占比(超出长宽除以所有元素shrink加起来数量,就是单份缩放大小,为0时代表不进行缩放) flex-grow,默认为0,所有元素长宽超出元素时缩放占比...(超出长宽除以所有元素shrink加起来数量,就是单份缩放大小,为0时代表不进行缩放) flex-basis,定义容器初始大小,默认为容器自身定义大小,未定义则跟随内容。...设置hidden; 可以避免元素被撑开,保证元素100%跟元素一致。 26....解决当元素没有高度时,元素浮动会使元素高度塌陷问题 解决元素外边距会使元素塌陷问题 42. ul list-style失效 默认情况下ul下li都会自带一个列表样式,如果个ul...inherit:将使用 pointer-events 元素

2.6K60

前端面试题2(CSS)

如果是单行文本, line-height 设置成和 height .vertical { height: 100px; line-height: 100px; } 已知高度元素...px 相对于显示器屏幕分辨率,无法用浏览器字体放大功能 em 并不是固定,会继承字体大小: em = 像素 / font-size 解释下什么是浮动和它工作原理?...,那么撑开容器高度是 line-height 而不是容器内文字内容 把 line-height 设置为 height 一样大小可以实现单行文字垂直居中 line-height 和 height...例如,行高为 1.5,元素字体为 18px,则元素行高为 1.5 * 18 = 27px 百分比:将计算后传递给后代 设置元素浮动后,该元素 display 如何变化?...:top; 消除垂直间隙 可以在加 font-size:0; 在元素里设置需要字体大小,消除垂直间隙 把 li 标签写到同一行可以消除垂直间隙,但代码可读性差 overflow: scroll

2.8K11

金九银十,为期2周前端面经汇总(初级前端)

(一般是 相对定位),以这个为参照物 如果没有定位,那么以浏览器窗口为参照物。...快排 分区: 从数组任意选择一个基准,所有比基准元素放到基准前面,比基准大元素放到基准后面 递归:递归地对基准前后数组进行分区 Vue vuex执行流程 如果是同步情况 直接在页面...解决:存入本地缓存 vue方式 组件向组件传 组件通过属性方式向组件传组件通过props来接受。 组件接受组件分为引用数据类型和普通数据类型两种。...在组件slot标签上绑定需要组件上使用slot-scope=“user”来接收组件传过来 Keep-alive keep-alive是vue内置组件,能在组件切换过程中将状态保留在内存...5.缓存服务器从源服务器得到内容后,一方面在本地进行缓存,另一方面将获取数据返回给客户端 图片优化方法 图片过多,进行懒加载 大量图片,css精灵图 将图片压缩成base64格式来节约请求 图片过大

2.9K20

Flutter你竟是这样布局

Widget一个接一个地告诉其孩子约束(每个孩子可能有所不同),然后询问每个孩子想要大小,然后,Widget将其孩子定位(水平地在x轴上布局,垂直地在y轴上布局),最后,该小部件将其自身大小告诉...布局是自上而下,当前widget会有基本一些约束(来自它元素),主要是关于宽高最小和最大 Widget无法知道也不决定其在屏幕上位置,因为Widget决定小部件位置。...它会依次询问元素关于布局基本限制要求,让元素上报期望布局结果,然后根据现状和自己布局算法特点,告诉元素应该放到那儿,占多大空间 由于大小和位置又取决于其父,因此在不考虑整个树情况下就无法精确定义任何小部件大小和位置...注意:当小部件告诉其必须具有一定大小时,我们说该小部件为其提供了tight约束。...当然,屏幕是通过将tight constraint传递给Container来实现。 另一方面,宽松约束设置了最大宽度和高度,但使小部件尽可能

2.3K20

简单放置一张图片,实现放大缩小旋转效果1 image和imageView区别2 创建控件显示到view上标准步骤3 CGRectOffset函数含义4 飞机-监听四个按钮点击事件(代码)5

设置大小. addsubview 3 CGRectOffset函数含义 待补充 4 飞机-监听四个按钮点击事件(代码) -(void)addTarget:(nullable id)target action...是CGPoint类型,是当前控件中心点到控件“视图”左上角 7 通过frame修改大小 通过frame修改大小时左上角原点不动 8 通过bounds修改大小 bounds 和 frame 都是CGRect...形变时候frame发生变化,bounds不发生变化. self.imageView.transform = CGAffineTransformIdentity; 10添加和删除视图以及所有视图 如何删除某个子视图...如何获取当前视图所有视图? subviews. isKindOfClass 和 isMemberOfClass 区别?...boundsx,y 会影响控件显示位置 12 头尾式动画(了解) //- 准备开始动画 [UIView beginAnimations:nil context:nil]; //- 设置时间 [UIView

1K30

继续死磕前端

() //跳到ul元素,也就是id为div1元素 .siblings() //跳到div1元素平级所有兄弟元素 .children('ul') //这些兄弟元素ul元素 .slideUp...2.3 属性操作 还记得昨天总结 js 对象如何获取元素内容嘛?没错,是 innerHTML。...,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次最顶层...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层不同级别捕获事件。...,把事件加到上,通过判断事件来源子集,执行相应操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入元素也可以拥有相同操作。

2.8K10

【译】Flutter架构综述

应用程序在所有版本操作系统上看起来和感觉是一样,即使操作系统改变了其控件实现。 Composition 小部件通常由许多其他、单一用途部件组成,这些小部件组合起来可以产生强大效果。...每个RenderObject都知道它体,但除了如何访问它们和它们约束外,对它体几乎一无所知。这为RenderObject提供了足够抽象性,能够处理各种用例。...RenderBox提供了一个盒子约束模型基础,为每个要渲染widget建立了一个最小和最大宽度和高度。 为了执行布局,Flutter以深度优先遍历方式走过渲染树,并将尺寸约束从父传递到。...在确定其大小时,子代必须尊重其父代给它约束。对象在对象建立约束条件下,通过向上传递尺寸来做出响应。 ?...对象可以通过将最大和最小约束设置为相同来决定子对象大小。例如,手机应用中最上面的渲染对象将其对象约束为屏幕大小。(对象可以选择如何使用该空间。

5.5K10
领券