HarmonyOS全栈开发指南：从入门到精通，构建万物智联的未来生态（四）
四、UI开发体系
16. ArkUI声明式语法与类Web开发范式
4.1.1 ArkUI简介
ArkUI是HarmonyOS提供的一套用于构建跨平台用户界面的声明式开发框架。它借鉴了现代前端框架的设计理念，通过声明式的方式描述UI界面，使得开发者可以更加专注于业务逻辑的实现，而不是UI的渲染细节。ArkUI支持两种开发范式：eTS（Enhanced TypeScript）和JS UI框架，其中eTS是推荐的开发范式，它提供了更强的类型检查和更好的开发体验。
4.1.2 声明式语法基础
声明式语法的核心思想是“描述状态，而不是操作”。在ArkUI中，开发者通过描述UI组件的状态和属性，框架会自动根据这些状态渲染出相应的UI界面。例如，定义一个简单的按钮组件：
typescript复制代码
@Entry | |
@Component | |
struct MyButton { | |
build() { | |
Button('Click Me') | |
.onClick(() => { | |
console.log('Button clicked!'); | |
}); | |
} | |
} |
在这个例子中，Button组件的文本和点击事件处理函数都是通过声明式语法定义的。当按钮被点击时，框架会自动调用指定的处理函数。
4.1.3 类Web开发范式
ArkUI借鉴了Web开发中的许多概念，如组件、样式、事件等。这使得有过Web开发经验的开发者可以更快地上手ArkUI。
- 组件：ArkUI提供了丰富的内置组件，如文本、按钮、列表、图片等。开发者可以通过组合这些组件来构建复杂的UI界面。
- 样式：ArkUI支持通过CSS样式表或内联样式来定义组件的样式。样式可以包括颜色、字体、边距、填充等。
- 事件：ArkUI支持事件监听和处理机制，如点击事件、触摸事件、键盘事件等。开发者可以通过监听这些事件来实现用户交互。
4.1.4 实战案例：构建一个简单的待办事项列表
下面是一个使用ArkUI构建简单待办事项列表的示例：
typescript复制代码
@Entry | |
@Component | |
struct TodoList { | |
private todos: string[] = ['Buy groceries', 'Do laundry', 'Call mom']; | |
@Builder todoItem(todo: string) { | |
Row() { | |
Text(todo) | |
.width('100%') | |
.textAlign(TextAlign.Left); | |
Button('Delete') | |
.onClick(() => { | |
this.todos = this.todos.filter(item => item !== todo); | |
}); | |
}.padding(10); | |
} | |
build() { | |
List({ space: 20 }) { | |
this.todos.forEach(todo => { | |
this.todoItem(todo); | |
}); | |
} | |
} | |
} |
在这个例子中，我们定义了一个TodoList组件，它包含一个待办事项列表。每个待办事项都是一个Row组件，包含一个Text组件显示待办事项文本和一个Button组件用于删除该待办事项。当用户点击删除按钮时，框架会自动调用处理函数从列表中移除该待办事项。
4.1.5 小结
ArkUI的声明式语法和类Web开发范式使得构建跨平台用户界面变得更加简单和高效。通过声明式语法，开发者可以更加专注于业务逻辑的实现；而类Web的开发范式则降低了学习成本，使得有过Web开发经验的开发者可以快速上手ArkUI。在实际开发中，开发者可以结合使用内置组件、样式和事件来构建复杂的UI界面。
17. 布局系统：Flex/Grid/Stack布局实战
4.2.1 Flex布局
Flex布局是一种一维布局模型，它允许容器内的项目能够灵活地伸缩以最佳方式填充可用空间。在ArkUI中，Flex布局是通过Flex容器组件实现的。
- 容器属性：
direction（主轴方向）、justify-content（主轴对齐方式）、align-items（交叉轴对齐方式）、wrap（换行策略）等。 - 项目属性：
flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础大小）等。
实战案例：构建一个水平滚动的图片轮播组件。
typescript复制代码
@Component | |
struct ImageCarousel { | |
private images: string[] = [ | |
'image1.jpg', 'image2.jpg', 'image3.jpg' | |
]; | |
build() { | |
Scroll({ scrollDirection: ScrollDirection.Horizontal }) { | |
Flex({ justifyContent: FlexAlign.SpaceBetween }) { | |
this.images.forEach(image => { | |
Image(image).objectFit(ImageFit.Cover).width('300px').height('200px'); | |
}); | |
} | |
} | |
} | |
} |
4.2.2 Grid布局
Grid布局是一种二维布局模型，它允许开发者将容器划分为网格区域，并将项目放置在这些区域中。在ArkUI中，Grid布局是通过Grid容器组件实现的。
- 容器属性：
template-columns（定义列大小）、template-rows（定义行大小）、gap（网格间距）等。 - 项目属性：
grid-column（指定项目所在的列）、grid-row（指定项目所在的行）等。
实战案例：构建一个产品展示网格。
typescript复制代码
@Component | |
struct ProductGrid { | |
private products: any[] = [ | |
{ name: 'Product 1', image: 'product1.jpg' }, | |
{ name: 'Product 2', image: 'product2.jpg' }, | |
// ... more products | |
]; | |
build() { | |
Grid({ | |
templateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', | |
gap: '20px' | |
}) { | |
this.products.forEach(product => { | |
Column() { | |
Image(product.image).objectFit(ImageFit.Cover).width('100%').height('200px'); | |
Text(product.name).fontSize(16).textAlign(TextAlign.Center).padding({ top: 10 }); | |
}.padding(10).border({ width: 1, color: '#ddd' }); | |
}); | |
} | |
} | |
} |
4.2.3 Stack布局
Stack布局是一种堆叠布局模型，它允许开发者将项目堆叠在一起。在ArkUI中，Stack布局是通过Stack容器组件实现的。
- 容器属性：无特定属性，但可以通过子组件的
alignment属性来控制对齐方式。 - 项目属性：
alignment（对齐方式）、margin（外边距）等。
实战案例：构建一个带有浮动按钮的卡片组件。
typescript复制代码
@Component | |
struct CardWithFAB { | |
build() { | |
Stack() { | |
Column() { | |
Text('Card Title').fontSize(24).textAlign(TextAlign.Center).padding({ top: 20, bottom: 10 }); | |
Text('Card Content').fontSize(16).textAlign(TextAlign.Center).padding({ bottom: 20 }); | |
}.width('100%').backgroundColor('#fff').borderRadius(10).boxShadow('0 4px 8px rgba(0,0,0,0.1)'); | |
Button('FAB') | |
.backgroundColor('#ff5722') | |
.color('#fff') | |
.width('56px').height('56px') | |
.borderRadius('50%') | |
.position({ bottom: '20px', right: '20px' }) | |
.onClick(() => { | |
console.log('FAB clicked!'); | |
}); | |
} | |
} | |
} |
4.2.4 小结
ArkUI提供了Flex、Grid和Stack三种布局模型，它们分别适用于一维、二维和堆叠布局场景。通过合理使用这些布局模型，开发者可以构建出丰富多样的UI界面。在实际开发中，开发者需要根据具体需求选择合适的布局模型，并结合容器属性和项目属性来实现所需的布局效果。