个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于github 和 gitee上面(暂未发布)
前言
本案例使用的还是一些基础的语法,主要是知道如何去布局以及分析,Harmony的布局方式也是特别多,没必要每一个都去死记硬背。要灵活的去运用好各种布局。
知识点概述
在鸿蒙(HarmonyOS)开发中,布局元素是指用来定义界面结构和排版的重要组成部分。在使用ArkUI或其他UI开发框架时,可以利用各种布局元素来构建用户界面,以确保应用在不同设备上的显示效果和交互体验一致。
常见的布局元素和用法:
DirectionalLayout(方向布局):
DirectionalLayout
是鸿蒙中常用的一种布局元素,支持水平和垂直两种方向的排列。开发者可以通过指定 horizontal
或 vertical
属性来决定其排列方式。
DirectionalLayout {
orientation: 'vertical', // 或 'horizontal'
width: 'match_parent',
height: 'match_parent',
content: [
// 子元素
]
}
这种布局适合于需要垂直或水平堆叠子视图的场景,如列表、导航栏等。
StackLayout(层叠布局):
StackLayout
允许开发者将子视图按照层叠方式放置,类似于CSS中的Flex布局,但不同于DirectionalLayout,子视图可以重叠显示。
StackLayout {
width: 'match_parent',
height: 'match_parent',
content: [
// 子元素
]
}
这种布局适合于需要灵活控制子视图层次和位置的复杂布局结构。
GridLayout(网格布局):
GridLayout
允许开发者将子视图放置在网格中,通过行和列的定义来确定每个子视图的位置。可以设置每个格子的大小和对齐方式。
GridLayout {
columns: 3,
rows: 2,
width: 'match_parent',
height: 'match_parent',
content: [
// 子元素
]
}
这种布局适合于需要分割界面成网格状的场景,如图标排列、表格显示等。
FlexLayout(弹性布局):
FlexLayout
类似于Web开发中的Flexbox布局,支持灵活的子元素排列和对齐方式,能够自适应父容器的大小和变化。
FlexLayout {
flexDirection: 'row', // 或 'column'
width: 'match_parent',
height: 'match_parent',
justifyContent: 'space-between',
alignItems: 'center',
content: [
// 子元素
]
}
这种布局适合于需要动态调整子元素位置和大小的场景,如自适应导航栏、动态列表等。
Component(组件布局):
除了以上的布局元素,鸿蒙还支持自定义的组件化布局方式,开发者可以根据业务需求自由组合和定制布局结构。
Component {
id: 'custom_layout',
width: 'match_parent',
height: 'match_parent',
content: [
// 子元素
]
}
这种方式可以根据具体业务逻辑创建和管理复杂的自定义布局结构。
界面效果展示
代码展示
@Entry
@Component
struct Index {
build() {
Column(){
Image($r('app.media.tx_02'))
.width(100)
.margin(20)
.borderRadius(100)
Text('VON')
.fontWeight(700)
.margin({
bottom:20
})
Button('QQ登录')
.width('100%')
.margin(10)
Button('微信登录')
.width('100%')
.backgroundColor('#ddd')
.fontColor('#000')
}
.width('100%')
.padding(10)
}
}