四、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界面。在实际开发中，开发者需要根据具体需求选择合适的布局模型，并结合容器属性和项目属性来实现所需的布局效果。