📚 Getting Started with HMOS Next: Using Basic ArkTS Components (Button, Text, Image)
Introduction
ArkTS is a declarative user interface language built with TypeScript. If you’re new to ArkTS, knowing how to use basic elements like buttons, text, and images is a good starting point. This article will cover how to use these basic elements and create a small perfume project using these components.
📍 Text Component
The following attributions are supported: width, height, size, padding, margin, layoutWeight, constraintSize, textAlign, textOverflow, maxLines, lineHeight, decoration, baselineOffset, letterSpacing, minFontSize, maxFontSize, fontColor, fontSize, fontWeight. For more, check this link.
📍 Image Component
The Image component is usually used to display images in applications. It supports images in PNG, JPG, JPEG, BMP, SVG, WEBP, GIF, or HEIF format from the following data sources: PixelMap, ResourceStr, or DrawableDescriptor. The ohos.permission.INTERNET permission is required to use online images. In addition to the universal attributes, the following attributes are supported: alt, objectFit, fillColor, renderMode, and autoResize. For more, visit this link.
📍 Button Component
It creates a button based on text content. In this case, the component cannot contain child components. In addition to the universal attributes, the following attributes are supported: type, fontSize, fontColor, fontWeight, buttonStyle, and controlSize. For more, visit this link.
We’ve learned the text, image, and button components. Now, let’s use these components and practice together.
SDK Version: 5.0.2(14)
Get Merve Yönetci’s stories in your inbox
Join Medium for free to get updates from this writer.
🎯 Create a project when selecting the Empty Ability on DevEco Studio.
🎯 Give a name to your project and select the device types. Then click on the Finish button.
🎯 Create a text named Welcome to HarmonyOS Next.
🎯 Find an image, copy it, and paste it in the path of \entry\src\main\resources\base\media
🎯 Create a button named Click Me.
🎯 Use the Column to see the components vertically, justifyContent to center, and backgroundColor to give a background color.
To run the code, select the previewer and click the run button.
✨ Result of the code:
Conclusion
This Perfume App provides an example of user interface design and interaction by showing how to create a basic app using basic ArkTS components such as Image, Text, and Button on the HarmonyOS Next platform. Through this app, developers can gain insight into the structure, style, and functionality of ArkTS-based apps while exploring the potential of HarmonyOS Next.
