你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

前言

在鸿蒙操作系统（HarmonyOS）中，UI 控件（组件）是构建用户界面的基础。鸿蒙的 UI 控件包括常见的控件（如按钮、文本框、列表、图片等），它们被封装为组件，可以帮助开发者轻松地构建响应式、跨设备兼容的用户界面。

鸿蒙的 UI 框架主要基于 ArkUI，该框架支持声明式 UI 编程方式，并且为开发者提供了丰富的组件库。下面列出了鸿蒙系统中常用的 UI 控件和组件，并简要说明它们的用途和使用方法。

1. 文本控件 (VText)

VText 用于显示文本内容，支持多种文本样式、对齐方式和响应式布局。

示例：

import { VText } from '@ohos.ui.components';

export default {
  build() {
    return (
      <VText>Welcome to HarmonyOS!</VText>
    );
  }
};

2. 按钮控件 (VButton)

VButton 是一个常用的按钮组件，用于处理用户交互。按钮可以绑定点击事件，并触发回调。

示例：

import { VButton } from '@ohos.ui.components';

export default {
  methods: {
    onClick() {
      console.log('Button clicked!');
    },
  },
  build() {
    return (
      <VButton onClick={this.onClick}>Click Me</VButton>
    );
  }
};

3. 输入框控件 (VInput)

VInput 用于接收用户输入，通常用于表单中。它支持单行和多行输入，并可以配置占位符、最大长度等属性。

示例：

import { VInput } from '@ohos.ui.components';

export default {
  data() {
    return {
      userInput: '',
    };
  },
  build() {
    return (
      <VInput
        value={this.userInput}
        onInput={(e) => { this.userInput = e.target.value; }}
        placeholder="Enter something"
      />
    );
  }
};

4. 图片控件 (VImage)

VImage 用于显示图像，支持本地图片和网络图片的展示，能够自适应大小、缩放等。

示例：

import { VImage } from '@ohos.ui.components';

export default {
  build() {
    return (
      <VImage src="https://example.com/image.jpg" width="200" height="200" />
    );
  }
};

5. 列表控件 (VList)

VList 用于显示垂直或水平的列表，常用于展示一系列相同结构的数据项。它支持数据绑定、列表项渲染和事件处理。

示例：

import { VList, VText } from '@ohos.ui.components';

export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange'],
    };
  },
  build() {
    return (
      <VList>
        {this.items.map(item => (
          <VText>{item}</VText>
        ))}
      </VList>
    );
  }
};

6. 图片轮播控件 (VCarousel)

VCarousel 是一个图片轮播控件，通常用于展示一组图片的切换效果。支持自动播放、手动切换、切换动画等。

示例：

import { VCarousel, VImage } from '@ohos.ui.components';

export default {
  build() {
    return (
      <VCarousel autoPlay={true} interval={2000}>
        <VImage src="image1.jpg" />
        <VImage src="image2.jpg" />
        <VImage src="image3.jpg" />
      </VCarousel>
    );
  }
};

7. 进度条控件 (VProgress)

VProgress 用于显示当前进度，常用于上传、下载或任务执行的进度指示。

示例：

import { VProgress } from '@ohos.ui.components';

export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    increaseProgress() {
      if (this.progress < 100) {
        this.progress += 10;
      }
    },
  },
  build() {
    return (
      <div>
        <VProgress value={this.progress} />
        <VButton onClick={this.increaseProgress}>Increase Progress</VButton>
      </div>
    );
  }
};

8. 切换控件 (VSwitch)

VSwitch 是一个开关控件，通常用于布尔值的切换，例如开启或关闭某个设置。

示例：

import { VSwitch } from '@ohos.ui.components';

export default {
  data() {
    return {
      isSwitchOn: false,
    };
  },
  methods: {
    toggleSwitch(value) {
      this.isSwitchOn = value;
    },
  },
  build() {
    return (
      <VSwitch
        checked={this.isSwitchOn}
        onChange={this.toggleSwitch}
      />
    );
  }
};

9. 日期选择控件 (VDatePicker)

VDatePicker 用于让用户选择日期，支持日期格式化和样式定制。适用于表单输入、日历选择等场景。

示例：

import { VDatePicker } from '@ohos.ui.components';

export default {
  data() {
    return {
      selectedDate: null,
    };
  },
  build() {
    return (
      <VDatePicker
        value={this.selectedDate}
        onChange={(date) => { this.selectedDate = date; }}
      />
    );
  }
};

10. 弹出框控件 (VDialog)

VDialog 用于弹出模态框，通常用于展示提示信息、警告、确认等交互。

示例：

import { VDialog, VButton } from '@ohos.ui.components';

export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
  build() {
    return (
      <div>
        <VButton onClick={this.showDialog}>Show Dialog</VButton>
        <VDialog visible={this.dialogVisible} onClose={this.closeDialog}>
          <VText>Are you sure you want to proceed?</VText>
          <VButton onClick={this.closeDialog}>Cancel</VButton>
          <VButton onClick={this.closeDialog}>OK</VButton>
        </VDialog>
      </div>
    );
  }
};

11. 滑动条控件 (VSlider)

VSlider 是一个滑动条组件，常用于调节数值的输入，比如音量、亮度等。

示例：

import { VSlider } from '@ohos.ui.components';

export default {
  data() {
    return {
      sliderValue: 50,
    };
  },
  build() {
    return (
      <VSlider value={this.sliderValue} min={0} max={100} step={1} />
    );
  }
};

12. 总结

鸿蒙操作系统（HarmonyOS）提供了丰富的 UI 控件，可以帮助开发者轻松构建跨设备适配、响应式的用户界面。常用的控件包括文本控件、按钮控件、输入框控件、列表控件、图片控件、进度条、切换控件、弹出框等。通过 ArkUI 提供的组件，开发者可以使用声明式的方式来创建和管理界面，快速实现应用的开发。

鸿蒙的 UI 控件不仅功能丰富，而且可以自动适配不同设备的屏幕尺寸和分辨率，提供一致的用户体验，支持多设备协同运行。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！