27. Harmonyos Next仿uv-ui 组件NumberBox 步进器组件禁用状态

打印 上一主题 下一主题

主题 1000|帖子 1000|积分 3000

温馨提示:本篇博客的具体代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!
  


  
1. 组件先容

NumberBox步进器组件提供了多种禁用状态的设置,包罗整体禁用、输入框禁用和长按禁用,可以根据不同场景的需求来控制用户的交互举动。本文将具体先容如何在HarmonyOS NEXT中设置和使用NumberBox步进器的禁用状态功能。
2. 效果展示


3. 禁用状态设置

3.1 整体禁用

通过disabled属性可以禁用整个NumberBox组件:
  1. NumberBox({
  2.   value: this.value,
  3.   disabled: true,  // 禁用整个组件
  4.   onChange: (value: number) => {
  5.     this.value = value;
  6.   }
  7. })
复制代码
3.2 输入框禁用

通过disableInput属性可以只禁用输入框,保存按钮的功能:
  1. NumberBox({
  2.   value: this.value,
  3.   disableInput: true,  // 禁用输入框
  4.   onChange: (value: number) => {
  5.     this.value = value;
  6.   }
  7. })
复制代码
3.3 长按禁用

通过disableLongPress属性可以禁用长按增减功能:
  1. NumberBox({
  2.   value: this.value,
  3.   disableLongPress: true,  // 禁用长按功能
  4.   onChange: (value: number) => {
  5.     this.value = value;
  6.   }
  7. })
复制代码
4. 完备示例代码

下面是一个展示不同禁用状态的完备示例:
  1. // NumberBoxDisabledDemo.ets
  2. // NumberBox步进器禁用状态示例
  3. import { NumberBox } from '../components/NumberBox';
  4. @Entry
  5. @Component
  6. struct NumberBoxDisabledDemo {
  7.   @State value1: number = 5;  // 正常状态
  8.   @State value2: number = 5;  // 整体禁用
  9.   @State value3: number = 5;  // 输入框禁用
  10.   @State value4: number = 5;  // 长按禁用
  11.   build() {
  12.     Column() {
  13.       // 标题
  14.       Text('NumberBox 禁用状态示例')
  15.         .fontSize(20)
  16.         .fontWeight(FontWeight.Bold)
  17.         .margin({ bottom: 20 })
  18.       
  19.       // 正常状态
  20.       Row() {
  21.         Text('正常状态')
  22.           .width('40%')
  23.           .fontSize(16)
  24.         NumberBox({
  25.           value: this.value1,
  26.           onChange: (value: number) => {
  27.             this.value1 = value;
  28.           }
  29.         })
  30.       }
  31.       .width('100%')
  32.       .justifyContent(FlexAlign.SpaceBetween)
  33.       .alignItems(VerticalAlign.Center)
  34.       .padding(10)
  35.       
  36.       // 整体禁用
  37.       Row() {
  38.         Text('整体禁用')
  39.           .width('40%')
  40.           .fontSize(16)
  41.         NumberBox({
  42.           value: this.value2,
  43.           disabled: true,  // 禁用整个组件
  44.           onChange: (value: number) => {
  45.             this.value2 = value;
  46.           }
  47.         })
  48.       }
  49.       .width('100%')
  50.       .justifyContent(FlexAlign.SpaceBetween)
  51.       .alignItems(VerticalAlign.Center)
  52.       .padding(10)
  53.       
  54.       // 输入框禁用
  55.       Row() {
  56.         Text('输入框禁用')
  57.           .width('40%')
  58.           .fontSize(16)
  59.         NumberBox({
  60.           value: this.value3,
  61.           disableInput: true,  // 禁用输入框
  62.           onChange: (value: number) => {
  63.             this.value3 = value;
  64.           }
  65.         })
  66.       }
  67.       .width('100%')
  68.       .justifyContent(FlexAlign.SpaceBetween)
  69.       .alignItems(VerticalAlign.Center)
  70.       .padding(10)
  71.       
  72.       // 长按禁用
  73.       Row() {
  74.         Text('长按禁用')
  75.           .width('40%')
  76.           .fontSize(16)
  77.         NumberBox({
  78.           value: this.value4,
  79.           disableLongPress: true,  // 禁用长按功能
  80.           onChange: (value: number) => {
  81.             this.value4 = value;
  82.           }
  83.         })
  84.       }
  85.       .width('100%')
  86.       .justifyContent(FlexAlign.SpaceBetween)
  87.       .alignItems(VerticalAlign.Center)
  88.       .padding(10)
  89.       
  90.       // 显示当前值
  91.       Column() {
  92.         Text('当前值:')
  93.           .fontSize(16)
  94.           .fontWeight(FontWeight.Bold)
  95.           .margin({ top: 20, bottom: 10 })
  96.         
  97.         Text('正常状态值: ' + this.value1)
  98.           .fontSize(14)
  99.           .margin({ bottom: 5 })
  100.         
  101.         Text('整体禁用值: ' + this.value2)
  102.           .fontSize(14)
  103.           .margin({ bottom: 5 })
  104.         
  105.         Text('输入框禁用值: ' + this.value3)
  106.           .fontSize(14)
  107.           .margin({ bottom: 5 })
  108.         
  109.         Text('长按禁用值: ' + this.value4)
  110.           .fontSize(14)
  111.       }
  112.       .width('100%')
  113.       .alignItems(HorizontalAlign.Center)
  114.       .margin({ top: 20 })
  115.     }
  116.     .width('100%')
  117.     .padding(16)
  118.   }
  119. }
复制代码
5. 知识点讲解

5.1 禁用状态属性

NumberBox组件提供了三种禁用状态的属性:

  • disabled:禁用整个组件,包罗按钮和输入框。
  • disableInput:只禁用输入框,保存按钮功能。
  • disableLongPress:禁用长按增减功能,但保存点击功能。
5.2 禁用状态的样式处理

NumberBox组件会根据禁用状态自动调解UI样式:
  1. // 按钮禁用样式
  2. .opacity(this.disabled ? 0.5 : 1.0)
  3. .enabled(!this.disabled)
  4. // 输入框禁用样式
  5. .backgroundColor(this.disabled ? '#F5F7FA' : '#FFFFFF')
  6. .enabled(!this.disabled && !this.disableInput)
复制代码
5.3 禁用状态的交互处理


  • 整体禁用

    • 按钮变灰且不可点击
    • 输入框变灰且不可输入
    • 长按功能无效

  • 输入框禁用

    • 按钮正常工作
    • 输入框变灰且不可输入
    • 长按功能正常

  • 长按禁用

    • 按钮点击功能正常
    • 输入框正常工作
    • 长按时不会连续增减

5.4 禁用状态的应用场景

不同的禁用状态实用于不同的场景:

  • 整体禁用

    • 数据加载中
    • 权限不敷
    • 系统维护

  • 输入框禁用

    • 只允许通过按钮调解
    • 防止手动输入错误
    • 精确控制数值变化

  • 长按禁用

    • 必要精确控制的场景
    • 防止误操作
    • 特别业务限定

6. 总结

本文具体先容了NumberBox步进器组件的禁用状态功能。通过合理使用disabled、disableInput和disableLongPress属性,可以实现不同级别的交互控制,满意各种业务场景的需求。禁用状态不但表现在功能的限定上,还包罗视觉反馈的处理,为用户提供清晰的操作指引。
在现实应用中,应根据具体的业务需求选择合适的禁用状态,并注意提供得当的用户提示,以提升用户体验。同时,禁用状态的设置也应思量到整体的交互流程,确保应用的可用性和易用性。
在下一篇文章中,我们将先容NumberBox组件的样式定制功能,包罗如何自界说按钮颜色、图标和尺寸等。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

我可以不吃啊

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表