鸿蒙开发之表格布局(TableLayout)

一、描述

表格布局可以实现行列式摆放组件 ， 也就是说可以把组件放在不同的单元格内进行布局呈现 。

它既可以通过xml代码实现也可以通过java代码实现 ， 我们这里主要介绍xml实现方式。

二、表格布局重要的属性

我们知道html重点表格的框架的基本样式或结构也是通过table的基本属性实现的 ， 然而在鸿蒙中也不例外。下面列出来鸿蒙表格布局的重要属性。

属性名称	取值	描述
alignment_type 对齐方式	align_edges	表示布局里的各个组件按边界对齐
	align_contents	表示布局里的组件按边距对齐
column_count	数值	规定表格布局的列数
row_count	数值	规定表格布局的行数
orientation 排列方式	horizontal	规定表格水平排列
	vertical	规定表格垂直排列

注意：排列方式所指对象是表格单元或者内容按照规定的排列顺序排列。如果排列方式是垂直 则先排列垂直方向在排列水平方向 否则 反之。

三、完整案例

 话不多说 先给个完整代码 ：

  

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical"
    ohos:row_count="3"
    ohos:column_count="2"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />
    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />
    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />

    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />
    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />
    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />

</TableLayout>

效果图：

 

四、排列方式的区别：

如果排列方式是水平排列 ， 即：orientation ： horizontal

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="horizontal"
    ohos:row_count="3"
    ohos:column_count="2"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />
    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />


</TableLayout>

效果：

 

如果排列方式是水平排列 ， 即：orientation ： vertical

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical"
    ohos:row_count="3"
    ohos:column_count="2"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />
    <Button
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="按钮"
        ohos:top_margin="10vp"
        ohos:left_margin="10vp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="black"
        />


</TableLayout>

效果：