文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

鸿蒙HarmonyOS Java UI之TableLayout布局示例

2024-12-03 16:52

关注

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/

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"

 

示例

  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:row_count="3" 
  10.  
  11. ohos:column_count="5" 
  12.  
  13. ohos:background_element="#8AA7AA"
  14.  
  15.  
  16. ohos:height="match_content" 
  17.  
  18. ohos:width="match_content" 
  19.  
  20. ohos:text="我是第1个按钮" 
  21.  
  22. ohos:background_element="#07CCFF" 
  23.  
  24. ohos:text_color="#FFFFFF" 
  25.  
  26. ohos:text_size="20fp" 
  27.  
  28. ohos:padding="10vp"/> 
  29.  
  30. ..... 

 

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/

 

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯