HarmonyOS入门第二章——彻底搞懂ArkUI(2)

上回讲了HarmonyOS入门第二章——彻底搞懂ArkUI(1)，

主要讲了UI一般包括GUI和CLI，GUI中的元素一般包含了6大类，即：布局元素、输入控件、导航元素、信息元素、交互元素、反馈元素。

有同学在后台跟我反馈，说讲的太好了，以前老是看到GUI，但就不知道GUI是什么意思，一篇文章让他一次性的搞懂了GUI。

这突如其来的表白让老猎人受宠若惊，今天老猎人来试试，如何让大家伙一篇文章搞懂UI中的布局。布局搞懂了之后相当于ArkTS已经学了一大半，剩下的一小半，请关注老猎人，老猎人后面会跟大家详细解释。

ArkTS里面一般分为：线性布局、层叠布局、弹性布局、相对布局、栅格布局。

很多同学会问，为什么要布局呢？

大家试想一下，设计师小姐姐给到我们的设计稿一般都是静态的UI设计稿。

一方面我们的终端设备是千奇百怪的，有手机、手表、平板、智慧屏，同时每个终端设备中又有很多型号和尺寸需要适配，这个是时候就需要通过布局来给终端的显示做适配了。

另一方面，设计稿中的内容都是静态的，我们还要根据服务端给到的数据，做动态的内容展示替换，有的内容长，有的内容短。让不同的内容在界面中展示得合理，也是布局出现的原因。

最后，我们的内容总是无穷无尽的，受限于屏幕的物理尺寸，有时候需要将多余的内容进行滚动、翻页展示。或者将不重要的内容放到其他的页面，通过导航跳转来展示。

基于上述原因，我们需要使用到布局技术。其实布局这一块同学们之前多多少少都玩过，那就是手机桌面，我拿手机的一个截屏来跟大家说明。

ArkUI布局演示

上面这个视频，充分的给大家演示了布局技术在实际中的运用。

接下来我们分别讲讲几种布局，官方的教程很全面但太过于抽象，不适合初学者， 大家看我的教程就好

线性布局

1、自己的位置会受到其他的盒子影响，同时也会被其他的线性盒子影响到。

2.  每个线性盒子里面还可以放线性盒子。每个线性盒子的位置不会超出父盒子的位置（特殊定位除外）。

3. 如果上面的盒子被拿走或者隐藏掉。则下面的盒子会顶上去。如果上面增加了某个盒子，则下面的盒子会被挤下来。

弹性布局

        弹性盒子的内部有一根弹簧，自己的宽度或者高度具有弹性，可以被外界挤压。布局非常灵活多变，使用时需要非常小心，多考虑下不同分辨率下的兼容性。

层叠布局

        改变了子布局中的布局方式，子布局中的所有盒子的位置全部独立，由线性的方式布局变为层叠的方式布局。不受其他盒子的影响。不同的语言里面的叫法不一定，ArkUI里面称之为层叠盒子。前端html里面称之为绝对定位。

相对布局

        其实叫跟踪布局比较好理解一些，可以给他一个跟踪的目标盒子，和保持跟踪的距离。这样的话小跟班就会自动工作了。始终都会锚定目标盒子。目标盒子在哪，他就在哪。

栅格布局

        栅格布局本质上还是属于线性布局中的一种，而且用的不多，对于我们理解布局没有太大的帮助，这里就不详细讲。

这里我给大家用ArkUI做了一个demo，并截了一张图，如下所示：

核心代码如下：

@Component
export struct LineComponent {
	private AlignRus:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
	'top': { 'anchor': 'row1', 'align': VerticalAlign.Top },
	'right': { 'anchor': 'row1', 'align': HorizontalAlign.Start }
}
	build() {
		Stack({ }) {
		Column()	{
			Column() {
				Column() {
					Text("我是线性盒子老大，身高100，谁也影响不了我的高度。我如果出现，后面的弟弟都得往下靠")
						.fontSize(20)
						.fontWeight(FontWeight.Bold)
				}
				.width('100%')
			}
			.height(100)
			.borderColor('red')
			.borderWidth(1)
			.alignItems(HorizontalAlign.Center)
			.justifyContent(FlexAlign.Center)
			Column() {
				Column() {
					Text("我是线性盒子老二，身高120，我排在大哥的后面，他的高度变化会影响到我，如果大哥不在，我会立即顶上去")
						.fontSize(20)
						.fontWeight(FontWeight.Bold)
				}
				.width('100%')
			}
			.height(120)
			.borderColor('red')
			.borderWidth(1)
			.alignItems(HorizontalAlign.Center)
			.justifyContent(FlexAlign.Center)
			Column() {
				Text("我是线性盒子老三，身高300，我排在大哥和二哥的后面，他们的高度变化会影响到我，如果大哥和二哥不在，我会立即顶上去")
					.fontSize(20)
					.fontWeight(FontWeight.Bold)
				Row() {
					Text("我是线性盒子老三的大儿子，我只会在父亲的地盘里面争夺位置的优先权，父亲变化也会带着我一起。")
						.fontSize(20)
						.width('50%')
						.borderColor('red')
						.borderWidth(1)
						.textAlign(TextAlign.Center)
					Text("我是线性盒子老三的小儿子，我的位置在哥哥的后面，父亲变化也会带着我一起。如果哥哥不在，我会立即跑到前面")
						.fontSize(20)
						.width('50%')
						.borderColor('red')
						.borderWidth(1)
						.textAlign(TextAlign.Center)
				}
				.width('100%')
			}
			.height(300)
			.borderColor('red')
			.borderWidth(1)
			.alignItems(HorizontalAlign.Center)
			.justifyContent(FlexAlign.Center)
			Flex() {
				Column() {
					Text("我是弹性盒子，是他们几个兄弟的朋友，他们小时候还没长高的时候，我的身高很高，他们长高之后，我的身高被压扁了")
						.fontSize(20)
						.fontWeight(FontWeight.Bold)
				}
				.width('100%')
			}
			.backgroundColor(Color.Gray)
			.flexGrow(1)
			}.height('100%')
			RelativeContainer() {
				Text('我是Stack盒子，我不受其他人约束，我想在哪就在哪，左边是我的小跟班')
					.fontSize(12)
					.id("row1")
				Text('我是小跟班，右边的哥哥去哪我去哪').alignRules(this.AlignRus).id("row2")
			}.backgroundColor('#ff58b87c').width(100).height(100).position({x: '70%', y: 600})
		}.height('100%')
	}
}

如果需要完整的工程代码，请关注「菁英老猎人」公众号，并回复「布局」，即可获得。

大家注意

我们在刚开始学习布局的时候，不需要每个布局的详细使用方法都去学，一个是知识点太多，容易被绕晕。第二个是学了暂时用不到，容易忘记，白学。

我们只需要大致了解每种布局的特性，然后找一个APP，尝试去分析下这个APP里面的界面都用了些什么布局，为什么要用这种布局？

至于每种布局里面详细是怎么使用的，这个花2小时就能学会，等有一天我们碰到了，带着问题去学习，事半功倍。

作业

好了，今天的学习到此结束，给大家留个小作业：

请大家随便打开一个APP，尝试去分析下这个APP里面的界面都用了些什么布局，为什么要用这种布局？可以将作业发到评论区，跟大家一起讨论哟。

关于菁英老猎人

---

    菁英老猎人拥有12+年的软件开发经验，一直专注于大前端领域，对原生APP开发、混合APP开发和鸿蒙APP开发都有较深入的研究，曾使用cordova、uni-app、React-Native、Flutter做过大量的项目，现在开始研究鸿蒙应用开发，擅长对APP开发的相关知识深入浅出。关注我，带你快速、扎实的学习鸿蒙应用开发。