基础 UI 组件 ArkUI 提供了多种基础 UI 组件，以下是常用的组件及其功能： 1. 文本组件 (Text) 用于显示文本内容。 支持设置字体大小、颜色、对齐方式等属性。 typescript 复制 Text('Hello, HarmonyOS!') .fontSize(20) .fontColor('#000000') .textAlign(TextAlign.Center); 2. 按钮组件 (Button) Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。 Button有四种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）、普通按钮（Normal）和圆角矩形按钮（ROUNDED_RECTANGLE），通过type进行设置。 囊按钮（默认类型）。 此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(40) 圆形按钮。 此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。 Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(90) 普通按钮。 此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。 Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90) .height(40) 圆角矩形按钮 当controlSize为NORMAL时，默认圆角大小为20vp，controlSize为SMALL时，圆角大小为14vp，支持通过borderRadius属性重新设置圆角。 Button('Disable', { type: ButtonType.ROUNDED_RECTANGLE, stateEffect: true }) .backgroundColor(0x317aff) .width(90) .height(40) 3. 图片组件 (Image) @Entry
@Component
struct TupianPage {
@State message: string = 'Hello World';
build() {
Column() {
/**
* 图片组件
* 1.加载网络图片
* 2.加载本地图片
* 加载图片时，设置宽度或者高度可以等比较缩放
*/
//加载网络图片
//在本地预览器中，使用的是本地网络
//在本机模拟器中，需要添加网络权限才能访问网络
//在module.json5中，添加配置
/**
* "requestPermissions": [{
"name": "ohos.permission.INTERNET"
}]
*/
Image('https://img1.baidu.com/it/u=2308020877,2573122778&fm=253&fmt=auto&app=138&f=JPEG?w=1066&h=800')
.width('60%')
Divider().strokeWidth(2)
//加载本地图片
//本地图片一般存储在resources/rawfile下面
//在$rawfile中，输入图片的相对路径,resources/rawfile是根目录
Image($rawfile('rose.png'))
.width('60%')
Divider().strokeWidth(2)
Image($r('app.media.jing'))
.width('60%')
/**
* 如果需要启动其他的页面文件，需要在EntryAbility.ets中，修改
*windowStage.loadContent('xxx')中的访问路径。
*
*/
}
.height('100%')
.width('100%')
}
} 4. 输入框组件 (TextInput) TextInput有以下类型可选择：Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式、带URL的输入模式。通过type属性进行设置： 5. 滑动条组件 (Slider) 用于选择一个范围内的值。 支持设置最小值、最大值和当前值。 typescript 复制 Slider({ min: 0, max: 100, value: 50 }) .width('80%') .margin(10); 6. 复选框组件 (Toggle) Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态。 创建包含子组件的Toggle。 当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上。 Toggle({ type: ToggleType.Button, isOn: false }) { Text('status button') .fontColor('#182431') .fontSize(12) }.width(100) Toggle({ type: ToggleType.Button, isOn: true }) { Text('status button') .fontColor('#182431') .fontSize(12) }.width(100) 除支持通用事件外，Toggle还用于选中和取消选中后触发某些操作，可以绑定onChange事件来响应操作后的自定义行为。 // xxx.ets import { promptAction } from '@kit.ArkUI'; @Entry @Component struct ToggleExample { @State BOnSt: promptAction.ShowToastOptions = { 'message': 'Bluetooth is on.' }; @State BOffSt: promptAction.ShowToastOptions = { 'message': 'Bluetooth is off.' }; build() { Column() { Row() { Text("Bluetooth Mode") .height(50) .fontSize(16) } Row() { Text("Bluetooth") .height(50) .padding({ left: 10 }) .fontSize(16) .textAlign(TextAlign.Start) .backgroundColor(0xFFFFFF) Toggle({ type: ToggleType.Switch }) .margin({ left: 200, right: 10 }) .onChange((isOn: boolean) => { if (isOn) { this.getUIContext().getPromptAction().showToast(this.BOnSt); } else { this.getUIContext().getPromptAction().showToast(this.BOffSt); } }) } .backgroundColor(0xFFFFFF) } .padding(10) .backgroundColor(0xDCDCDC) .width('100%') .height('100%') } } |
