今天继续分享长沙有关HarmonyOS App开发组件布局类的知识，我们将在此系统上进行 App 应用开发，主要内容是讲常用的组件布局类有哪些以及它们的使用方式。

分享的逻辑是先学习布局的含义，再讲解应用框架及示例代码的调用逻辑，最后讲解运行效果图，大致是按照这种三步曲的节奏来分享。

长沙HarmonyOS App开发第一步：常用组件布局的含义

TableLayout 意为表格布局，也可以称为网格布局，允许我们使用表格的方式来排列组件，也就是行和列的方式。StackLayout 意为堆叠布局，用于在屏幕上保留一个区域来显示组件，实现特殊的功能。通常，堆叠布局中只应该放置一个子组件，如果存在多个子组件，则显示最新的子组件。DirectionalLayout（单一方向排列布局）是 Java UI 的一种重要的组件布局，用于将一组组件按照水平或垂直方向排布，能够方便地对齐布局内的组件。【ohos:orientation="vertical" 默认为垂直方向，可以换成ohos:orientation="horizontal"水平方向】DependentLayout 意为相对位置布局，与 DirectionalLayout 相比较有更多的排布方式，每个组件可以指定相对于其他同级组件的位置，也可以指定相对于父组件的位置。可以使用 DependentLayout 布局来实现更加复杂的UI界面，同时也可以和其他布局相结合组合出需要的UI界面。

长沙HarmonyOS App开发第二步：系统框架及代码调用逻辑

系统框架在里面只用图片展示一下，不做详细说明，前期分享的文章：HarmonyOS (鸿蒙操作系统)你值得拥有 有详细说明过，

MainAbility 就是程序的main入口类，这里会调用到 setMainRoute 的方法，传入的是MainAbilitySlice 这个类名称。此类的核心代码为：

1@Override 2publicvoidonStart(Intent intent){ 3super.onStart(intent); 4super.setUIContent(ResourceTable.Layout_ability_main); // 这里实际上是要去加载ability_main.xml 布局文件，这里在前面加上一个Layout_ 是系统要求这样做的，表明这是一个布局文件，布局文件详情在下面有详细列出。 5Button btn_directional = (Button) findComponentById(ResourceTable.Id_directional_layout); // 这里实际上是在从ability_main.xml 文件中找id 为 directional_layout的元素，并强转为Button类型 6if(btn_directional != null){ // 判断非null 7 btn_directional.setClickedListener(new Component.ClickedListener() { //给此id 元素设置监听事件 8@Override 9publicvoidonClick(Component component){10 present(new DirectionalLayoutSlice(),new Intent()); // 当此id元素被点击时，就去渲染DirectionalLayoutSlice这个类对象，这里的Present（）是用来实现不同的page(ability)内的跳转。11 }12 });13 }1415 Button btn_dependent = (Button) findComponentById(ResourceTable.Id_dependent_layout);16if(btn_dependent!=null){17 btn_dependent.setClickedListener(new Component.ClickedListener() {18@Override19publicvoidonClick(Component component){20 present(new DependentLayoutSlice(),new Intent());21 }22 });23 }2425 Button btn_stack = (Button) findComponentById(ResourceTable.Id_stack_layout);26if(btn_stack != null){27 btn_stack.setClickedListener(new Component.ClickedListener() {28@Override29publicvoidonClick(Component component){30 present(new StackLayoutSlice(),new Intent());31 }32 });33 }34 Button btn_table = (Button) findComponentById(ResourceTable.Id_table_layout);35if(btn_table != null){36 btn_table.setClickedListener(new Component.ClickedListener() {37@Override38publicvoidonClick(Component component){39 present(new TableLayoutSlice(),new Intent());40 }41 });42 }43 }

ability_main.xml 详细内容如下：

1<?xml version="1.0" encoding="utf-8"?> 2<ScrollView //滚动视图组件 3xmlns:ohos="http://schemas.huawei.com/res/ohos" 4ohos:width="match_parent" 5ohos:height="match_parent" 6ohos:rebound_effect="true" 7ohos:layout_alignment="horizontal_center"> //表示是水平居中 8<DirectionalLayout 9ohos:width="match_parent"10ohos:height="match_content"11ohos:orientation="vertical">12<Text13ohos:width="match_content"14ohos:height="match_content"15ohos:text="Common layout"16ohos:text_color="#708090"17ohos:top_margin="15vp"18ohos:left_margin="10vp"19ohos:text_size="25fp"/>20<Text21ohos:background_element="#70dbdb"22ohos:width="match_parent"23ohos:height="3"/>24<TableLayout25ohos:width="1080"26ohos:height="match_content"27ohos:orientation="horizontal"28ohos:top_margin="10"29ohos:column_count="2">30<Button31ohos:id="$+id:directional_layout"32ohos:width="500"33ohos:height="120"34ohos:margin="5"35ohos:padding="2"36ohos:text="DirectionalLayout"37ohos:text_size="17fp"/>38<Button39ohos:id="$+id:dependent_layout"40ohos:width="500"41ohos:height="120"42ohos:margin="5"43ohos:padding="2"44ohos:text="DependentLayout"45ohos:text_size="17fp"/>46<Button47ohos:id="$+id:stack_layout"48ohos:width="500"49ohos:height="120"50ohos:margin="5"51ohos:padding="2"52ohos:text="StackLayout"53ohos:text_size="17fp"/>54<Button55ohos:id="$+id:table_layout"56ohos:width="500"57ohos:height="120"58ohos:margin="5"59ohos:padding="2"60ohos:text="TableLayout"61ohos:text_size="17fp"/>62</TableLayout>63</DirectionalLayout>64</ScrollView>

接下来当我们点击到id 为Id_directional_layout 这个button时，就会跳转到present(new DirectionalLayoutSlice(),new Intent()); 这个类文件，其文件内容为：

1publicclassDirectionalLayoutSliceextendsAbilitySlice{2@Override3publicvoidonStart(Intent intent){4super.onStart(intent);5super.setUIContent(ResourceTable.Layout_directional_layout);6 }7 }

从代码里面可以看得到，这里面是去渲染了一个directional_layout的页面布局文件。来看下这个文件的内容：

1<?xml version="1.0" encoding="utf-8"?> 2<DirectionalLayout 3xmlns:ohos="http://schemas.huawei.com/res/ohos" 4ohos:width="match_parent" 5ohos:height="match_parent" 6ohos:top_margin="13fp" 7ohos:orientation="vertical"> 8<Text 9ohos:width="match_content"10ohos:height="match_content"11ohos:text="道理不光要懂，还要践行"12ohos:text_alignment="center"13ohos:multiple_lines="true"14ohos:layout_alignment="center"15ohos:top_margin="20vp"16ohos:text_size="23vp"/>17<Text18ohos:width="match_parent"19ohos:height="match_content"20ohos:text="1.持续学习可以使你保持自信"21ohos:multiple_lines="true"22ohos:left_margin="20vp"23ohos:top_margin="20vp"24ohos:text_size="18vp"/>25<Text26ohos:width="match_parent"27ohos:height="match_content"28ohos:text="2.别人有背景而你只有背影，你需要努力"29ohos:multiple_lines="true"30ohos:left_margin="20vp"31ohos:top_margin="20vp"32ohos:text_size="18vp"/>33<Text34ohos:width="match_parent"35ohos:height="match_content"36ohos:text="3.你不努力没有人替你坚强"37ohos:multiple_lines="true"38ohos:left_margin="20vp"39ohos:top_margin="20vp"40ohos:text_size="18vp"/>41<Text42ohos:width="match_parent"43ohos:height="match_content"44ohos:text="4.当今注意力是稀缺资源，你应该将注意力放在有价值的事情上"45ohos:multiple_lines="true"46ohos:left_margin="20vp"47ohos:top_margin="20vp"48ohos:text_size="18vp"/>49</DirectionalLayout>

其中的每一行就不再做详细解释了，总体的意思是有一个标题头，它居中展示，字体要大一些。然后就是四个带有标签1，2，3，4的文本内容。

第三步：运行后的效果展示下图是进入的主页面：

总结：

由于篇幅有限，此处不再把每一个布局代码详细拿出来说明，通过上面的一个布局示例就能很清楚的了解其中的精髓。本人因技术水平有限，如有错误之处望指出，可以给文末的邮箱地址发邮件或后台留言。上述代码源码如有需要，可以发邮件来获取。技术交流邮箱地址：loadkernel@126.com，也可公众号后台留言，欢迎互动交流哟。

end

如果今天的分享对你有帮助的话，请毫不犹豫：关注、分享、点赞、在看、收藏呀~你的鼓励将会是我创作的最大动力。