企业官网建设流程全解析

模块导入

import { CounterType, CounterComponent } from '@kit.ArkUI';

核心参数说明

枚举类型

CounterType.LIST：标识为列表型计数器，竖向布局，适配条目配置类场景。

numberOptions 配置项

完整代码

import { CounterType, CounterComponent } from '@kit.ArkUI'; @Entry @Component struct ListCounterExample { build() { Column() { // 列表型Counter CounterComponent({ options: { type: CounterType.LIST, numberOptions: { label: '价格', min: 0, value: 2, max: 10 } } }) } } }

运行效果如图：

代码逻辑解析

1. 导入计数器核心枚举与组件；
2. 在CounterComponent中通过options配置计数器类型；
3. 指定type: CounterType.LIST声明为列表型样式；
4. 通过numberOptions设置标签文案、最小值0、初始值2、最大值10；
5. 组件自动渲染左侧标签 + 右侧加减按钮列表布局，自带数值越界保护。

运行效果

1. 整体为上下列表布局，左侧显示「价格」标签；
2. 右侧自带减号、数值显示、加号标准控件；
3. 点击加减按钮可在 0~10 之间调节，超出边界自动禁用对应按钮；
4. 整体样式跟随系统原生UI，适配深浅色模式。

总结

列表型Counter适合配置类、条目式数值选择场景，布局规整自带上下结构。只需配置类型和数值区间即可直接使用，无需自定义加减逻辑。组件不建议直接设置通用属性，避免节点异常样式失效。仅支持API12+与Stage模型，适合购物、设置、表单等数值调节场景快速落地。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力