鸿蒙HarmonyOS Java UI之TableLayout布局示例

上一篇 / 下一篇  2020-11-26 09:19:07

TableLayout简介

TableLayout意为表格布局,也可以称为网格布局,允许我们使用表格的方式来排列组件,也就是行和列的方式。

TableLayout提供了用于在表格中对齐和排列组件的接口。可配置表格的排列方式,行数和列数,以及组件的位置。

常用属性

ohos:alignment_type表示设置网格布局中的对齐方式,默认为align_contents(表示页边距对齐),还有一个参数是align_edges(表示边界对齐)。

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:id="$+id:tableLayout" 
  4.  
  5. ohos:height="match_parent" 
  6.  
  7. ohos:width="match_parent" 
  8.  
  9. ohos:alignment_type="align_contents" 
  10.  
  11. ohos:background_element="#8AA7AA"

ohos:row_count表示设置网格布局中行数,ohos:column_count表示设置网格布局中的列数。如果没有为子组件设置值,则使用父组件默认的行数和列数。在网格布局中若子组件的数量超出列数设置,则会自动添加行数。比如下列代码,我们设置一行,两列,但是是三个子组件,我们监听其中一个按钮的点击事件,将行列数显示在文本组件中。

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:id="$+id:tableLayout" 
  4.  
  5. ohos:height="match_content" 
  6.  
  7. ohos:width="match_content" 
  8.  
  9. ohos:row_count="1" 
  10.  
  11. ohos:column_count="2" 
  12.  
  13. ohos:background_element="#8AA7AA"
  14.  
  15.  
  16. ohos:id="$+id:tableTxt" 
  17.  
  18. ohos:height="match_content" 
  19.  
  20. ohos:width="match_content" 
  21.  
  22. ohos:text="我是文本组件" 
  23.  
  24. ohos:text_size="20fp"/> 
  25.  
  26.  
  27. ohos:id="$+id:button" 
  28.  
  29. ohos:height="match_content" 
  30.  
  31. ohos:width="match_content" 
  32.  
  33. ohos:text="我是第一个按钮" 
  34.  
  35. ohos:background_element="#5C6E71" 
  36.  
  37. ohos:text_color="#FFFFFF" 
  38.  
  39. ohos:text_size="20fp"/> 
  40.  
  41.  
  42. ohos:id="$+id:btn" 
  43.  
  44. ohos:height="match_content" 
  45.  
  46. ohos:width="match_content" 
  47.  
  48. ohos:text="我是第二个按钮" 
  49.  
  50. ohos:background_element="#5C6E71" 
  51.  
  52. ohos:text_color="#FFFFFF" 
  53.  
  54. ohos:text_size="20fp"/> 

未触发按钮点击事件的时候页面显示效果。


触发按钮点击事件的时候页面显示效果。


ohos:orientation表示设置表格中组件的排列方式,水平(vertical)和垂直(horizontal)。如果我们设置行为1,列为2,子组件三个,设置水平方向显示,那么我们的列将失效,自动会添加一列。

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:id="$+id:tableLayout" 
  4.  
  5. ohos:height="match_parent" 
  6.  
  7. ohos:width="match_parent" 
  8.  
  9. ohos:orientation="horizontal" 
  10.  
  11. ohos:background_element="#8AA7AA"

 

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:id="$+id:tableLayout" 
  4.  
  5. ohos:height="match_parent" 
  6.  
  7. ohos:width="match_parent" 
  8.  
  9. ohos:orientation="vertical" 
  10.  
  11. ohos:background_element="#8AA7AA"


TAG: 鸿蒙系统

 

评分:0

我来说两句

Open Toolbar