Bevy UI 的 em/rem 字号单位Val::Em、Val::Rem 迁移与实战指南0.19 → 0.20【免费下载链接】bevyA refreshingly simple>项目地址: https://gitcode.com/GitHub_Trending/be/bevyBevy UI 在 0.20 中引入了em与rem两种相对字号单位使Val的解析结果能够跟随字体大小缩放这对设计时定死像素、运行期调整字号的可访问性与多设备适配场景非常有用。本文以官方迁移指南 val_em_and_rem.md 为主体结合 release notes 与仓库源码完整讲解新增的Val::Em/Val::Rem变体、受影响的resolve方法签名、EmSize组件的生命周期以及GridTrack、FontSize::eval等周边 API 的迁移方式。为什么需要 em 和 remem表示当前节点字号的倍数rem表示根字号全局基准字号的倍数。两者的数据来源不同em相对于设置该值的节点自身的字号由节点实体上的EmSize组件提供rem相对于全局的根字号由既有的RemSize资源提供。典型场景是你希望 UI 在作者态下布局合理但又能在运行期整体放大或缩小文字例如无障碍功能或在不同分辨率/设备上的适配。若尺寸全部用px硬编码改字号后布局会失衡用em/rem表达尺寸就能随字号一起伸缩。官方给出的最小示例bsn!语法bsn! { Node { width: em(10) } Text(Hello) TextFont { font_size: FontSize::Rem(1.5) } }另外注意一个行为变化默认字号从px(20)变为rem(1)。如果你从不修改RemSize这只是无副作用的等价替换但一旦你调整了RemSize默认文字会随之缩放。Val 新增变体与字符串解析在 geometry.rs 中Val枚举新增了两个变体见 L58-L67/// Set this value as a multiple of the nodes own font size. /// /// 1em is the nodes font size, so Val::Em(2.0) is twice that. /// Resolved from the nodes [EmSize] component. Em(f32), /// Set this value as a multiple of the root font size. /// /// Unlike [Val::Em] this ignores the nodes own font size, so it means the same /// length anywhere in the hierarchy. Resolved from the [RemSize] resource. Rem(f32),Val::Em解析时读取节点自身的EmSize组件Val::Rem解析时读取全局RemSize资源因此在层级树任何位置含义都一致。构造这两个变体的辅助函数em()和rem()与既有的px()、percent()、vw()、vh()并列。Val还实现了FromStrL89-L136现在也能把1.5rem、2em之类的字符串解析为对应变体这在从样式表/序列化数据构造Val时可以直接受益。字号相关的类型定义位于 bevy_text/src/text.rspub const DEFAULT_REM_SIZE_PX: f32 20.0; // L868 pub struct RemSize(pub f32); // L875 pub struct EmSize(pub f32); // L898DEFAULT_REM_SIZE_PX为 20.0正好与 0.19 的默认字号px(20)保持一致这也是默认字号改为rem(1)后行为等价的原因。迁移点一resolve 系列方法新增两个参数由于解析Val现在需要节点字号和根字号两个基准以下方法的签名都追加了em_size: EmSize与rem_size: RemSize两个参数Val::resolveVal2::resolveUiPosition::resolveCornerRadius::resolveRadialGradientShape::resolveUiTransform::compute_affineBorderRadius::resolve调用方式的变化// 0.19 let physical val.resolve(scale_factor, physical_base_value, physical_target_size)?; // 0.20 let physical val.resolve( scale_factor, physical_base_value, physical_target_size, em_size, rem_size, )?;在源码中可以确认Val::resolve的新签名geometry.rs L483-L488以及Val2::resolveL1190-L1195都已带上em_size: EmSize其后跟随rem_size参数UiTransform::compute_affine与RadialGradientShape::resolve同样如此见 ui_transform.rs L69、gradients.rs L615。迁移点二从 ComputedNode 取 em_size / rem_size如果你是在布局完成之后、针对一个已存在的节点来解析Val例如自定义box_shadow逻辑不必自己去追踪字号——ComputedNode新增了两个字段记录了排版时实际使用的字号值em_sizerem_size它们的默认值为EmSize(DEFAULT_REM_SIZE_PX)与RemSize(DEFAULT_REM_SIZE_PX)见 ui_node.rs L388-L389。对已有节点做Val解析时直接从该节点的ComputedNode上取这两个字段传入resolve即可。迁移点三Node 现在要求 EmSize 组件这是 0.20 中最需要理解的一点Node现在要求实体上存在EmSize定义在bevy_text并在bevy_ui::prelude中重导出它作为该节点字号供Val::Em解析使用。其生命周期规则如下节点带有TextFont时EmSize由TextFont派生当TextFont、RemSize或渲染目标信息发生变化时会被重新计算。你手动设置的值会保留到下一次重算为止。节点没有TextFont时EmSize完全由你自己设置框架不会去动它默认值为DEFAULT_REM_SIZE_PX20px。它与默认RemSize数值一致但不会跟随RemSize的变化。EmSize的层级传播是应用层的责任bevy_ui不负责。也就是说如果你希望子节点继承父节点的字号需要自己在 App 里做传播系统。release notes 也明确写着EmSizeis derived fromTextFontwhen one is on the same entity; propagating it down the hierarchy is left to your app.迁移点四GridTrack 的 em/rem 构造器网格轨道也支持了这两种单位新增了构造函数与对应的 sizing function 变体GridTrack::em、GridTrack::remRepeatedGridTrack::em、RepeatedGridTrack::rem它们底层使用新增的MinTrackSizingFunction::Em、MinTrackSizingFunction::Rem、MaxTrackSizingFunction::Em、MaxTrackSizingFunction::Rem变体。这两个变体同样出现在 ui_node.rs L1856-L1891 的 min/max sizing function 枚举中用于按字号倍数定义网格轨道的上下限尺寸。迁移点五FontSize::eval 改为接收 RemSizeFontSize::eval的参数类型从裸f32变为RemSize结构体// 0.19 let size font_size.eval(logical_viewport_size, rem_size_px); // 0.20 let size font_size.eval(logical_viewport_size, RemSize(rem_size_px));这是一个类型层面的小改动把根字号包装进RemSize后字号求值的接口与布局解析接口的单位来源保持了一致的类型表达。迁移检查清单升级 0.19 → 0.20 时可以按以下顺序排查编译错误找到所有Val::resolve/Val2::resolve等调用补上em_size与rem_size两个参数针对已排版节点的解析优先从ComputedNode的em_size/rem_size字段取值为携带Node的实体补上EmSize组件——有TextFont的节点会被框架自动派生/重算没有TextFont的节点如纯容器需要自行设置默认值检查 App 中是否需要新增EmSize向下传播的系统官方明确这是应用的责任更新FontSize::eval调用把裸f32包成RemSize(f32)网格轨道需要字号单位时改用GridTrack::em/GridTrack::rem等构造函数若有依赖默认字号恒为 20px的逻辑注意默认字号现在是rem(1)——只有在修改RemSize后才会与旧的硬编码 20px 产生差异。小结0.20 的 em/rem 支持让 Bevy UI 的尺寸系统从像素与视口比例扩展到了字号比例Val::Em随节点自身EmSize缩放Val::Rem随全局RemSize缩放且em/rem辅助函数、字符串解析、GridTrack构造器与bsn!语法均已就位。迁移成本集中在resolve系列方法的签名变化与EmSize组件的引入上只要理解EmSize由TextFont派生但层级传播交给应用这一规则升级路径就非常直接。相关源码入口geometry.rs、ui_node.rs、text.rs、ui_transform.rs、gradients.rs。【免费下载链接】bevyA refreshingly simple>项目地址: https://gitcode.com/GitHub_Trending/be/bevy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bevy UI 的 em/rem 字号单位：Val::Em、Val::Rem 迁移与实战指南（0.19 → 0.20）
Bevy UI 的 em/rem 字号单位Val::Em、Val::Rem 迁移与实战指南0.19 → 0.20【免费下载链接】bevyA refreshingly simple>项目地址: https://gitcode.com/GitHub_Trending/be/bevyBevy UI 在 0.20 中引入了em与rem两种相对字号单位使Val的解析结果能够跟随字体大小缩放这对设计时定死像素、运行期调整字号的可访问性与多设备适配场景非常有用。本文以官方迁移指南 val_em_and_rem.md 为主体结合 release notes 与仓库源码完整讲解新增的Val::Em/Val::Rem变体、受影响的resolve方法签名、EmSize组件的生命周期以及GridTrack、FontSize::eval等周边 API 的迁移方式。为什么需要 em 和 remem表示当前节点字号的倍数rem表示根字号全局基准字号的倍数。两者的数据来源不同em相对于设置该值的节点自身的字号由节点实体上的EmSize组件提供rem相对于全局的根字号由既有的RemSize资源提供。典型场景是你希望 UI 在作者态下布局合理但又能在运行期整体放大或缩小文字例如无障碍功能或在不同分辨率/设备上的适配。若尺寸全部用px硬编码改字号后布局会失衡用em/rem表达尺寸就能随字号一起伸缩。官方给出的最小示例bsn!语法bsn! { Node { width: em(10) } Text(Hello) TextFont { font_size: FontSize::Rem(1.5) } }另外注意一个行为变化默认字号从px(20)变为rem(1)。如果你从不修改RemSize这只是无副作用的等价替换但一旦你调整了RemSize默认文字会随之缩放。Val 新增变体与字符串解析在 geometry.rs 中Val枚举新增了两个变体见 L58-L67/// Set this value as a multiple of the nodes own font size. /// /// 1em is the nodes font size, so Val::Em(2.0) is twice that. /// Resolved from the nodes [EmSize] component. Em(f32), /// Set this value as a multiple of the root font size. /// /// Unlike [Val::Em] this ignores the nodes own font size, so it means the same /// length anywhere in the hierarchy. Resolved from the [RemSize] resource. Rem(f32),Val::Em解析时读取节点自身的EmSize组件Val::Rem解析时读取全局RemSize资源因此在层级树任何位置含义都一致。构造这两个变体的辅助函数em()和rem()与既有的px()、percent()、vw()、vh()并列。Val还实现了FromStrL89-L136现在也能把1.5rem、2em之类的字符串解析为对应变体这在从样式表/序列化数据构造Val时可以直接受益。字号相关的类型定义位于 bevy_text/src/text.rspub const DEFAULT_REM_SIZE_PX: f32 20.0; // L868 pub struct RemSize(pub f32); // L875 pub struct EmSize(pub f32); // L898DEFAULT_REM_SIZE_PX为 20.0正好与 0.19 的默认字号px(20)保持一致这也是默认字号改为rem(1)后行为等价的原因。迁移点一resolve 系列方法新增两个参数由于解析Val现在需要节点字号和根字号两个基准以下方法的签名都追加了em_size: EmSize与rem_size: RemSize两个参数Val::resolveVal2::resolveUiPosition::resolveCornerRadius::resolveRadialGradientShape::resolveUiTransform::compute_affineBorderRadius::resolve调用方式的变化// 0.19 let physical val.resolve(scale_factor, physical_base_value, physical_target_size)?; // 0.20 let physical val.resolve( scale_factor, physical_base_value, physical_target_size, em_size, rem_size, )?;在源码中可以确认Val::resolve的新签名geometry.rs L483-L488以及Val2::resolveL1190-L1195都已带上em_size: EmSize其后跟随rem_size参数UiTransform::compute_affine与RadialGradientShape::resolve同样如此见 ui_transform.rs L69、gradients.rs L615。迁移点二从 ComputedNode 取 em_size / rem_size如果你是在布局完成之后、针对一个已存在的节点来解析Val例如自定义box_shadow逻辑不必自己去追踪字号——ComputedNode新增了两个字段记录了排版时实际使用的字号值em_sizerem_size它们的默认值为EmSize(DEFAULT_REM_SIZE_PX)与RemSize(DEFAULT_REM_SIZE_PX)见 ui_node.rs L388-L389。对已有节点做Val解析时直接从该节点的ComputedNode上取这两个字段传入resolve即可。迁移点三Node 现在要求 EmSize 组件这是 0.20 中最需要理解的一点Node现在要求实体上存在EmSize定义在bevy_text并在bevy_ui::prelude中重导出它作为该节点字号供Val::Em解析使用。其生命周期规则如下节点带有TextFont时EmSize由TextFont派生当TextFont、RemSize或渲染目标信息发生变化时会被重新计算。你手动设置的值会保留到下一次重算为止。节点没有TextFont时EmSize完全由你自己设置框架不会去动它默认值为DEFAULT_REM_SIZE_PX20px。它与默认RemSize数值一致但不会跟随RemSize的变化。EmSize的层级传播是应用层的责任bevy_ui不负责。也就是说如果你希望子节点继承父节点的字号需要自己在 App 里做传播系统。release notes 也明确写着EmSizeis derived fromTextFontwhen one is on the same entity; propagating it down the hierarchy is left to your app.迁移点四GridTrack 的 em/rem 构造器网格轨道也支持了这两种单位新增了构造函数与对应的 sizing function 变体GridTrack::em、GridTrack::remRepeatedGridTrack::em、RepeatedGridTrack::rem它们底层使用新增的MinTrackSizingFunction::Em、MinTrackSizingFunction::Rem、MaxTrackSizingFunction::Em、MaxTrackSizingFunction::Rem变体。这两个变体同样出现在 ui_node.rs L1856-L1891 的 min/max sizing function 枚举中用于按字号倍数定义网格轨道的上下限尺寸。迁移点五FontSize::eval 改为接收 RemSizeFontSize::eval的参数类型从裸f32变为RemSize结构体// 0.19 let size font_size.eval(logical_viewport_size, rem_size_px); // 0.20 let size font_size.eval(logical_viewport_size, RemSize(rem_size_px));这是一个类型层面的小改动把根字号包装进RemSize后字号求值的接口与布局解析接口的单位来源保持了一致的类型表达。迁移检查清单升级 0.19 → 0.20 时可以按以下顺序排查编译错误找到所有Val::resolve/Val2::resolve等调用补上em_size与rem_size两个参数针对已排版节点的解析优先从ComputedNode的em_size/rem_size字段取值为携带Node的实体补上EmSize组件——有TextFont的节点会被框架自动派生/重算没有TextFont的节点如纯容器需要自行设置默认值检查 App 中是否需要新增EmSize向下传播的系统官方明确这是应用的责任更新FontSize::eval调用把裸f32包成RemSize(f32)网格轨道需要字号单位时改用GridTrack::em/GridTrack::rem等构造函数若有依赖默认字号恒为 20px的逻辑注意默认字号现在是rem(1)——只有在修改RemSize后才会与旧的硬编码 20px 产生差异。小结0.20 的 em/rem 支持让 Bevy UI 的尺寸系统从像素与视口比例扩展到了字号比例Val::Em随节点自身EmSize缩放Val::Rem随全局RemSize缩放且em/rem辅助函数、字符串解析、GridTrack构造器与bsn!语法均已就位。迁移成本集中在resolve系列方法的签名变化与EmSize组件的引入上只要理解EmSize由TextFont派生但层级传播交给应用这一规则升级路径就非常直接。相关源码入口geometry.rs、ui_node.rs、text.rs、ui_transform.rs、gradients.rs。【免费下载链接】bevyA refreshingly simple>项目地址: https://gitcode.com/GitHub_Trending/be/bevy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考