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