更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zzLearning在学习的路上，我们不能只停留在对理论知识的理解上，更要理论与实际相结合实战，使我们更深入地掌握知识，最终形成自己的知识体系结构。我们在实战中，既可以巩固理论知识，又可以在实战中发现问题，找到合适的解决办法。在前面的章节中，我们学习了六大布局和常用的组件，在学习布局和组件的时候也有一些小例子。通过这些小例子，我们只是对当前的布局和组件的使用有了深刻的了解，但是UI界面布局不可能只有一个组件，复杂的UI界面会出现多个布局和组件。组合。本节我将在HarmonyOS智慧屏上实现一个普通的计算器。整个计算器是由文本组件和按钮组件组合而成，然后放在一个容器中。通过监听按钮的点击事件和改变文本组件的显示内容，计算器的效果（本节的例子忘记了小数点，有兴趣的可以自己尝试添加）终于实现了。对于计算器UI界面，我将其拆解为上下两部分，上方区域用于显示，下方区域用于按钮组。上方区域有两个Text组件，分别用于显示数学表达式和按钮对应的数值。下方区域是一些按钮组件、数字区域、操作符号、返回和清除。对于整个示例布局，我做了一个简单的拆解和介绍，接下来我将以代码的形式实现上面的UI界面。为了让各个布局中的组件能够以不同的比例显示，我这里选择了DirectionalLayout布局，并设置了它的权重比例来实现组件不居中的比例。1、整个布局分为上下两个区域，所以DirectionalLayout布局的方向是垂直的（vertical）。并且分为两个区域，上下区域的比例是2：3。
