UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载在 ant-design-blazor 的 InputNumber 数字输入框中小数精度的控制遵循与原生数字输入框一致的规则value 的精度由 Step 参数的小数位数决定。本文围绕官方文档《小数Decimal》示例结合组件源码与单元测试深入讲解 Step 驱动小数精度的底层机制、四舍五入规则、显示格式以及 Precision 参数与 Step 的配合关系帮助你在 Blazor 项目中准确驾驭带小数的数值输入场景。一、核心概念精度由 Step 的小数位数决定官方示例Decimal.md指出和原生的数字输入框一样value 的精度由 step 的小数位数决定。换句话说当你把Step设置为0.1时组件会自动推导出保留 1 位小数的精度规则点击上/下箭头、使用键盘方向键或直接输入数值后失焦最终的值都会被规范到该精度。这种设计保证了步进值与展示值的一致性避免出现步进 0.1、显示 0.30000000000000004这类浮点误差导致的反直觉结果。对应的示例代码位于 Decimal.razordiv AntDesign.InputNumber Step0.1 Min-1 Max5 bind-ValuemyValue / /div code{ private double myValue { get; set; } }在这个例子中Step0.1表示每次增减 0.1同时将输入框的显示精度与数值精度规范为 1 位小数取值范围被Min-1、Max5约束在 [-1, 5] 区间。二、源码实现Step 的 setter 如何推导小数位数精度推导发生在 InputNumber.razor.cs 中Step属性的 setter 内。当组件接收到 Step 的新值时会将其转换为decimal并借助CultureInfo.NumberFormat.NumberDecimalSeparator当前文化的小数点分隔符定位小数点的位置从而计算出小数位数set { _step value; NumberFormatInfo nfi CultureInfo.NumberFormat; var stepStr Convert.ToDecimal(_step).ToString(nfi); if (stepStr.IndexOf(nfi.NumberDecimalSeparator) 0) _decimalPlaces stepStr.Length - stepStr.IndexOf(nfi.NumberDecimalSeparator) - 1; else _decimalPlaces 0; }这段逻辑说明了几点关键事实整数 Step如 1、10转换后的字符串不包含小数点分隔符_decimalPlaces被置为0组件表现为纯整数输入框小数 Step如 0.1、0.25_decimalPlaces等于小数点后的字符数例如0.25→ 2 位小数依赖当前文化由于使用CultureInfo.NumberFormat来识别小数点不同区域设置如de-DE使用逗号也能被正确识别详见下文与文化设置的联动。三、数值变更时的精度收敛四舍五入的执行路径精度并不只是显示时截断而是真实作用于数值本身。当用户点击步进按钮、按方向键或输入后失焦最终都会进入ChangeValueAsync方法InputNumber.razor.csprivate async Task ChangeValueAsync(TValue value) { if (_greaterThanFunc(value, Max)) value Max; else if (_greaterThanFunc(Min, value)) value Min; if (_roundFunc null) { CurrentValue value; } else { if (Precision 0 || _decimalPlaces 0) { var round Precision 0 ? Precision : _decimalPlaces.Value; CurrentValue _roundFunc(value, round); } else { CurrentValue value; } } if (OnChange.HasDelegate) { await OnChange.InvokeAsync(value); } }整个流程包含三个步骤范围约束超出Max的值被钳制到Max低于Min的值被钳制到Min精度四舍五入对于float、double、decimal类型_roundFunc不为空只要Precision 0或_decimalPlaces 0就会对值执行Round(value, digits)回调通知随后触发OnChange回调。注意ChangeValueAsync中传给OnChange.InvokeAsync的是四舍五入后的值因此业务侧拿到的回调参数同样符合精度规则。Round 的底层实现四舍五入由InputNumberMath静态类承载InputNumberMath.cs为float、double、decimal及其可空版本分别提供了重载内部直接调用 .NET 标准的MathF.Round/Math.Round。以decimal为例public static decimal Round(decimal d, int decimals) { return Math.Round(d, decimals); }从构造函数可以确认_roundFunc仅在泛型参数为浮点类型时被编译生成InputNumber.razor.csif (_floatTypes.Contains(underlyingType)) { // 编译 Round 委托同时把 inputmode 切换为 decimal _roundFunc lambdaRound.Compile(); _inputNumberMode decimal; }其中_floatTypes定义为[typeof(float), typeof(double), typeof(decimal)]InputNumber.razor.cs。也就是说整数类型int、long等天然不需要小数精度处理只有浮点类型才走四舍五入路径。四、显示格式FormatValueAsString 中的精度格式化精度规则同样作用于输入框的显示。FormatValueAsStringInputNumber.razor.cs在渲染值时如果检测到Precision 0 || _decimalPlaces 0会使用 .NET 标准数字格式字符串n 精度位数进行格式化if (Precision 0 || _decimalPlaces 0) { var nN n (Precision 0 ? Precision : _decimalPlaces.Value); return _toStringFunc(value, nN); } return _toStringFunc(value, null);n0/n1/n2这类格式会输出千分位分隔符并固定小数位数例如在Step0.1时输入2失焦后显示为2.0并同步触发OnChange。同时底层input元素会直接透传step与inputmode属性InputNumber.razorinput rolespinbutton stepStep inputmode_inputNumberMode ... /对于浮点类型_inputNumberMode会被设为decimal移动端浏览器会据此弹出数字键盘改善小数输入体验。五、Precision 参数与 Step 的优先级除了 Step 自动推导组件还提供了显式控制精度的Precision参数默认值0InputNumber.razor.cs。两者的优先级关系在ChangeValueAsync与FormatValueAsString中完全一致当Precision 0时以Precision为准否则回退到 Step 推导出的_decimalPlaces。例如 Precision.razor 中显式指定 3 位小数AntDesign.InputNumber Precision3 Min-100 Max100 bind-ValuemyValue /输入1.2345失焦后会显示并保存为1.235四舍五入到 3 位。两种方式的取舍建议Step 推导适合步进粒度即精度的场景如价格增量 0.1、温度步长 0.5只需维护一个参数Precision 指定适合步进粒度与展示精度分离的场景例如步进 0.5 但统一保留 2 位小数或整数步进却要求显示.00的金额场景。六、测试用例精度行为的验证依据仓库中 InputNumberTests.razor 提供了与精度行为直接对应的自动化测试可作为理解预期行为的权威参考。1. 科学计数法形式的 Step 也能正确推导精度InputNumber_value_display_check_when_step_notation_is_scientific用例验证了Step0.00001的场景按向上方向键后输入框的值应显示为0.00001按当前文化的小数分隔符拼接证明0.00001这类极小步长也能正确推导出 5 位小数精度。2. Precision 的舍入与补零行为InputNumber_value_should_have_precision理论用例覆盖了Precision2下的三条规则输入期望显示说明11.00不足位数补零1.11.10小数不足位数补零0.12340.12超出位数四舍五入截断InputNumber_value_nullable_should_have_precision则验证了double?可空类型的相同行为包括0.1277 → 0.13的四舍五入进位。这些用例同时使用CultureInfo.InvariantCulture固定文化避免测试环境差异。七、与文化设置的联动精度推导依赖当前文化的数字格式NumberDecimalSeparator而组件的字符串解析与格式化则通过CultureInfo参数控制该参数继承自 AntInputComponentBase.cs默认值为CultureInfo.CurrentCulture[Parameter] public virtual CultureInfo CultureInfo { get; set; } CultureInfo.CurrentCulture;在 Server Side 部署中服务器与客户端的区域设置可能不一致官方文档Culture.md特别提示应显式设置CultureInfo以确保字符串能被正确解析。典型用法参考 Culture.razorAntDesign.InputNumber CultureInfoCI ValueChanged(double val)OnClickChange(val, 1) / code { private CultureInfo CI CultureInfo.GetCultureInfo(de-DE); }当CultureInfo使用de-DE时用户输入1,5逗号分隔会被正确解析为 1.5Step 的小数位数推导也会基于逗号识别保证展示与存储一致。八、实战要点小结综合文档、源码与测试在项目中使用带小数的 InputNumber 时建议遵循以下要点优先通过 Step 控制精度Step0.1同时定义步进粒度、显示精度与数值精度参数最少、行为最一致需要显式精度时使用 PrecisionPrecision的优先级高于 Step 推导值适合步进与精度分离的场景浮点类型才参与舍入int等整数类型的泛型参数不会生成 Round 逻辑精度规则主要作用于float、double、decimal及其可空版本注意 Server 端文化差异跨区域部署时显式传入CultureInfo防止小数点分隔符解析错乱合理搭配 Min/Max步进和输入都会先经范围钳制再四舍五入最终值必然落在[Min, Max]内且符合精度规则。如需进一步了解组件支持的全部数值类型sbyte、byte、short、ushort、int、uint、long、ulong、float、double、decimal及其可空形式与完整 API可查阅组件入口文档 index.zh-CN.md。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐Ant Design InputNumber 小数模式实战用 step 的小数位数控制 value 精度Ant Design InputNumber 小数模式实战用 step 的小数位数控制 value 精度 摘要导读 本指南以 Ant Design 数字输入UI组件前端设计系统SMPL-X模型加载实战指南3步跑通三维人体、手部与表情的完整配置SMPL X模型加载实战指南3步跑通三维人体、手部与表情的完整配置 做三维人体重建最让人抓狂的不是算法有多复杂而是卡在第一步—— 模型加载 。你翻遍文档UI组件前端设计系统Ant Design InputNumber stringMode 实战指南用字符值模式实现高精度小数输入Ant Design InputNumber stringMode 实战指南用字符值模式实现高精度小数输入 stringMode 是 Ant Design I前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考