乐趣区

关于harmonyos:25HarmonyOS鸿蒙开发表格布局TableLayout

作者：

jiezi

在

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

TableLayout应用表格的形式划分子组件。

一、反对的XML属性

TableLayout的共有XML属性继承自：Component

属性名称 中文形容 取值 取值阐明 应用案例
id 控件identity，用以辨认不同控件对象，每个控件惟一 integer类型 仅可用于配置控件的id。 ohos:id=”$+id:component_id”
theme 款式 援用 仅可援用pattern资源。 ohos:theme=”$pattern:button_pattern”
width 宽度，必填项 float类型，match_parent，match_content ohos:width=”20″
ohos:width=”10vp”
ohos:width=”$float:size_value”
height 高度，必填项 float类型，match_parent，match_content ohos:height=”20″
ohos:height=”20vp”
ohos:height=”$float:size_value”
min_width 最小宽度 float类型 ohos:min_width=”20″
ohos:min_width=”20vp”
ohos:min_width=”$float:size_value”
min_height 最小高度 float类型 ohos:min_height=”20″
ohos:min_height=”20vp”
ohos:min_height=”$float:size_value”
alpha 透明度 float类型 取值范畴在0~1。 ohos:alpha=”0.86″
ohos:alpha=”$float:value”
enabled 是否启用 boolean类型 ohos:enabled=”true”
ohos:enabled=”$boolean:true”
visibility 可见性 visible，invisible，hide ohos:visibility=”visible”
padding 内间距 float类型
margin 外边距 float类型

TableLayout的自有XML属性见下表：

表1 TableLayout的自有XML属性

属性名称 中文形容 取值 取值阐明 应用案例
alignment_type 对齐形式 align_edges 示意TableLayout内的组件按边界对齐。 ohos:alignment_type=”align_edges”
align_contents 示意TableLayout内的组件按边距对齐。 ohos:alignment_type=”align_contents”
column_count 列数 integer类型 能够间接设置整型数值，也能够援用integer资源。 ohos:column_count=”3″
ohos:column_count=”$integer:count”
row_count 行数 integer类型 能够间接设置整型数值，也能够援用integer资源。 ohos:row_count=”2″
ohos:row_count=”$integer:count”
orientation 排列方向 horizontal 示意程度方向布局。 ohos:orientation=”horizontal”
vertical 示意垂直方向布局。 ohos:orientation=”vertical”

二、应用表格布局

2.1 默认一列多行

TableLayout默认一列多行。

咱们先批改一下布局文件，我的项目/entry/src/main/resources/base/layout/下的ability_main_layout文件。

删除原来的代码，创立TableLayout：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">
</TableLayout>

而后在外面增加4个Text子控件：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>

效果图：

<img src=”https://img.chengxuka.com/WX20210603-111727@2x.png/mark” alt=”WX20210603-111727@2x” style=”zoom:50%;” />

2.2 设置多行多列

设置行数和列数：

<TableLayout
    ...
    ohos:row_count="2"
    ohos:column_count="2">

只须要在TableLayout标签中设置好行数和列数，其余的内容不必改，效果图：

<img src=”https://img.chengxuka.com/WX20210603-111957@2x.png/mark” alt=”WX20210603-111957@2x” style=”zoom:50%;” />

2.4 设置对齐形式

在XML中设置对齐形式，以”align_contents“为例：

<TableLayout
    ...
    ohos:alignment_type="align_contents">
    ...
</TableLayout>

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换QQ群：714518656

4、视频课：https://www.chengxuka.com

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章