最全鸿蒙应用开发，比 React 体验更好，2024年最新kotlinwindows桌面开发

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

很多时候也源自于 UI 组件库本身也没有想要去做一个大而全的布局思维重构，从而导致 antd 虽然提出了这个方向和构思，但是普通开发者也不一定能领会到。

HTML + CSS 语义表现力缺失还体现在结构和样式分离。有很大一部分开发者并不喜欢写完结构之后，还要重新去另外的文件给他补充样式。并且这样方式在维护的时候也并不友好，隐性的规则让样式的最终结果变得扑朔迷离。

最明显的一点就是默认的样式继承规则和样式优先级，这东西让许多人在调样式的时候非常难受

所以很多后端来写前端，可能他什么都能搞定，就是搞不定 css 样式，这可太难了，哈哈哈哈。

许多开发者都意识到了这种痛点。因此 css in js 的方案层出不穷。原子 css 又再次重新火了起来。不过在根源上由于 HTML 文档流的设计不够简洁，视觉格式化模型中涉及到的概念太多，因此最终在使用上依然会有不小的理解成本与麻烦。

例如大家在使用原子化 css 的时候，很容易会出现一个元素上套用了太多 class 的情况，反而导致可读性极大的降低

<button
class=“blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600 text-sm text-white font-mono font-light py-2 px-4 border-2 rounded border-blue-200”

Button

因此我们需要思考新的方案来解决这种场景，例如使用一个变量名来复用这些样式

const btn = ‘blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600 text-sm text-white font-mono font-light py-2 px-4 border-2 rounded border-blue-200’

<button class={‘btn’}>
Button

这些理念都非常好。但是原子化 CSS 毕竟不是直接编写样式，他的适用场景会受到很大的限制。

并且当我们在思考如何复用原子化 CSS 的时候，其实就表示，开发者确实在期待一套完整的，全新的 UI 布局表述方式。

这就是鸿蒙应用开发中， ArkUI 的布局思路。

在设计上，arkUI 充分吸收了 HTML 等客户端方案发展这么多年的经验教训，在设计上完全摒弃了文档流的概念，转而强调容器的概念。为了应对不同的场景，arkUI 目前已经支持了 26 种容器组件。因为其明确的语义化，学习成本也非常低，例如如下容器组件，我们一看就能知道这是用来干嘛的

Row
Column
Flex
Grid
List
Scroll
Swiper
Tabs
Refresh
…

并且布局方式到底是什么情况，由容器组件说了算，而不是子元素的类型说了算。

// 表示从左到右布局
Row() {
Text(‘hello world’)
Text(‘hello world’)
Text(‘hello world’)
}

// 表示从上到下布局
Column() {
Text(‘hello world’)
Text(‘hello world’)
Text(‘hello world’)
}

除了在语义化上非常重视之外，arkUI 并不支持结构与样式分离，而是把设置样式的行为当成一个 set 方法，支持一种链式调用的方式来做到样式与结构合并的最终结果

Text(‘width: 10px’)
.fontSize(‘12fp’)
.color(‘#333’)
.border({
width: ‘10px’,
color: Color.Red,
style: BorderStyle.Dotted,
radius: 15
})

这其实是原子化 css 的进化版。如果你觉得原子化 CSS 真香，那么这种方式的好处你也一定能够快速理解到。

而且他比原子化 CSS 学习和记忆成本更低，更灵活，可以说是原子化 CSS 的理想化实现。

ArkUI 在设计上，还引入了一个风险较大的设定：样式后置。

这个最开始是在 Swift UI 中出现，可能许多前端开发都没见过

Column() {
Text(‘hello text’)
.fontSize(‘12fp’)
.fontColor(Color.Black)
.fontStyle(FontStyle.Italic)
}
.width(20)
.height(20)
.border({
width: 10,
color: Color.Blue
})

之所以说他风大，是因为这种书写方式大家都没见过，可能会容易给人的第一感觉就是：什么玩意儿 …

哪怕是在 Flutter 的设计中，也是可前置可后置，然后不管是文档案例，还是大家在开发中，其实也是让样式前置

// 伪代码
Widget build(BuildContext context) {
return new Container(
width: 20,
height: 20,
…
child: new Text()
)
}

我刚开始在学习 Swift 使用的时候也会担心这种样式后置的方式会让样式堆在一起比较难受，但是用了一段时间之后发现，真香！

我们来看一下这样一段代码。

Column() {
Text(最新值：${this.counter})
Column().block()
Column().block()
Column().block()
.onClick(() => {
this.counter ++
})
}
.margin(10)
.border({width: 4})
.width(‘50%’)
.height(‘400lpx’)
.justifyContent(FlexAlign.SpaceEvenly)

.block 是样式的复用。

@Extend(Column) function block() {
.width(40)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

止，不再深入研究，那么很难做到真正的技术提升。**

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！