鸿蒙 ArkUI - 常用组件和布局

目录

一、组件

1.按钮

2.单选框

3.切换按钮

4.进度条

5.文本

6.文本输入框

二、布局方式

1.线性布局

2.层叠布局

3.弹性布局

4.网格布局

---

一、组件

        ArkUI有丰富的内置组件，包括文本、按钮、图片、进度条、输入框、单选框、多选框等。我们还可以将基础组件组合起来，形成自定义组件。

1.按钮

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

2.单选框

Radio({ value: 'Radio1', group: 'radioGroup' })
  .checked(false)
Radio({ value: 'Radio2', group: 'radioGroup' })
  .checked(true)

3.切换按钮

Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Checkbox, isOn: true })

4.进度条

 

Progress({ value: 24, total: 100, type: ProgressType.Linear }) 
// 创建一个进度总长为100，初始进度值为24的线性进度条

5.文本

 

Text("你好").fontSize(50).fontWeight(FontWeight.Bold)

6.文本输入框

TextInput()

二、布局方式

1.线性布局

Column容器

Row容器

示例如下：

2.层叠布局

3.弹性布局

4.网格布局