边玩边学鸿蒙影视App开发之ArkUI基础组件与布局 #跟着猫哥学鸿蒙
课程链接地址：https://blog.csdn.net/yyz_1987/article/details/153418477
ArkUI是鸿蒙系统提供的一套声明式UI开发框架，它为开发者提供了简洁的UI信息语法、丰富的UI组件以及实时界面预览工具，极大地提升了HarmonyOS应用界面开发效率。通过ArkUI，开发者只需使用一套ArkTS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验。
ArkUI的核心优势
-
声明式UI开发范式：ArkUI采用声明式UI开发方式，让开发者能够以更直观、更简洁的方式描述UI界面，降低了UI开发的复杂度。
-
高效的UI更新机制：ArkUI通过编译器生成特定函数，将UI组件更新和数据变更进行细粒度绑定，实现了从组件树对比升级为单节点函数式更新，大幅提升了UI渲染性能。
-
逻辑与UI分离：ArkUI通过数据双向绑定机制，将页面变化逻辑简化为两个步骤，显著降低了跨端迁移和协同开发的代码量。
-
丰富的扩展能力：ArkUI框架提供了基于XComponent组件的C++自绘制引擎接入能力和基于Web组件的HTML5/Web渲染能力，满足了游戏、相机、地图、浏览器等复杂应用场景的开发需求。
二、常用UI组件详解
1. 基础展示组件
1.1 Text组件
Text组件是用于显示文本的基础组件，在鸿蒙应用开发中使用频率极高。
Text('Hello, OpenHarmony')
.fontSize(20)
.fontColor(Color.Black)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
在电影详情页中，Text组件用于显示电影标题、年份、类型等信息。
1.2 Image组件
Image组件用于显示图片，支持多种图片格式和缩放模式。
Image('https://example.com/image.jpg')
.objectFit(ImageFit.Cover) // 图片缩放模式
.width(200)
.height(300)
.borderRadius(10)
在"爱影家"APP中，Image组件用于显示电影海报、轮播图等图片内容。
1.3 Rating组件
Rating组件用于展示评分信息，在电影详情页中常用于显示电影评分。
Rating({
rating: 4.5,
maxRating: 5,
numStars: 5,
starStyle: {
starColor: Color.Yellow
}
})
2. 交互组件
2.1 Button组件
Button组件用于创建可点击的按钮，用户可以通过点击按钮执行特定操作。
Button('播放', { type: ButtonType.Capsule })
.onClick(() => {
// 处理点击事件
this.navigateToPlayerPage();
})
.backgroundColor(Color.Red)
.fontColor(Color.White)
.padding({ left: 20, right: 20 })
在电影详情页中，Button组件用于创建"播放"按钮，点击后跳转到视频播放页面。
2.2 Badge组件
Badge组件用于在某个组件的右上角显示标记，通常用于展示数量或状态。
Badge({
count: 100,
maxCount: 999,
position: BadgePosition.RightTop,
style: { badgeSize: 20, badgeColor: Color.Red }
}) {
Image('icon.png')
.width(40)
.height(40)
}
在电影详情页中，Badge组件用于展示"想看"和"看过"的数量。
2.3 SymbolSpan组件
SymbolSpan组件用于在文本中嵌入图标，增强文本的表现力。
Text() {
SymbolSpan($r('sys.symbol.heart'))
.fontSize(20)
.fontColor(Color.Red)
Span(' 想看')
.fontSize(16)
}
3. 容器组件
3.1 Column和Row组件
Column和Row组件是最基本的布局容器，分别用于垂直和水平排列子组件。
Column({ space: 10 }) {
Text('标题')
.fontSize(20)
Row() {
Text('标签1')
Text('标签2')
}
}
.padding(20)
.width('100%')
3.2 Flex组件
Flex组件提供了更灵活的布局能力，支持弹性布局。
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween,
alignItems: ItemAlign.Center
}) {
Image('logo.png')
Text('应用名称')
Button('设置')
}
3.3 List组件
List组件用于展示列表数据，支持滚动、索引等功能。
List() {
ForEach(this.movieList, (item) => {
ListItem() {
MovieItem({ movie: item })
}
}, (item) => item.id)
}
三、布局技巧与最佳实践
1. 响应式布局设计
鸿蒙应用需要在不同尺寸的设备上运行，因此响应式布局设计至关重要。
Column() {
// 头部
Header()
.width('100%')
// 内容区域 - 根据屏幕宽度调整布局
if (this.windowWidth > 600) {
// 平板或大屏设备的双列布局
Flex() {
LeftPanel()
.width('50%')
RightPanel()
.width('50%')
}
} else {
// 手机设备的单列布局
SinglePanel()
.width('100%')
}
// 底部
Footer()
.width('100%')
}
2. 性能优化技巧
2.1 使用LazyForEach进行懒加载
对于大型列表，使用LazyForEach可以显著提升性能，因为它只渲染可视区域内的组件。
List() {
LazyForEach(this.dataSource, (item) => {
ListItem() {
MovieCard({ movie: item })
}
}, (item) => item.id)
}
2.2 合理使用缓存
对于频繁使用的组件或数据，可以考虑使用缓存机制，避免重复创建或计算。
2.3 避免不必要的重新渲染
通过合理设计状态管理，避免因为一个小的状态变化导致整个页面重新渲染。
3. 用户体验优化
3.1 流畅的动画效果
适当的动画效果可以提升用户体验，但过度使用会影响性能。
Button('点击我')
.onClick(() => {
animateTo({
duration: 300,
curve: Curve.EaseOut
}, () => {
this.scale = 0.95; // 点击效果
}, () => {
animateTo({
duration: 300,
curve: Curve.EaseIn
}, () => {
this.scale = 1; // 恢复效果
})
})
})
.scale({ x: this.scale, y: this.scale })
3.2 合理的触摸反馈
为交互组件提供清晰的触摸反馈，让用户知道操作已被识别。
3.3 加载状态显示
在进行网络请求等耗时操作时，显示加载状态，避免用户困惑。
if (this.isLoading) {
LoadingProgress()
.color(Color.Blue)
.height(50)
} else {
// 显示内容
Content()
}
四、自定义组件开发
1. 组件封装的原则
- 单一职责原则：每个组件只负责一个功能，便于维护和复用。
- 可配置性：通过props提供灵活的配置选项。
- 状态封装：内部状态管理清晰，对外提供简单的接口。
2. 自定义组件示例
@Component
struct MovieCard {
private movie: MovieData;
private onTap: () => void;
constructor(movie: MovieData, onTap: () => void) {
this.movie = movie;
this.onTap = onTap;
}
build() {
Column() {
Image(this.movie.posterUrl)
.width(120)
.height(180)
.borderRadius(8)
Text(this.movie.title)
.fontSize(14)
.margin({ top: 8 })
.maxLines(1)
Rating({
rating: this.movie.rating / 2,
maxRating: 5,
numStars: 5,
indicator: true
})
}
.padding(8)
.onClick(() => this.onTap())
}
}
3. 组件生命周期
了解组件的生命周期，可以在适当的时机执行初始化、清理等操作。
五、综合实例：构建电影列表界面
让我们通过一个综合实例来展示ArkUI组件和布局的使用：
@Component
struct MovieListPage {
@State movies: MovieData[] = [];
@State isLoading: boolean = false;
private dataSource: SwiperDataSource<MovieData> = new SwiperDataSource<MovieData>();
onPageShow() {
this.loadMovies();
}
async loadMovies() {
this.isLoading = true;
try {
const result = await getMovieList();
this.movies = result.data;
// 更新数据源
this.movies.forEach(movie => {
this.dataSource.pushData(movie);
});
} catch (error) {
console.error('Failed to load movies', error);
} finally {
this.isLoading = false;
}
}
navigateToDetail(id: string) {
router.push({
uri: 'pages/detail/DetailPage',
params: { movieId: id }
});
}
build() {
Column() {
// 头部标题
Text('热门电影')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ top: 20, bottom: 20 })
// 加载状态
if (this.isLoading) {
LoadingProgress()
.height(50)
.color(Color.Blue)
} else {
// 电影列表
List() {
LazyForEach(this.dataSource, (movie) => {
ListItem() {
Column() {
Image(movie.posterUrl)
.width('100%')
.height(200)
.objectFit(ImageFit.Cover)
Row() {
Column() {
Text(movie.title)
.fontSize(18)
.fontWeight(FontWeight.Bold)
Text(`${movie.year} · ${movie.genre}`)
.fontSize(14)
.fontColor(Color.Gray)
}
.flexGrow(1)
Rating({
rating: movie.rating / 2,
maxRating: 5,
numStars: 5,
indicator: true
})
}
.margin({ top: 10 })
}
.padding(15)
.onClick(() => this.navigateToDetail(movie.id))
}
}, (movie) => movie.id)
}
.divider({ strokeWidth: 1, color: '#f0f0f0' })
}
}
.padding({ left: 15, right: 15 })
.backgroundColor('#f8f8f8')
}
}
六、总结
ArkUI作为鸿蒙系统的UI开发框架，提供了丰富的组件和灵活的布局能力，使开发者能够高效地构建出美观、流畅的用户界面。通过本文的介绍，我们了解了ArkUI的核心特性、常用组件以及布局技巧。在实际开发中，我们需要根据具体的应用场景和用户需求，选择合适的组件和布局方式，同时注重性能优化和用户体验。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献5条内容
所有评论(0)