找人做网站毕业设计四川省营山县西城建筑公司网站

找人做网站毕业设计,四川省营山县西城建筑公司网站,基木鱼建站,宁波设计公司排行榜视频演示地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目录 概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结 概述 NumberInput 是控件库中专用于数字输入的组件#xff0c;支持步进器、范围限制、精度控制等功能#…视频演示地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目录概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结概述NumberInput是控件库中专用于数字输入的组件支持步进器、范围限制、精度控制等功能适用于数量输入、价格输入、百分比输入等需要精确数字控制的场景。设计理念数字输入框采用精确易用设计具有以下特点步进控制支持通过按钮快速增减数值范围限制支持设置最小值和最大值精度控制支持设置小数位数智能验证自动验证和修正输入值品牌标识左下角自动包含品牌标识圆圈红字PC主题统一所有样式配置都在代码中方便定制适用场景数量输入商品数量、库存数量等价格输入商品价格、金额等百分比输入折扣、比例等参数设置各种数值参数配置特性✨ 核心特性✅步进器按钮支持通过 /- 按钮快速增减数值✅范围限制支持设置最小值和最大值✅步进值支持自定义步进值如每次增减5✅精度控制支持设置小数位数0-10位✅智能验证自动验证和修正输入值✅标签和提示支持标签、提示文本、错误提示✅多种尺寸支持 small、medium、large 三种尺寸✅状态管理支持禁用、只读、必填等状态✅品牌标识自动包含左下角品牌标识✅主题配置所有样式都可通过代码配置 视觉特点正常状态白色背景 灰色边框 步进器按钮错误状态红色边框 红色错误提示禁用状态灰色背景 灰色文字 灰色边框 禁用按钮只读状态正常样式但不可编辑快速开始基础用法import{NumberInput}from../components/baseEntry Component struct MyPage{Statenumber:number0build(){Column({space:20}){// 基础数字输入框NumberInput({value:$number,placeholder:请输入数字})// 带标签的数字输入框NumberInput({value:$number,placeholder:请输入数量,label:数量})// 带范围限制的数字输入框NumberInput({value:$number,placeholder:请输入0-100之间的数字,label:百分比,min:0,max:100})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}关于双向绑定NumberInput使用Link实现双向绑定需要使用$variableName语法Statenumber:number0NumberInput({value:$number// 使用 $ 创建双向绑定})API 参考Props属性名类型默认值说明valueLink number-数字值必需双向绑定placeholderstring请输入数字占位符文本labelstring标签文本hintstring提示文本显示在输入框下方errorMessagestring错误提示文本优先级高于 hintinputSizesmall | medium | largemedium输入框尺寸disabledbooleanfalse是否禁用readonlybooleanfalse是否只读requiredbooleanfalse是否必填minnumberNumber.NEGATIVE_INFINITY最小值maxnumberNumber.POSITIVE_INFINITY最大值stepnumber1步进值precisionnumber0精度小数位数0-10showStepperbooleantrue是否显示步进器按钮showBrandbooleantrue是否显示品牌标识inputWidthstring | number100%输入框宽度尺寸规格尺寸高度字体大小按钮大小内边距左右small48vp14vp24vp12vpmedium60vp16vp28vp14vplarge72vp18vp32vp16vp使用示例1. 基础数字输入框Entry Component struct NumberExample1{Statenumber:number0build(){Column({space:15}){NumberInput({value:$number,placeholder:请输入数字})Text(当前值${this.number}).fontSize(14).fontColor(#666)}.width(100%).padding(20)}}2. 带标签和提示Entry Component struct NumberExample2{Statenumber:number0build(){Column({space:15}){NumberInput({value:$number,placeholder:请输入数量,label:数量,hint:请输入1-100之间的数字})NumberInput({value:$number,placeholder:请输入价格,label:价格,errorMessage:价格不能为负数})}.width(100%).padding(20)}}3. 范围限制Entry Component struct NumberExample3{State percentage:number50build(){Column({space:15}){NumberInput({value:$percentage,placeholder:请输入0-100之间的数字,label:百分比,min:0,max:100,hint:范围0-100})Text(当前值${this.percentage}%).fontSize(14).fontColor(#666)}.width(100%).padding(20)}}4. 步进值Entry Component struct NumberExample4{State quantity:number0build(){Column({space:15}){NumberInput({value:$quantity,placeholder:步进值为5,label:数量,step:5,min:0,max:100,hint:每次增减5})Text(当前值${this.quantity}步进5).fontSize(14).fontColor(#666)}.width(100%).padding(20)}}5. 精度控制Entry Component struct NumberExample5{State price:number0build(){Column({space:15}){NumberInput({value:$price,placeholder:保留2位小数,label:价格,precision:2,min:0,step:0.1,hint:保留2位小数})Text(当前价格¥${this.price.toFixed(2)}).fontSize(14).fontColor(#666)}.width(100%).padding(20)}}6. 不同尺寸Entry Component struct NumberExample6{State number1:number0State number2:number0State number3:number0build(){Column({space:15}){NumberInput({value:$number1,placeholder:小尺寸,inputSize:small})NumberInput({value:$number2,placeholder:中等尺寸默认,inputSize:medium})NumberInput({value:$number3,placeholder:大尺寸,inputSize:large})}.width(100%).padding(20)}}7. 必填和状态Entry Component struct NumberExample7{State number1:number0State number2:number100State number3:number200build(){Column({space:15}){NumberInput({value:$number1,placeholder:请输入数字,label:必填项,required:true})NumberInput({value:$number2,placeholder:请输入数字,label:禁用状态,disabled:true})NumberInput({value:$number3,placeholder:请输入数字,label:只读状态,readonly:true})}.width(100%).padding(20)}}8. 隐藏步进器Entry Component struct NumberExample8{Statenumber:number0build(){Column({space:15}){NumberInput({value:$number,placeholder:不显示步进器按钮,label:数字,showStepper:false})Text(提示隐藏步进器后只能通过键盘输入).fontSize(14).fontColor(#666)}.width(100%).padding(20)}}9. 商品数量选择器Entry Component struct ProductQuantity{State quantity:number1State price:number99.99build(){Column({space:20}){Text(商品信息).fontSize(24).fontWeight(FontWeight.Bold)NumberInput({value:$quantity,placeholder:请输入数量,label:数量,min:1,max:999,step:1,hint:范围1-999})NumberInput({value:$price,placeholder:请输入价格,label:单价,precision:2,min:0,step:0.01,hint:保留2位小数})Text(总价¥${(this.quantity*this.price).toFixed(2)}).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#007AFF)}.width(100%).padding(30)}}10. 参数配置表单Entry Component struct ConfigForm{State width:number100State height:number100State opacity:number100State rotation:number0build(){Column({space:20}){Text(参数配置).fontSize(24).fontWeight(FontWeight.Bold)NumberInput({value:$width,placeholder:请输入宽度,label:宽度,min:0,max:1000,step:1,required:true})NumberInput({value:$height,placeholder:请输入高度,label:高度,min:0,max:1000,step:1,required:true})NumberInput({value:$opacity,placeholder:请输入透明度,label:透明度,min:0,max:100,step:1,hint:范围0-100})NumberInput({value:$rotation,placeholder:请输入旋转角度,label:旋转角度,min:0,max:360,step:1,precision:0,hint:范围0-360度})}.width(100%).padding(30)}}主题配置NumberInput 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改默认颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主色影响聚焦状态的边框颜色ComponentTheme.PRIMARY_COLOR#007AFF// 修改错误色影响错误状态的边框和提示颜色ComponentTheme.ERROR_COLOR#FF3B30// 修改边框颜色ComponentTheme.BORDER_COLOR#E5E5E5// 修改圆角ComponentTheme.BORDER_RADIUS8批量配置import{ComponentTheme}from../theme/ComponentTheme// 使用 setTheme 方法批量配置ComponentTheme.setTheme({primaryColor:#007AFF,errorColor:#FF3B30,borderRadius:8,spacing:16})最佳实践1. 尺寸选择推荐根据使用场景选择尺寸small用于紧凑空间、表格内输入medium默认尺寸适用于大多数场景large用于重要输入或大屏幕显示2. 范围限制设置合理范围根据业务需求设置min和max提供提示信息使用hint说明范围要求自动修正超出范围的值会自动修正到边界值3. 步进值设置整数步进step: 1适用于数量、计数等小数步进step: 0.1或step: 0.01适用于价格、百分比等自定义步进根据业务需求设置合适的步进值4. 精度控制整数precision: 0适用于数量、计数等价格precision: 2适用于金额、价格等百分比precision: 1或precision: 2适用于比例、折扣等5. 步进器按钮默认开启showStepper: true方便快速调整数值特殊场景可以关闭步进器只允许键盘输入禁用状态禁用时步进器按钮也会自动禁用6. 验证和提示实时验证输入值会自动验证和修正清晰提示使用hint提供输入要求说明错误提示使用errorMessage显示明确的错误信息常见问题Q1: 如何设置无限制范围A: 不设置min和max或使用默认值NumberInput({value:$number,// 不设置 min 和 max默认无限制})Q2: 如何禁用步进器按钮A: 设置showStepper: falseNumberInput({value:$number,showStepper:false})Q3: 如何设置小数精度A: 使用precision属性NumberInput({value:$price,precision:2// 保留2位小数})Q4: 步进值如何设置A: 使用step属性NumberInput({value:$number,step:5// 每次增减5})Q5: 如何设置输入框宽度A: 使用inputWidth属性NumberInput({value:$number,inputWidth:300// 固定宽度})NumberInput({value:$number,inputWidth:100%// 百分比宽度})Q6: 输入无效值会怎样A: 输入无效值如非数字字符时输入过程中允许输入如负号、小数点失去焦点时自动修正为有效值如果输入完全无效会恢复为当前值Q7: 如何实现自定义验证A: 可以在外部监听value变化进行自定义验证Statenumber:number0State errorMessage:stringNumberInput({value:$number,errorMessage:this.errorMessage})// 在 aboutToUpdate 或其他地方验证aboutToUpdate(){if(this.number0){this.errorMessage不能为负数}else{this.errorMessage}}总结NumberInput 是控件库中专用于数字输入的组件具有以下核心特性步进控制支持通过按钮快速增减数值范围限制支持设置最小值和最大值精度控制支持设置小数位数智能验证自动验证和修正输入值易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用$variableName创建双向绑定✅ 使用min和max设置范围限制✅ 使用step设置步进值✅ 使用precision设置小数精度✅ 使用showStepper控制步进器显示✅ 使用label属性添加标签✅ 使用hint或errorMessage显示提示✅ 使用inputSize属性选择合适尺寸✅ 通过ComponentTheme自定义全局样式适用场景数量输入价格输入百分比输入参数设置下一篇预告SearchInput搜索输入框详解本文档属于《鸿蒙PC UI控件库开发系列文章》第9篇