一、什么是 Tablist 與 Tab ？

• Tablist 可以實現多個頁簽欄的切換，Tab 為某個頁簽。
• 子頁簽通常放在內容區上方，展示不同的分類。
• 頁簽名稱應該簡潔明了，清晰描述分類的內容。

二、支持的 XML 屬性

• Tablist 的共有 XML 屬性繼承自 ScrollView，ScrollView 詳情請參考我的博客：HarmonyOS之常用組件ScrollView的功能和使用。
• Tablist 的自有 XML 屬性如下：

屬性名稱中文描述取值取值說明使用案例fixed_mode固定所有頁簽并同時顯示boolean類型可以直接設置true/false，也可以引用boolean資源ohos:fixed_mode="true"
ohos:fixed_mode="$boolean:true_tag"orientation頁簽排列方向horizontal表示水平排列ohos:orientation="horizontal"vertical表示垂直排列ohos:orientation="vertical"normal_text_color未選中的文本顏色color類型可以直接設置色值，也可以引用color資源ohos:normal_text_color="#FFFFFFFF"
ohos:normal_text_color="$color:black"selected_text_color選中的文本顏色color類型可以直接設置色值，也可以引用color資源ohos:normal_text_color="#FFFFFFFF"
ohos:normal_text_color="$color:black"selected_tab_indicator_color選中頁簽的顏色color類型可以直接設置色值，也可以引用color資源ohos:normal_text_color="#FFFFFFFF"
ohos:normal_text_color="$color:black"selected_tab_indicator_height選中頁簽的高度float類型表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源ohos:tab_length="100"
ohos:tab_length="20vp"
ohos:tab_length="$float:size_value"tab_indicator_type頁簽指示類型invisible表示選中的頁簽無指示標記ohos:tab_indicator_type="invisible"bottom_line表示選中的頁簽通過底部下劃線標記ohos:tab_indicator_type="bottom_line"left_line表示選中的頁簽通過左側分割線標記ohos:tab_indicator_type="left_line"oval表示選中的頁簽通過橢圓背景標記ohos:tab_indicator_type="oval"tab_length頁簽長度float類型表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源ohos:tab_length="100"
ohos:tab_length="20vp"
ohos:tab_length="$float:size_value"tab_margin頁簽間距float類型表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源text_alignment文本對齊方式left表示文本靠左對齊可以設置取值項如表中所列，也可以使用“|”進行多項組合。
ohos:text_alignment="center"
ohos:text_alignment="top|left"top表示文本靠頂部對齊right表示文本靠右對齊bottom表示文本靠底部對齊horizontal_center表示文本水平居中對齊vertical_center表示文本垂直居中對齊center表示文本居中對齊start表示文本靠起始端對齊end表示文本靠結尾端對齊text_size文本大小float類型表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源ohos:text_size="100"
ohos:text_size="16fp"
ohos:text_size="$float:size_value"

三、TabList 的使用

① TabList 創建

• xml 中創建 TabList

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:background_element="black"ohos:orientation="vertical"><TabListohos:id="$+id:tab_list"ohos:top_margin="40vp"ohos:tab_margin="24vp"ohos:tab_length="140vp"ohos:text_size="20fp"ohos:height="36vp"ohos:width="match_parent"ohos:layout_alignment="center"ohos:orientation="horizontal"ohos:text_alignment="center" /></DirectionalLayout>

• 設置默認狀態和選中狀態的字體顏色和 indicator 的顏色：

<TabList...ohos:normal_text_color="#999999"ohos:selected_text_color="#FFFFFF"ohos:selected_tab_indicator_color="#FFFFFF"ohos:selected_tab_indicator_height="2vp"/>

• 或者在代碼中設置 Tab 的布局：

tabList.setTabLength(140 * 3); // 設置Tab的寬度tabList.setTabMargin(24 * 3); // 設置兩個Tab之間的間距

• TabList 中添加 Tab：

TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);TabList.Tab tab = tabList.new Tab(getContext());tab.setText("Image");tabList.addTab(tab);... // 請自行創建其他Tab

• 效果如下：
  

② 設置 fixedMode

• 默認為 false，該模式下 TabList 的總寬度是各 Tab 寬度的總和，若固定了 TabList 的寬度，當超出可視區域，則可以通過滑動 TabList 來顯示。
• 如果設置為 true，TabList 的總寬度將與可視區域相同，各個 Tab 的寬度也會根據 TabList 的寬度而平均分配，該模式適用于 Tab 較少的情況。

tabList.setFixedMode(true);

• fixedMode 設置 false/true 前后的對比效果：

③ 在某個位置新增 Tab

// 本示例中在"圖片"和"視頻"之間的頁簽中新增"新聞"頁簽TabList.Tab tab = tabList.new Tab(getContext());tab.setText("News");tab.setMinWidth(64);tab.setPadding(12, 0, 12, 0);tabList.addTab(tab, 1); // 1表示位置

• 在某一位置新增 tab 的效果：

④ 響應焦點變化

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {@Overridepublic void onSelected(TabList.Tab tab) {// 當某個Tab從未選中狀態變為選中狀態時的回調...}@Overridepublic void onUnselected(TabList.Tab tab) {// 當某個Tab從選中狀態變為未選中狀態時的回調...}@Overridepublic void onReselected(TabList.Tab tab) {// 當某個Tab已處于選中狀態，再次被點擊時的狀態回調...}});

⑤ TabList 常用接口

方法說明

getSelectedTab	返回選中的Tab
getSelectedTabIndex	返回選中的Tab的位置索引
getTabCount	獲取Tab的個數
getTabAt	獲取某個Tab
removeTab	移除某個位置的tab
setOrientation	設置橫或豎方向

四、Tab 的使用

• 設置 Tab 屬性：

tab.setMinWidth(64);tab.setPadding(12, 0, 12, 0);

• 選中某個 Tab：

tab.select();

• 獲取 Tab 在 TabList 中的位置索引：

tab.getPosition();

總結

以上是生活随笔為你收集整理的HarmonyOS之常用组件TabList与Tab的功能和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。