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

元素的布局测量覆盖不应返回 NaN 值作为其 DesiredSize

在前端开发中,布局测量是指确定元素在页面中的位置和大小的过程。在进行布局测量时,元素的 DesiredSize 属性用于表示元素在布局中所需的大小。DesiredSize 是一个包含宽度和高度的尺寸值。

在布局测量过程中,如果某个元素的布局测量覆盖返回了 NaN(Not a Number)值作为其 DesiredSize,这意味着布局系统无法确定该元素的大小。NaN 值通常表示一个无效的或未定义的数值。

返回 NaN 值作为元素的 DesiredSize 可能会导致布局错误和显示问题。因此,开发人员应该避免在布局测量中返回 NaN 值,并确保布局系统能够正确计算元素的大小。

对于解决此问题,开发人员可以采取以下措施:

  1. 检查布局测量代码:仔细检查布局测量代码,确保没有出现计算错误或逻辑错误,导致返回 NaN 值。
  2. 处理边界情况:在进行布局测量时,考虑到可能出现的边界情况,例如除以零或无效的输入值,并进行适当的处理,避免返回 NaN 值。
  3. 使用合适的默认值:如果在布局测量中无法确定元素的大小,可以考虑使用合适的默认值作为元素的 DesiredSize,以确保布局系统能够正确计算布局。
  4. 调试和测试:在开发过程中,进行充分的调试和测试,以确保布局测量返回的 DesiredSize 值是有效的,并且能够正确地布局和显示元素。

总结起来,元素的布局测量覆盖不应返回 NaN 值作为其 DesiredSize。开发人员应该仔细检查布局测量代码,处理边界情况,使用合适的默认值,并进行充分的调试和测试,以确保布局系统能够正确计算元素的大小。

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

相关·内容

Grid 布局算法!自己动手实现一个 Grid

比如: 可以定义行和列 可以分别为每一行和列指定宽高 宽高可选 Auto, * 和数值 Auto 表示 Grid 将按照元素实际所需尺寸进行布局 * 表示行列在布局比例,* 前面的数值表示比例...MeasureOverride 传入父级测量可用尺寸,返回此 Grid 测量发现所需最小尺寸;ArrangeOverride 传入父级实际可提供可用尺寸,返回此 Grid 实际布局所用尺寸。...而 Auto、元素 DesiredSize、* 或者行列最小都会影响到此最小尺寸,所以这些都应该先考虑。而行或列最大应该在最后再考虑。...如果剩余总长 < 0,则返回 Grid.DesiredSize = 可用长度,实际需求 Grid.DesiredSize = 可用长度 - 剩余总长 如果总长 >= 0,则进行循环(以确定剩余全部子元素测量所用尺寸...做法是,将 GridLayout 大部分方法设计为“纯方法”(纯方法只随便调用,调用此方法不会改变任何系统状态,只有拿到返回才会真正发挥作用)。

1.7K20
  • Windows Community Toolkit 3.0 - UniformGrid

    GetFreeSpot() 获取目前 UniformGrid 控件中可用点,分为上下和左右两个方向,分别处理行和列数据;以行为例,遍历每列所有行,返回是否可用于放置元素标识; internal...column ;如果两个有一个为 0,则根据不为 0 和 item 数量来判断另一个;如果两个都为 0,则定义为方形; internal static (int rows, int columns...UniformGrid.cs  该类主要是 UnifromGrid 在 Grid 类基础上处理,主要处理测量和排列方法,我们来看一下功能比较复杂 MeasureOverride() 方法,ArrangeOverride...MeasureOverride() 首先根据可见元素集合,获取控件行列数量,设置行列定义; 遍历所有可见元素,根据每个元素行列和行列跨度属性,设置自动布局,填充 spotsTaken; 计算行和列空白空间总数值...,再根据总空间数值和行列数,计算出一个元素尺寸; 遍历所有可见元素,找出元素中最大宽度和高度;再用这个最大尺寸,乘上行列数,加上空白空间数值,得到控件所需尺寸; protected override

    82520

    win10 uwp 气泡 WPF 气泡

    需要知道, WPF 使用布局不是和以前课本说一样 但是除了尖头,还需要添加矩形距离 ? 添加距离是矩形宽度一半减去5,看到这里一般不会觉得有困难。...于是添加到实际,这里矩形宽度为 100 于是最后就是 (45,5) ,第二个点是 (50,0) 第三个点是 (55,5) 接下来就是计算矩形,矩形就是 x=0 y=5 ,宽度 100 高度...如果只是重新显示,那么界面是不知道气泡大小,所以得到是没显示,为了让气泡可以显示,先给他一个宽高,这样就可以演示。 但是我需要直接就写如何获取子元素大小,把他作为气泡大小。...获取子元素可以通过重写 MeasureOverride 第一步,测量元素,通过子元素可以获得高度宽度 Child.Measure(constraint); 定义自己...padding ,这个先随意给,表示气泡离元素距离 那么计算得到自己大小就是 子元素宽高加上 padding 加上气泡需要外框 因为对于高度,需要加上气泡高度 5 才可以,代码很容易就看懂,

    1.4K10

    Silverlight:利用Panel实现自定义布局

    布局过程中,有二个关键步骤:测量和排列子元素,正好对应MeasureOverride 与ArrangeOverride 二个方法....MeasureOverride 中必须遍历所有子元素,并调用子元素Measure 方法,以便让布局系统确定每个子元素 DesiredSize(即:子元素自身希望占据空间大小),这是在调用 Measure...之后在系统内部发生(开发人员无法干预),该将在后面排列过程期间使用。 ...ArrangeOverride 中同样也必须遍历所有子元素,并调用子元素Arrange方法,以便让布局系统会告诉 Panel 可用于它及其子元素 finalSize(即最终实际占据空间大小)。...下面的示例,修改自SL3官方文档,它将一个400 * 400大小Panel,划分成16个小单元格(每个正好100*100),放置在其中元素,将自动依次填充到这些单元格正中央,如果元素多于16个,

    67890

    WPF 等距布局

    本文告诉大家如何使用 WPF 自定义布局做等距布局。 实际做效果很简单,因为在开发我容易就用到了等距控件。...首先重写MeasureOverride,因为需要一般只是做水平等距,所以就需要拿到元素宽度和高度,把所有的宽度合起来作为这个控件需要最小宽度,然后拿到所有控件最大高度作为这个控件需要高度。...虽然从 MeasureOverride 返回了大小,但是实际上上一级控件是不是最后给这么大,还是不知道。...然后就是重写 ArrangeOverride ,传入参数就是上一级控件给这个控件大小,返回就是实际需要大小。现在可以使用元素 Arrange 通过这个可以把元素元素大小,左上角。...但是元素是不是就听话,实际上还是不知道。首先拿到元素数,把拿到宽度除元素得到一个元素可以使用宽度,然后把每个元素按照顺序给左上角,宽度。

    84310

    WPF快速入门系列(1)——WPF布局概览

    3.1 WPF布局过程   WPF布局包括两个阶段:一个测量(measure)阶段和一个排列(arrange)阶段。在测量阶段,容器遍历所有子元素,并询问子元素它们所期望大小。...布局系统为每个子元素完成了两个处理过程:测量处理和排列处理。每个Panel都提供了自己MeasureOverride和ArrangeOverride方法,以实现自己特定布局行为。...可以通过Orientation属性来设置StackPanel是横排(设置为Vertical)还是竖排(设置为Horizontal)。...在前面介绍过布局系统工作原理是先测量后排列,测量即是确定面板需要多大空间,排列则是定义面板内子元素排列规则。...,父控件会先给子控件提供可用大小(MeasureOverride中availableSize参数),子控件再反馈给父控件一个自己期望DesiredSize),父控件最后根据自己所拥有的空间大小与子控件期望分配一定空间给子控件并返回自己大小

    2.6K20

    WPF 等距布局

    本文告诉大家如何使用 WPF 自定义布局做等距布局。 实际做效果很简单,因为在开发我容易就用到了等距控件。...首先重写MeasureOverride,因为需要一般只是做水平等距,所以就需要拿到元素宽度和高度,把所有的宽度合起来作为这个控件需要最小宽度,然后拿到所有控件最大高度作为这个控件需要高度。...虽然从 MeasureOverride 返回了大小,但是实际上上一级控件是不是最后给这么大,还是不知道。...然后就是重写 ArrangeOverride ,传入参数就是上一级控件给这个控件大小,返回就是实际需要大小。现在可以使用元素 Arrange 通过这个可以把元素元素大小,左上角。...但是元素是不是就听话,实际上还是不知道。首先拿到元素数,把拿到宽度除元素得到一个元素可以使用宽度,然后把每个元素按照顺序给左上角,宽度。

    27910

    WPFSilverlight Layout 系统概述——Measure

    简单来说,WPFLayout系统是一个递归系统,他有两个子过程,总是以调用父元素Measure方法开始,以调用Ararnge方法结束,而进入每个子过程之后,父元素又会调用孩子元素Measure,完成后...由于MeasureOverride返回依然是80×50,可推理,80被调节为200,50被保留,没有Transform之前应该是200×50。...根据自身策略返回一个期望,这个期望应该是在自己MinWidth,Width,MaxWidth限定范围呢,如果没有,基类还会强行调整。 3....基类调整后还会被父传入availableSize再次调整,返回不能大于父传入参数减去Margin之后 Q5: MeasureOverride返回有没有什么限制?...有,除了如Q5所说,返回会被重新调节之外,必须保证自己定义MeasureOverride返回是一个确定,不是NaN,也不是Infinity。如果小于0时,基类会强制调节为0.

    81680

    WPFSilverlight Layout 系统概述——Arrange

    分配多少空间,但是DesiredSize只是作为参考,在有些用例下,MyPanelParent在调用MyPanel.Arrange时候,会根据父实际策略指定MyPanel.Arrange方法参数,...另外,Arrange时候调用MyPanel.Arrange传入参数也正好是MyPanel.DesiredSize,MyPanel.ArrangeOverride返回依然是传入参数大小,没有变化...基类调整后还会被父传入LayoutSlot再次调整,返回不能大于父传入参数减去Margin之后。 4....Q3:ArrangeOverride返回有没有什么限制? 可以为NaN或则PositiveInfinity。 Q4:RenderSize究竟是什么?...ArrangeOVerride:Control父分配给孩子多大空间,Control就将其全部给自己孩子,并返回父给内容区域作为RenderSize。

    78690

    前端面试题分享001

    指向 函数参数为对象时,传入为引用 解析:因为对象不是基本类型,所以当作为参数传入时,使用是引用地址,所以当进行变更时候,原始内存也会变化。...js array:map方法是否需要返回 一般情况下,我们处理数组中map方法时知道入参有三个,分别是元素,index,数组本身,而当我们使用箭头函数直接处理元素时,并且只有一句时,那么会默认元素处理完然后自己会默认返回这个元素...,但是当用{}包围之后,需要显性声明返回才可以返回对应变化元素. let arr = [1,6,67,90,'34'] let newArr = arr.map((ele,index,arr)=>...,然后针对数字部分进行进制转换,如果返回进制那么进行返回,如果不是用对应进制可以转换,就会返回NaN 代码实现promise 如果你要应付面试,如果不想或者不保证代码写出来,那么可以分别对关键部分进行伪代码了解与说明...– 说明状态status字段 ,以及其对应返回,错误原因,定义到构造器中 – 核心函数,resolve以及reject实现,进入每个函数时修改状态,进行结果或者原因赋值 – 执行resolve

    56740

    Effect:由渲染本身引起副作用

    ①不能在渲染过程中发生,②也没有一个特定事件(比如点击)触发。...不滥用Effect ⛔ 1️⃣ 根据 props 或 state 来更新 state => 使用字面量 如果一个可以基于现有的 props 或 state 计算得出,不要把它作为一个 state,而是在渲染期间直接计算这个...延伸 多数组件不需要使用下述两个 hooks,组件返回 JSX,然后浏览器计算他们 布局(位置和大小)& 样式 并重新绘制屏幕。...在下方渲染逻辑中使用 tooltipHeight ... } 即使 Tooltip 组件需要两次渲染(首先,使用初始为 0 tooltipHeight 渲染,然后使用实际测量高度渲染),你也只能看到最终结果...useInsertionEffect3 在布局副作用触发之前将元素插入到 DOM 中。 useInsertionEffect 是为 CSS-in-JS 库作者特意打造

    7100

    New UWP Community Toolkit - Staggered panel

    ,基于对子元素大小计算确定它在布局期间所需要尺寸,我们来看一下具体实现过程: 1....根据 availableSize,去掉 Padding 对应方向,获得新 availableSize,也就是子元素可用尺寸; 2....返回索引;根据返回索引,把对应 child 高度加到 columnHeights 对应索引中,更新  columnHeights 数组中每列总高度; 4....在 columnHeights 数组中 ,找到最大返回尺寸:宽度为可用尺寸宽度,高度为列数组最大;可以看出,这个尺寸就是根据子元素计算出 panel 需要空间大小; protected...计算列数,根据 panel 横向对齐方式,在居中和靠右时,重新设置横向偏移,考虑最终宽度和实际元素宽度偏差; 2.

    1.1K60

    java学习与应用(4.2)--JavaScript、bootstrap

    ECMA基本对象 Function对象:函数对象,创建:var fun = new Function(形参,方法体),function 方法名{方法体}(方法名形参类型,返回类型省略),var...Array数组对象,创建:var arr=new Array(元素列表/默认长度/空),var arr=[元素列表]。特点:数组中元素类型可变,数组长度可变(其它为undefined)。...Date日期对象,创建:var date = new Date(),方法:toLocalString()返回本地格式时间,getTime()获取当前时间毫秒差。 Math对象,直接可用。...parseInt将字符串转为数字(和正号区别在于转换前面的数字串转为数字)。isNaN判断是否为NaNNaN和其他任何直接比较都为false)。eval方法将JS字符串转换为JS脚本执行。...响应式布局:依赖于栅格系统(一行分12格,指定元素占格)。

    2.2K10

    前端高频面试题

    NaN 指“不是一个数字”(not a number),NaN 是一个“警戒”(sentinel value,有特殊用途常规),用于指出数字类型中错误情况,即“执行数学运算没有成功,这是失败后返回结果...thisArg(可选): 执行 callback 时,用于 this 返回:一个新、由通过测试元素组成数组,如果没有任何数组元素通过测试,则返回空数组。...返回:数组中有至少一个元素通过回调函数测试就会返回 true;所有元素都没有通过回调函数测试返回才会为 false。...在第一次调用时,若指定了初始 initialValue,则为 initialValue,否则为数组索引为 0 元素 array[0]。curVal:数组中正在处理元素。...以 iPhone XS 为例,当写 CSS 代码时,针对于单位 px,宽度为 414px & 896px,也就是说当赋予一个 DIV元素宽度为 414px,这个 DIV 就会填满手机宽度; 而如果有一把尺子来实际测量这部手机物理像素

    70240

    【学习图片】02:关键性能问题

    在响应式网页设计早期,"删除未使用width 和height 属性"是常见建议,因为我们在CSS中指定,即max-width: 100%和height: auto,将覆盖它们。...这些属性不再用于确定img元素布局固定、像素为基础大小,而是可以认为代表图像长宽比,语法相同。...现代浏览器会在页面渲染前将这些除以对方,以确定img元素内在长宽比,从而允许它在布局渲染时保留图像占据空间。...作为一项规则,我们应该始终在上使用height和width属性,应与图像源内在大小匹配,只要我们确保指定了height:auto和max-width:100%,以覆盖HTML属性中高度即可...图像是Web重要组成部分,我们不应该仅为了性能而妥协有意义内容质量。

    74420

    2022我前端面题试整理

    import会覆盖页面内任何位置定义元素样式作为style属性写在元素样式id选择器类选择器标签选择器通配符选择器(*)浏览器自定义或继承同一级别:后写覆盖先写css选择器解析原则:选择器定位...数组首部操作方法 shift() 和 unshift() 重排序方法 reverse() 和 sort(),sort() 方法可以传入一个函数来进行比较,传入前后两个,如果返回为正数,则交换两个参数位置...任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素float、clear和vertical-align属性将失效。...简单来说: flex布局是CSS3新增一种布局方式,可以通过将一个元素display属性设置为flex从而使它成为一个flex容器,它所有子元素都会成为它项目。...== y 情况下,只需要判断是否为NaN,如果x!==x,则说明x是NaN,同理y也一样 // x和y同时为NaN时,返回true return x !== x && y !

    84520

    求职 | 史上最全web前端面试题汇总及答案

    、由先到后顺序叠加起来,如果不发生冲突,则全部样式都有效,重复定义冲突时按照内层优先、后定义优先原则进行覆盖,即内层子元素覆盖元素样式、后定义覆盖先定义样式。...fixed fixed (老IE不支持)生成绝对定位元素,相对于浏览器窗口进行定位。 relative relative生成相对定位元素,相对于原来所在文档流中位置进行定位。...typeof 结果是?如果一个变量NaN,怎么确定?...实现 “快速排序”思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为”基准”(pivot)。...思路: ①布局select和input,让input覆盖select,除了select下拉图标,以方便select选择。

    1.4K10
    领券