harmonyOS應用-TableLayout佈局
阿新 • • 發佈:2021-01-12
技術標籤:harmonyos應用
TableLayout佈局
harmonyOS官網網址:https://developer.harmonyos.com
TableLayout使用表格的方式劃分子元件,如下圖示例
在XML檔案中建立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="$graphic:color_cyan_element" ohos:layout_alignment="horizontal_center" ohos:padding="8vp"> <Text ohos:id="$+id:table_text_1" ohos:width="100vp" ohos:height="50vp" ohos:background_element="$graphic:color_red_element" ohos:margin="10vp" ohos:text_alignment="horizontal_center" ohos:text_size="30fp" ohos:text="text_1" /> <Text ohos:id="$+id:table_text_2" ohos:width="100vp" ohos:height="50vp" ohos:background_element="$graphic:color_red_element" ohos:margin="10vp" ohos:text_alignment="horizontal_center" ohos:text_size="30fp" ohos:text="text_2" /> <Text ohos:id="$+id:table_text_3" ohos:width="100vp" ohos:height="50vp" ohos:background_element="$graphic:color_red_element" ohos:margin="10vp" ohos:text_alignment="horizontal_center" ohos:text_size="30fp" ohos:text="text_3" /> <Text ohos:id="$+id:table_text_4" ohos:width="100vp" ohos:height="50vp" ohos:background_element="$graphic:color_red_element" ohos:margin="10vp" ohos:text_alignment="horizontal_center" ohos:text_size="30fp" ohos:text="text_4" /> <Text ohos:id="$+id:table_text_5" ohos:width="100vp" ohos:height="50vp" ohos:background_element="$graphic:color_red_element" ohos:margin="10vp" ohos:text_alignment="horizontal_center" ohos:text_size="30fp" ohos:text="text_5" /> </TableLayout>
預設的排列方式–垂直排列
設定行數和列數
<TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="$graphic:color_cyan_element" ohos:layout_alignment="horizontal_center" ohos:padding="8vp" ohos:row_count="2" ohos:column_count="2"> </TableLayout>
設定對齊方式alignment_type屬性表設定好像沒有效果-----還不清楚除原有
屬性 | 值效果 |
---|---|
align_edges | 表示子元件邊界對齊,預設對齊方式。 |
align_contents | 表示子元件邊距對齊 |
在XML中設定對齊方式,以”align_contents“為例:ohos:alignment_type="align_contents