【模块-Java布局】HarmonyOS Codelab挑战赛记录

2021/4/25 12:27:04

编程Tag： import Java private public void HarmonyOS Codelab ResourceTable ohos

本文主要是介绍【模块-Java布局】HarmonyOS Codelab挑战赛记录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

下载Codelab起步应用
https://gitee.com/openharmony/codelabs/tree/master/ComponentCodelab
解压文件，用DevEco Studio打开ComponentCodelab：
在这里插入图片描述
点击Tools -> HVD Manager，跳转到登录页面：
在这里插入图片描述
点击允许，出现模拟器列表：
在这里插入图片描述
点击 “P40” 右边的三角符号，打开模拟器：
在这里插入图片描述
点击右上角的三角符号运行：
在这里插入图片描述
此时点击上面的文字没有反应，因为我们还没有添加事件响应，接下来修改代码：

TabList and Tab

布局文件：
tab_list.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:width="match_parent" 
    ohos:height="match_parent" 
    ohos:top_margin="15vp" 
    ohos:orientation="vertical"> 
    <TabList 
        ohos:id="$+id:tab_list" 
        ohos:top_margin="10vp" 
        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" 
        ohos:normal_text_color="#999999" 
        ohos:selected_text_color="#afaafa" 
        ohos:selected_tab_indicator_color="#afaafa" 
        ohos:selected_tab_indicator_height="2vp"/> 
    <Text 
        ohos:id="$+id:tab_content" 
        ohos:width="match_parent" 
        ohos:height="match_parent" 
        ohos:text_alignment="center" 
        ohos:background_element="#70dbdb" 
        ohos:text_color="#2e2e2e" 
        ohos:text_size="16fp"/> 
</DirectionalLayout>

AbilitySlice文件：
TabListSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;

public class TabListSlice extends AbilitySlice {

    private TabList tabList;

    private Text tabContent;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_tab_list);
        initComponent();
        addTabSelectedListener();
    }

    private void initComponent() {
        tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);
        tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        initTab();
    }

    private void initTab() {
        if (tabList.getTabCount() == 0) {
            tabList.addTab(createTab("Image"));
            tabList.addTab(createTab("Video"));
            tabList.addTab(createTab("Audio"));
            tabList.setFixedMode(true);
            tabList.getTabAt(0).select();
            tabContent.setText("Select the " + tabList.getTabAt(0).getText());
        }
    }

    private TabList.Tab createTab(String text) {
        TabList.Tab tab = tabList.new Tab(this);
        tab.setText(text);
        tab.setMinWidth(64);
        tab.setPadding(12, 0, 12, 0);
        return tab;
    }

    private void addTabSelectedListener() {
        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                tabContent.setText("Select the " + tab.getText());
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
            }

            @Override
            public void onReselected(TabList.Tab tab) {
            }
        });
    }

}

ListContainer

布局文件：
news_list_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:orientation="vertical"> 
    <ListContainer 
        ohos:id="$+id:selector_list" 
        ohos:height="36vp" 
        ohos:width="match_parent" 
        ohos:top_padding="8vp" 
        ohos:orientation="horizontal"/> 
    <Component 
        ohos:height="1vp" 
        ohos:width="match_parent" 
        ohos:background_element="#70dbdb"/> 
    <ListContainer 
        ohos:id="$+id:news_container" 
        ohos:height="match_parent" 
        ohos:width="match_parent"/> 
</DirectionalLayout>

item_news_type_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="40vp" 
    ohos:width="match_content"> 
    <Text 
        ohos:id="$+id:news_type_text" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text_alignment="center" 
        ohos:left_padding="20vp" 
        ohos:right_padding="20vp" 
        ohos:text_color="#55000000" 
        ohos:text_size="16fp"/> 
</DirectionalLayout>

item_news_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="110vp" 
    ohos:width="match_parent" 
    ohos:orientation="vertical"> 
    <DirectionalLayout 
        ohos:height="109vp" 
        ohos:width="match_parent" 
        ohos:orientation="horizontal" 
        ohos:padding="10vp"> 
        <Text 
            ohos:id="$+id:item_news_title" 
            ohos:height="match_content" 
            ohos:width="0vp" 
            ohos:max_text_lines="3" 
            ohos:multiple_lines="true" 
            ohos:right_padding="20vp" 
            ohos:text_size="18vp" 
            ohos:weight="2"/> 
        <Image 
            ohos:id="$+id:item_news_image" 
            ohos:height="match_content" 
            ohos:width="0vp" 
            ohos:image_src="$media:news_image" 
            ohos:weight="1"/> 
    </DirectionalLayout> 
    <Component 
        ohos:height="1vp" 
        ohos:width="match_parent" 
        ohos:background_element="#70dbdb"/> 
</DirectionalLayout>

Provider文件：
NewsTypeProvider.java

public class NewsTypeProvider extends BaseItemProvider { 
    private String[] newsTypeList; 
    private Context context; 
 
    public NewsTypeProvider(String[] listBasicInfo, Context context) { 
        this.newsTypeList = listBasicInfo; 
        this.context = context; 
    } 
 
    @Override 
    public int getCount() { 
        return newsTypeList == null ? 0 : newsTypeList.length; 
    } 
 
    @Override 
    public Object getItem(int position) { 
        return Optional.of(this.newsTypeList[position]); 
    } 
 
    @Override 
    public long getItemId(int position) { 
        return position; 
    } 
 
    @Override 
    public Component getComponent(int position, Component componentP, ComponentContainer componentContainer) { 
        ViewHolder viewHolder = null; 
        Component component = componentP; 
        if (component == null) { 
            component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_type_layout, null, false); 
            viewHolder = new ViewHolder(); 
            Component componentText = component.findComponentById(ResourceTable.Id_news_type_text); 
            if (componentText instanceof Text) { 
                viewHolder.title = (Text) componentText; 
            } 
            component.setTag(viewHolder); 
        } else { 
            if (component.getTag() instanceof ViewHolder) { 
                viewHolder = (ViewHolder) component.getTag(); 
            } 
        } 
        if (viewHolder != null) { 
            viewHolder.title.setText(newsTypeList[position]); 
        } 
        return component; 
    } 
 
    private static class ViewHolder { 
        Text title; 
    } 
}

NewsListProvider.java

public class NewsListProvider extends BaseItemProvider { 
    private List<NewsInfo> newsInfoList; 
    private Context context; 
 
    public NewsListProvider(List<NewsInfo> listBasicInfo, Context context) { 
        this.newsInfoList = listBasicInfo; 
        this.context = context; 
    } 
 
    @Override 
    public int getCount() { 
        return newsInfoList == null ? 0 : newsInfoList.size(); 
    } 
 
    @Override 
    public Object getItem(int position) { 
        return Optional.of(this.newsInfoList.get(position)); 
    } 
 
    @Override 
    public long getItemId(int position) { 
        return position; 
    } 
 
    @Override 
    public Component getComponent(int position, Component componentP, ComponentContainer componentContainer) { 
        ViewHolder viewHolder = null; 
        Component component = componentP; 
        if (component == null) { 
            component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_layout, null, false); 
            viewHolder = new ViewHolder(); 
            Component componentTitle = component.findComponentById(ResourceTable.Id_item_news_title); 
            Component componentImage = component.findComponentById(ResourceTable.Id_item_news_image); 
            if (componentTitle instanceof Text) { 
                viewHolder.title = (Text) componentTitle; 
            } 
            if (componentImage instanceof Image) { 
                viewHolder.image = (Image) componentImage; 
            } 
            component.setTag(viewHolder); 
        } else { 
            if (component.getTag() instanceof ViewHolder) { 
                viewHolder = (ViewHolder) component.getTag(); 
            } 
        } 
        if (viewHolder != null) { 
            viewHolder.title.setText(newsInfoList.get(position).getTitle()); 
            viewHolder.image.setScaleMode(Image.ScaleMode.STRETCH); 
        } 
        return component; 
    } 
 
    private static class ViewHolder { 
        Text title; 
        Image image; 
    } 
}

AbilitySlice文件：
ListContainerSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import com.huawei.codelab.provider.NewsListProvider;
import com.huawei.codelab.provider.NewsTypeProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.ListContainer;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;

import java.util.ArrayList;
import java.util.List;

public class ListContainerSlice extends AbilitySlice {

    private static final float FOCUS_TEXT_SIZE = 1.2f;
    private static final float UNFOCUS_TEXT_SIZE = 1.0f;
    private Text selectText;
    private ListContainer newsListContainer;
    private ListContainer selectorListContainer;
    private List<NewsInfo> totalNews;
    private List<NewsInfo> selectNews;
    private NewsTypeProvider newsTypeProvider;
    private NewsListProvider newsListProvider;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_news_list_layout);
        initView();
        initProvider();
        setListContainer();
        initListener();
    }

    private void initView() {
        selectorListContainer = (ListContainer) findComponentById(ResourceTable.Id_selector_list);
        newsListContainer = (ListContainer) findComponentById(ResourceTable.Id_news_container);
    }

    public class NewsInfo {
        private String title;
        private String type;

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getType() {
            return type;
        }

        public void setType(String type) {
            this.type = type;
        }
    }

    private void initProvider() {
        String[] listNames = new String[]{"All", "Health", "Finance", "Technology", "Sport", "Internet", "Game"};
        newsTypeProvider = new NewsTypeProvider(listNames, this);
        newsTypeProvider.notifyDataChanged();

        String[] newsTypes = new String[]{"Health", "Finance", "Finance", "Technology", "Sport", "Health", "Internet", "Game", "Game", "Internet"};
        String[] newsTitles = new String[]{
                "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
                "Openness and Cooperation Facilitate Industry Upgrade",
                "High-voltage super-fast charging is an inevitable trend",
                "Ten Future Trends of Digital Energy",
                "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
                "Enterprise data centers are moving towards autonomous driving network",
                "One optical fiber lights up a green smart room",
                "Trust technology, embrace openness, and share the world prosperity brought by technology",
                "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
                "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G"
        };
        totalNews = new ArrayList<>();
        selectNews = new ArrayList<>();
        for (int i = 0; i < newsTypes.length; i++) {
            NewsInfo newsInfo = new NewsInfo();
            newsInfo.setTitle(newsTitles[i]);
            newsInfo.setType(newsTypes[i]);
            totalNews.add(newsInfo);
        }
        selectNews.addAll(totalNews);
        newsListProvider = new NewsListProvider(selectNews, this);
        newsListProvider.notifyDataChanged();
    }

    private void  setListContainer() {
        selectorListContainer.setItemProvider(newsTypeProvider);
        newsListContainer.setItemProvider(newsListProvider);
    }

    private void initListener() {
        selectorListContainer.setItemClickedListener((listContainer, component, position, listener) -> {
            setCategorizationFocus(false);
            Component newsTypeText = component.findComponentById(ResourceTable.Id_news_type_text);
            if (newsTypeText instanceof Text) {
                selectText = (Text) newsTypeText;
            }
            setCategorizationFocus(true);
            selectNews.clear();
            if (position == 0) {
                selectNews.addAll(totalNews);
            } else {
                String newsType = selectText.getText();
                for (NewsInfo newsData : totalNews) {
                    if (newsType.equals(newsData.getType())) {
                        selectNews.add(newsData);
                    }
                }
            }
            updateListView();
        });
        selectorListContainer.setSelected(true);
        selectorListContainer.setSelectedItemIndex(0);
    }

    private void setCategorizationFocus(boolean isFocus) {
        if (selectText == null) {
            return;
        }
        if (isFocus) {
            selectText.setTextColor(new Color(Color.getIntColor("#afaafa")));
            selectText.setScaleX(FOCUS_TEXT_SIZE);
            selectText.setScaleY(FOCUS_TEXT_SIZE);
        } else {
            selectText.setTextColor(new Color(Color.getIntColor("#999999")));
            selectText.setScaleX(UNFOCUS_TEXT_SIZE);
            selectText.setScaleY(UNFOCUS_TEXT_SIZE);
        }
    }

    private void updateListView() {
        newsListProvider.notifyDataChanged();
        newsListContainer.invalidate();
        newsListContainer.scrollToCenter(0);
    }

}

RadioContainer

布局文件：
radio_container.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:alignment="horizontal_center" 
    ohos:orientation="vertical" 
    ohos:left_padding="32vp"> 
    <Text 
        ohos:height="match_content" 
        ohos:width="match_parent" 
        ohos:top_margin="32vp" 
        ohos:text="Question:Which of the following options belong to fruit?" 
        ohos:text_size="20fp" 
        ohos:layout_alignment="left" 
        ohos:multiple_lines="true"/> 
    <DirectionalLayout 
        ohos:height="match_content" 
        ohos:width="match_parent" 
        ohos:orientation="horizontal" 
        ohos:top_margin="8vp"> 
        <Text 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:text="Your Answer:" 
            ohos:text_size="20fp"/> 
        <Text 
            ohos:id="$+id:answer" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:text_size="20fp" 
            ohos:left_margin="18vp" 
            ohos:text="[]" 
            ohos:text_color="#FF3333"/> 
    </DirectionalLayout> 
    <RadioContainer 
        ohos:id="$+id:radio_container" 
        ohos:height="match_content" 
        ohos:width="200vp" 
        ohos:layout_alignment="left" 
        ohos:orientation="vertical" 
        ohos:top_margin="16vp" 
        ohos:left_margin="4vp"> 
        <RadioButton 
            ohos:id="$+id:radio_button_1" 
            ohos:height="40vp" 
            ohos:width="match_content" 
            ohos:text="A.Apple" 
            ohos:text_size="20fp" 
            ohos:text_color_on="#FF3333"/> 
        <RadioButton 
            ohos:id="$+id:radio_button_2" 
            ohos:height="40vp" 
            ohos:width="match_content" 
            ohos:text="B.Potato" 
            ohos:text_size="20fp" 
            ohos:text_color_on="#FF3333"/> 
        <RadioButton 
            ohos:id="$+id:radio_button_3" 
            ohos:height="40vp" 
            ohos:width="match_content" 
            ohos:text="C.Pumpkin" 
            ohos:text_size="20fp" 
            ohos:text_color_on="#FF3333"/> 
        <RadioButton 
            ohos:id="$+id:radio_button_4" 
            ohos:height="40vp" 
            ohos:width="match_content" 
            ohos:text="D.Vegetables" 
            ohos:text_size="20fp" 
            ohos:text_color_on="#FF3333"/> 
    </RadioContainer> 
</DirectionalLayout>

AbilitySlice文件：
RadioContainerSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbPalette;
import ohos.agp.components.ComponentState;
import ohos.agp.components.RadioButton;
import ohos.agp.components.RadioContainer;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.components.element.StateElement;

public class RadioContainerSlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_radio_container);
        initComponent();
    }

    private StateElement getStateElement() {
        ShapeElement elementButtonOn = new ShapeElement();
        elementButtonOn.setRgbColor(RgbPalette.RED);
        elementButtonOn.setShape(ShapeElement.OVAL);

        ShapeElement elementButtonOff = new ShapeElement();
        elementButtonOff.setRgbColor(RgbPalette.DARK_GRAY);
        elementButtonOff.setShape(ShapeElement.OVAL);

        StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);
        return checkElement;
    }

    private void initComponent() {
        Text answer = (Text) findComponentById(ResourceTable.Id_answer);
        RadioContainer container = (RadioContainer)findComponentById(ResourceTable.Id_radio_container);
        int count = container.getChildCount();
        for (int i = 0; i < count; i++) {
            ((RadioButton) container.getComponentAt(i)).setButtonElement(getStateElement());
        }
        container.setMarkChangedListener((radioContainer1, index) -> {
            answer.setText(String.format("[%c]", (char)('A'+index)));
        });
    }

}

Checkbox

布局文件：
checkbox.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:orientation="vertical" 
    ohos:left_padding="32vp"> 
    <Text 
        ohos:height="match_content" 
        ohos:width="match_parent" 
        ohos:top_margin="32vp" 
        ohos:text="Question:Which of the following are fruits?" 
        ohos:text_size="20fp" 
        ohos:layout_alignment="left" 
        ohos:multiple_lines="true"/> 
    <DirectionalLayout 
        ohos:height="match_content" 
        ohos:width="match_parent" 
        ohos:orientation="horizontal" 
        ohos:top_margin="8vp"> 
        <Text 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:text="Your Answer:" 
            ohos:text_size="20fp"/> 
        <Text 
            ohos:id="$+id:text_answer" 
            ohos:height="match_content" 
            ohos:width="match_content" 
            ohos:text_size="20fp" 
            ohos:left_margin="18vp" 
            ohos:text="[]" 
            ohos:text_color="#FF3333"/> 
    </DirectionalLayout> 
    <Checkbox 
        ohos:id="$+id:checkbox_1" 
        ohos:top_margin="20vp" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="A Apples" 
        ohos:text_size="20fp" 
        ohos:text_color_on="#FF3333" 
        ohos:text_color_off="#000000"/> 
    <Checkbox 
        ohos:id="$+id:checkbox_2" 
        ohos:top_margin="20vp" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="B Bananas" 
        ohos:text_size="20fp" 
        ohos:text_color_on="#FF3333" 
        ohos:text_color_off="#000000"/> 
    <Checkbox 
        ohos:id="$+id:checkbox_3" 
        ohos:top_margin="20vp" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="C Strawberries" 
        ohos:text_size="20fp" 
        ohos:text_color_on="#FF3333" 
        ohos:text_color_off="#000000" /> 
    <Checkbox 
        ohos:id="$+id:checkbox_4" 
        ohos:top_margin="20vp" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="D Potatoes" 
        ohos:text_size="20fp" 
        ohos:text_color_on="#FF3333" 
        ohos:text_color_off="black" /> 
</DirectionalLayout>

AbilitySlice文件：
CheckboxSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbPalette;
import ohos.agp.components.Checkbox;
import ohos.agp.components.ComponentState;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.components.element.StateElement;

import java.util.HashSet;
import java.util.Set;

public class CheckboxSlice extends AbilitySlice {

    private Text answer;
    private Set<String> selectedSet = new HashSet<>();

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_checkbox);
        answer = (Text) findComponentById(ResourceTable.Id_text_answer);
        initCheckbox();
    }

    private StateElement getStateElement() {
        ShapeElement elementButtonOn = new ShapeElement();
        elementButtonOn.setRgbColor(RgbPalette.RED);
        elementButtonOn.setShape(ShapeElement.OVAL);

        ShapeElement elementButtonOff = new ShapeElement();
        elementButtonOff.setRgbColor(RgbPalette.WHITE);
        elementButtonOff.setShape(ShapeElement.OVAL);

        StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);
        return checkElement;
    }

    private void setCheckedStateChangedListener(Checkbox checkbox, String CheckValue) {
        checkbox.setCheckedStateChangedListener((view, state) -> {
            if (state) {
                selectedSet.add(CheckValue);
            }else {
                selectedSet.remove(CheckValue);
            }
            showAnswer();
        });
    }

    private void showAnswer() {
        String select = selectedSet.toString();
        answer.setText(select);
    }

    private void initCheckbox() {
        Checkbox checkbox1 = (Checkbox) findComponentById(ResourceTable.Id_checkbox_1);
        checkbox1.setButtonElement(getStateElement());
        setCheckedStateChangedListener(checkbox1, "A");
        if (checkbox1.isChecked()) {
            selectedSet.add("A");
        }

        Checkbox checkbox2 = (Checkbox) findComponentById(ResourceTable.Id_checkbox_2);
        checkbox2.setButtonElement(getStateElement());
        setCheckedStateChangedListener(checkbox2, "B");
        if (checkbox2.isChecked()) {
            selectedSet.add("B");
        }

        Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_checkbox_3);
        checkbox3.setButtonElement(getStateElement());
        setCheckedStateChangedListener(checkbox3, "C");
        if (checkbox3.isChecked()) {
            selectedSet.add("C");
        }

        Checkbox checkbox4 = (Checkbox) findComponentById(ResourceTable.Id_checkbox_4);
        checkbox4.setButtonElement(getStateElement());
        setCheckedStateChangedListener(checkbox4, "D");
        if (checkbox4.isChecked()) {
            selectedSet.add("D");
        }
    }

}

DatePicker

布局文件：
data_picker.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:width="match_parent" 
    ohos:height="match_parent" 
    ohos:orientation="vertical"> 
    <DatePicker 
        ohos:id="$+id:date_pick" 
        ohos:height="150vp" 
        ohos:width="300vp" 
        ohos:background_element="#EDEDED" 
        ohos:top_margin="13vp" 
        ohos:layout_alignment="horizontal_center" 
        ohos:selected_normal_text_margin_ratio="6" 
        ohos:selected_text_size="16vp" 
        ohos:selected_text_color="#0000FF" 
        ohos:operated_text_color="#0000FF" 
        ohos:normal_text_size="13vp" 
        ohos:top_line_element="#9370DB" 
        ohos:bottom_line_element="#9370DB" 
        ohos:shader_color="#00CED1"> 
    </DatePicker> 
    <DirectionalLayout 
        ohos:width="match_content" 
        ohos:height="35vp" 
        ohos:top_margin="13vp" 
        ohos:layout_alignment="horizontal_center" 
        ohos:orientation="horizontal"> 
        <Text 
            ohos:width="match_content" 
            ohos:height="match_parent" 
            ohos:text_size="15vp" 
            ohos:padding="4vp" 
            ohos:text="Currently selected date:  "/> 
        <Text 
            ohos:id="$+id:text_date" 
            ohos:height="match_content" 
            ohos:width="100vp" 
            ohos:background_element="$graphic:button_element" 
            ohos:hint="date" 
            ohos:left_margin="13vp" 
            ohos:padding="4vp" 
            ohos:text_size="15vp"> 
        </Text> 
    </DirectionalLayout> 
</DirectionalLayout>

AbilitySlice文件：
DatePickerSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DatePicker;
import ohos.agp.components.Text;

public class DatePickerSlice extends AbilitySlice {

    private DatePicker datePicker;
    private Text textDate;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_data_picker);
        initComponent();
        initDate();
        setValueChangedListener();
    }

    private void initComponent() {
        datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
        textDate = (Text) findComponentById(ResourceTable.Id_text_date);
    }

    private void initDate() {
        int day = datePicker.getDayOfMonth();
        int month = datePicker.getMonth();
        int year = datePicker.getYear();
        textDate.setText(String.format("%02d/%02d/%4d", day, month, year));
    }

    private void setValueChangedListener(){
        datePicker.setValueChangedListener(
                new DatePicker.ValueChangedListener() {
                    @Override
                    public void onValueChanged(DatePicker picker, int year, int monthOfYear, int dayOfMonth) {
                        textDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year));
                    }
                }
        );
    }

}

DirectionalLayout

布局文件：
directional_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:width="match_parent" 
    ohos:height="match_parent" 
    ohos:top_margin="13fp" 
    ohos:orientation="vertical"> 
    <Text 
        ohos:width="match_content" 
        ohos:height="match_content" 
        ohos:text="Lantern riddles of Mid Autumn Festival" 
        ohos:text_alignment="center" 
        ohos:multiple_lines="true" 
        ohos:layout_alignment="center" 
        ohos:top_margin="20vp" 
        ohos:text_size="23vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="1.what man cannot live in a house?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="2.What never asks questions but gets a lot of answers?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="3.A mouse has a large pocket．What is it?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="4.What can hear you without ears and can answer you without a mouth?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="5.What is higher without a head than with a head?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="6.What is dark but made by light?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="7.What person tried to make you smile most of the time?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="8.You have it．You read it．There're some pictures in it?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="9.What animal has a head like a cat, eyes like a cat, a tail like a cat, but isn't a cat? " 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
    <Text 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:text="10.What has hands but no feet, a face but no eyes, tells but not talk?" 
        ohos:multiple_lines="true" 
        ohos:left_margin="20vp" 
        ohos:top_margin="20vp" 
        ohos:text_size="18vp"/> 
</DirectionalLayout>

AbilitySlice文件：
DirectionalLayoutSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class DirectionalLayoutSlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_directional_layout);
    }

}

DependentLayout

布局文件：
dependent_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<DependentLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:id="$+id:parent_layout" 
    ohos:height="match_parent" 
    ohos:width="match_parent"> 
    <ScrollView 
        ohos:height="match_parent" 
        ohos:width="match_parent"> 
        <DirectionalLayout 
            ohos:height="match_content" 
            ohos:width="match_parent" 
            ohos:bottom_padding="70vp" 
            ohos:orientation="vertical"> 
            <DirectionalLayout 
                ohos:height="match_content" 
                ohos:width="match_parent" 
                ohos:alignment="vertical_center" 
                ohos:orientation="horizontal" 
                ohos:background_element="#FFFFFF"> 
                <Text 
                    ohos:id="$+id:title_icon" 
                    ohos:height="match_content" 
                    ohos:width="match_content" 
                    ohos:text="NewsDemo" 
                    ohos:left_margin="20vp" 
                    ohos:text_size="20fp" 
                    ohos:weight="1"/> 
                <Text 
                    ohos:id="$+id:read_num" 
                    ohos:height="match_content" 
                    ohos:width="match_content" 
                    ohos:right_margin="10vp" 
                    ohos:text="reads：10" 
                    ohos:text_size="10fp"/> 
                <Text 
                    ohos:id="$+id:likes_num" 
                    ohos:height="match_content" 
                    ohos:width="match_content" 
                    ohos:right_margin="20vp" 
                    ohos:text="likes：9" 
                    ohos:text_size="10fp"/> 
            </DirectionalLayout> 
            <Text 
                ohos:id="$+id:title_text" 
                ohos:height="match_content" 
                ohos:width="match_parent" 
                ohos:left_margin="20vp" 
                ohos:max_text_lines="4" 
                ohos:multiple_lines="true" 
                ohos:right_margin="20vp" 
                ohos:text="Ten Future Trends of Digital Energy" 
                ohos:text_color="#000000" 
                ohos:text_size="18fp" 
                ohos:top_margin="10vp"/> 
            <Text 
                ohos:id="$+id:title_content" 
                ohos:height="match_content" 
                ohos:width="match_parent" 
                ohos:left_margin="20vp" 
                ohos:multiple_lines="true" 
                ohos:right_margin="20vp" 
                ohos:text="Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency." 
                ohos:text_alignment="center_horizontal" 
                ohos:text_color="#708090" 
                ohos:text_size="16fp" 
                ohos:top_margin="5vp"/> 
            <DirectionalLayout 
                ohos:height="match_content" 
                ohos:width="match_parent" 
                ohos:orientation="horizontal"> 
                <Image 
                    ohos:id="$+id:image_content1" 
                    ohos:height="100vp" 
                    ohos:width="0vp" 
                    ohos:image_src="$media:news_image_left" 
                    ohos:layout_alignment="center" 
                    ohos:left_margin="20vp" 
                    ohos:right_margin="2vp" 
                    ohos:top_margin="10vp" 
                    ohos:weight="1"/> 
                <Image 
                    ohos:id="$+id:image_content2" 
                    ohos:height="100vp" 
                    ohos:width="0vp" 
                    ohos:image_src="$media:news_image" 
                    ohos:layout_alignment="center" 
                    ohos:left_margin="10vp" 
                    ohos:right_margin="2vp" 
                    ohos:top_margin="10vp" 
                    ohos:weight="1"/> 
                <Image 
                    ohos:id="$+id:image_content3" 
                    ohos:height="100vp" 
                    ohos:width="0vp" 
                    ohos:image_src="$media:news_image_right" 
                    ohos:layout_alignment="center" 
                    ohos:left_margin="2vp" 
                    ohos:right_margin="20vp" 
                    ohos:top_margin="10vp" 
                    ohos:weight="1"/> 
            </DirectionalLayout> 
        </DirectionalLayout> 
    </ScrollView> 
    <Component 
        ohos:height="0.5vp" 
        ohos:width="match_parent" 
        ohos:above="$+id:bottom_layout" 
        ohos:background_element="#EAEAEC"/> 
    <DirectionalLayout 
        ohos:id="$+id:bottom_layout" 
        ohos:height="50vp" 
        ohos:width="match_parent" 
        ohos:align_parent_bottom="true" 
        ohos:alignment="vertical_center" 
        ohos:background_element="#ffffff" 
        ohos:left_padding="20vp" 
        ohos:orientation="horizontal" 
        ohos:right_padding="20vp"> 
        <TextField 
            ohos:height="30vp" 
            ohos:width="160vp" 
            ohos:background_element="$graphic:corner_bg_comment" 
            ohos:hint="Enter a comment." 
            ohos:left_padding="5vp" 
            ohos:right_padding="10vp" 
            ohos:text_alignment="vertical_center" 
            ohos:text_size="15vp"/> 
        <Image 
            ohos:height="20vp" 
            ohos:width="20vp" 
            ohos:scale_mode="stretch" 
            ohos:image_src="$media:message_icon" 
            ohos:left_margin="20vp"/> 
        <Image 
            ohos:height="20vp" 
            ohos:width="20vp" 
            ohos:scale_mode="stretch" 
            ohos:image_src="$media:collect_icon" 
            ohos:left_margin="20vp"/> 
        <Image 
            ohos:height="20vp" 
            ohos:width="20vp" 
            ohos:scale_mode="stretch" 
            ohos:image_src="$media:like_icon" 
            ohos:left_margin="20vp"/> 
        <Image 
            ohos:height="20vp" 
            ohos:width="20vp" 
            ohos:scale_mode="stretch" 
            ohos:image_src="$media:share_icon" 
            ohos:left_margin="20vp"/> 
    </DirectionalLayout> 
</DependentLayout>

AbilitySlice文件：
DependentLayoutSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class DependentLayoutSlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_dependent_layout);
    }

}

StackLayout

布局文件：
stack_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<StackLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:id="$+id:stack_layout" 
    ohos:height="match_parent" 
    ohos:width="match_parent"> 
    <Text 
        ohos:id="$+id:text_blue" 
        ohos:text_alignment="bottom|horizontal_center" 
        ohos:text_size="24fp" 
        ohos:text="Layer1" 
        ohos:height="400vp" 
        ohos:width="match_parent" 
        ohos:background_element="#70dbdb" /> 
    <Text 
        ohos:id="$+id:text_light_purple" 
        ohos:text_alignment="bottom|horizontal_center" 
        ohos:text_size="24fp" 
        ohos:text="Layer2" 
        ohos:height="300vp" 
        ohos:width="300vp" 
        ohos:background_element="#EED2EE" /> 
    <Text 
        ohos:id="$+id:text_green" 
        ohos:text_alignment="center" 
        ohos:text_size="24fp" 
        ohos:text="Layer3" 
        ohos:height="200vp" 
        ohos:width="200vp" 
        ohos:background_element="#B4EEB4" /> 
</StackLayout>

AbilitySlice文件：
StackLayoutSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class StackLayoutSlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_stack_layout);
    }

}

TableLayout

布局文件：
table_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:width="match_parent" 
    ohos:height="match_parent" 
    ohos:background_element="#EDEDED" 
    ohos:layout_alignment="center" 
    ohos:orientation="vertical"> 
    <Text 
        ohos:id="$+id:info" 
        ohos:width="match_content" 
        ohos:height="30vp" 
        ohos:text_size="20fp" 
        ohos:top_margin="20vp" 
        ohos:text="" 
        ohos:text_alignment="center" 
        ohos:layout_alignment="horizontal_center"/> 
    <TableLayout 
        ohos:id="$+id:table" 
        ohos:width="700" 
        ohos:height="match_content" 
        ohos:orientation="horizontal" 
        ohos:layout_alignment="horizontal_center" 
        ohos:top_margin="10" 
        ohos:column_count="3"> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="1" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="2" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="3" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="4" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="5" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="6" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="7" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="8" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="9" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="*" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="0" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:width="50vp" 
            ohos:height="50vp" 
            ohos:text_size="15fp" 
            ohos:left_margin="20vp" 
            ohos:top_margin="15vp" 
            ohos:background_element="$graphic:circle_button_element" 
            ohos:text="#" 
            ohos:text_alignment="center"/> 
    </TableLayout> 
    <DirectionalLayout 
        ohos:width="match_content" 
        ohos:height="match_content" 
        ohos:top_margin="20vp" 
        ohos:layout_alignment="horizontal_center" 
        ohos:orientation="horizontal"> 
        <Button 
            ohos:id="$+id:call" 
            ohos:width="60vp" 
            ohos:height="35vp" 
            ohos:text_size="15fp" 
            ohos:text="CALL" 
            ohos:background_element="$graphic:button_element" 
            ohos:text_alignment="center"/> 
        <Button 
            ohos:id="$+id:clear" 
            ohos:width="60vp" 
            ohos:height="35vp" 
            ohos:text_size="15fp" 
            ohos:text="CLEAR" 
            ohos:background_element="$graphic:button_element" 
            ohos:left_margin="10vp" 
            ohos:text_alignment="center"/> 
    </DirectionalLayout> 
</DirectionalLayout>

AbilitySlice文件：
TableLayoutSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

public class TableLayoutSlice extends AbilitySlice {

    private Text info;
    private Button call;
    private Button clear;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_table_layout);
        initComponent();
        setClickedListener();
    }

    private void initComponent() {
        info = (Text)findComponentById(ResourceTable.Id_info);
        call = (Button)findComponentById(ResourceTable.Id_call);
        clear = (Button)findComponentById(ResourceTable.Id_clear);
    }

    private void setClickedListener() {
        call.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                String toastInfo = info.getText();
                if (toastInfo == null || toastInfo.isEmpty()) {
                    toastInfo = "Please enter the number!";
                } else {
                    toastInfo = "Call " + info.getText();
                }
                new ToastDialog(getContext())
                        .setText(toastInfo)
                        .setAlignment(LayoutAlignment.CENTER)
                        .setOffset(0,180)
                        .show();
            }
        });

        clear.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                info.setText("");
            }
        });

        TableLayout table = (TableLayout)findComponentById(ResourceTable.Id_table);
        int childNum = table.getChildCount();
        for (int index = 0; index < childNum; index++) {
            Button child = (Button)(table.getComponentAt(index));
            child.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    if (component instanceof Button) {
                        Button button = (Button)component;
                        info.setText(info.getText() + button.getText());
                    }
                }
            });
        }
    }

}

关联主页跳转：
MainAbilitySlice.java

/*
 * Copyright (c) 2021 Huawei Device Co., Ltd. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.window.dialog.ToastDialog;

/**
 * The main AbilitySlice.
 *
 * @since 2021-01-11
 */
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        setClickedListener(this, findComponentById(ResourceTable.Id_tab_list),
                findComponentById(ResourceTable.Id_list_container),
                findComponentById(ResourceTable.Id_radio_container),
                findComponentById(ResourceTable.Id_checkbox),
                findComponentById(ResourceTable.Id_date_picker),
                findComponentById(ResourceTable.Id_directional_layout),
                findComponentById(ResourceTable.Id_dependent_layout),
                findComponentById(ResourceTable.Id_stack_layout),
                findComponentById(ResourceTable.Id_table_layout)
        );
    }

    private void setClickedListener(Component.ClickedListener clickListener, Component...components) {
        for (Component component : components) {
            if (component == null) {
                continue;
            }
            component.setClickedListener(clickListener);
        }
    }

    @Override
    public void onClick(Component component) {
        String className = "";
        switch (component.getId()) {
            case ResourceTable.Id_tab_list:
                className = "com.huawei.codelab.slice.TabListSlice";
                break;
            case ResourceTable.Id_list_container:
                className = "com.huawei.codelab.slice.ListContainerSlice";
                break;
            case ResourceTable.Id_radio_container:
                className = "com.huawei.codelab.slice.RadioContainerSlice";
                break;
            case ResourceTable.Id_checkbox:
                className = "com.huawei.codelab.slice.CheckboxSlice";
                break;
            case ResourceTable.Id_date_picker:
                className = "com.huawei.codelab.slice.DatePickerSlice";
                break;
            case ResourceTable.Id_directional_layout:
                className = "com.huawei.codelab.slice.DirectionalLayoutSlice";
                break;
            case ResourceTable.Id_dependent_layout:
                className = "com.huawei.codelab.slice.DependentLayoutSlice";
                break;
            case ResourceTable.Id_stack_layout:
                className = "com.huawei.codelab.slice.StackLayoutSlice";
                break;
            case ResourceTable.Id_table_layout:
                className = "com.huawei.codelab.slice.TableLayoutSlice";
                break;
            default:
                break;
        }
        abilitySliceJump(className);
    }

    private void abilitySliceJump(String name) {
        if (name == null || "".equals(name)) {
            return;
        }
        try {
            Class abilitySliceClass = Class.forName(name);
            Object object = abilitySliceClass.newInstance();
            if (object instanceof AbilitySlice) {
                present((AbilitySlice) object, new Intent());
            }
        } catch (Exception e) {
            new ToastDialog(getContext())
                    .setText("Error!")
                    .show();
        }
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

代码修改完成，再次运行程序：
在这里插入图片描述
现在点击文字会跳转到对应的页面：
如点击RadioContainer：
在这里插入图片描述
点击返回可回到主界面，再点击ListContainer：
在这里插入图片描述



这篇关于【模块-Java布局】HarmonyOS Codelab挑战赛记录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程