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

最新推荐文章于 2024-05-26 21:03:30 发布
最新推荐文章于 2024-05-26 21:03:30 发布
阅读量273 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_s_b_/article/details/116084741
版权
本文介绍了如何使用Codelab启动应用，包括下载、解压、使用DevEcoStudio打开ComponentCodelab，以及详细步骤说明了TabList、TabLayout、ListContainer等组件的使用和事件响应设置。跟随教程，快速掌握基础能力开发。
摘要由CSDN通过智能技术生成

下载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：
在这里插入图片描述

时空秋千
关注
HarmonyOS应用开发-常用组件与布局
11-05
3. **布局（Layout）**：在 HarmonyOS 中，布局是用来组织和定位 UI 元素的方式。常见的布局有 `Linear Layout`（线性布局，水平或垂直排列元素）、`Relative Layout`（相对布局，元素相对彼此的位置）、`Grid ...
OpenHarmony环境搭建补充
嵌入式学习记录站点
03-01 491
OpenHarmony环境搭建补充
OpenHarmony介绍
CSDN官方赛事助手，为用户提供权威赛事资讯与服务，打造赛事交流平台，帮助用户解答疑问、提升技能、参赛备赛。
04-06 3691
前言 之前和一些市场朋友沟通，他们会有一些概念上的问题，比如OpenHarmony是不是等于HarmonyOS，鸿蒙究竟是不是传闻中的安卓套壳呢？本系列文章呢也是作为科普向文章，以我个人的理解带大家了解一些相关知识，从而调起大家自主学习的兴趣，共同学习进步。 一、OpenHarmony & Harmony OS 我们首先先来区分OpenHarmony和HarmonyOS两个概念。 用通俗的话解释，OpenHarmony如果比喻成毛坯房，HarmonyOS就是华为基于这个毛...
【模块-Java布局】十分钟挑战鸿蒙Codelab组件
liuzhen007的专栏
04-25 2277
前言 华为鸿蒙系统作为国产移动端手机系统的希望（不限于移动端），本人虽然不能参与其研发，但还是想出一份力，推广一波儿的。 正文 鸿蒙系统推出那么久，很多功能也在不断完善过程中。 系统平台肯定会为大家准备很多的轮子，今天我们就来看看一个轮子——Codelab组件。 一切的前提：注册鸿蒙开发者帐号 这是很多人都会忽略的地方，特别是习惯安卓开发的同学。 这一步，是我没有想到的，我原本以为鸿蒙系统开发者会和安卓一样，非常方便的进行移动端开发工作。实际上并非如此，鸿蒙开发团队选择和苹果一样的策略，需要先
OpenHarmony源码转换器—多线程特性转换
NVG_Haru的博客
01-04 1440
OpenHarmony源码转换器—多线程特性转换
OpenHarmony—Hap包签名工具
maniuT的博客
02-02 1608
为了保证OpenHarmony应用的完整性和来源可靠，在应用构建时需要对应用进行签名。经过签名的应用才能在真机设备上安装、运行、和调试。developtools_hapsigner仓 提供了签名工具的源码，包含密钥对生成、CSR文件生成、证书生成、Profile文件签名、Hap包签名等功能。针对无需通过ACL跨级别申请权限的应用，DevEco Studio为开发者提供了自动化签名方案，可以一键完成应用/服务签名。具体可参考自动化签名方案。
harmonyos英文怎么读-HarmonyOS-project:HarmonyOS-项目
07-01
HarmonyOS 采用了组件化的设计，允许开发者按需选择和组合功能模块，从而实现更高效的应用开发。此外，它还支持多种编程语言，如 Java、JS 和 Kotlin，以满足不同开发者的需求。这些特性使得 HarmonyOS 成为了一个对...
HCIA-HarmonyOS Application Developer V1.0 版本说明.pdf
07-20
华为推出的HCIA-HarmonyOS认证主要针对HarmonyOS应用开发方向的学习与技能评估。该认证旨在培养开发者对HarmonyOS应用开发的全面理解和实践能力，涵盖了HarmonyOS应用开发的基础知识与深入技能。以下是HCIA-Harmony...
3-6.HarmonyOS概述：应用开发基础知识.pdf
10-21
2. **HAP（HarmonyOS Ability Package）**: HAP 是 Ability 的部署包，是构建 HarmonyOS 应用的基本模块。一个 HAP 包含代码、资源、第三方库和应用配置文件。HAP 可以分为两种类型： - **Entry HAP**: 应用的主...
HarmonyOS-实现传统九宫格抽奖应用.zip
12-28
1. **HarmonyOS操作系统**：HarmonyOS是由华为开发的面向全场景的分布式操作系统，它具备跨平台、模块化、安全和高效等特点。在HarmonyOS上开发应用，开发者可以利用其独特的分布式能力，实现设备间的无缝协同。 2....
OpenHarmony ≠ HarmonyOS
qq_45430571的博客
01-22 8972
OpenHarmony ≠ HarmonyOS 先让我们来看看官方的表述： 这里我说一下我的理解， HarmonyOS： 一套操作系统满足多个设备需求； 各系统在系统层面一致，可互动，可共享； 一次开发，多个设备都可以部署。 OpenHarmony： 只拥有HarmonyOS的基础能力； 开源项目，共商、共建、共享、共赢。 简单来说就是OpenHarmony可以说是HarmonyOS的基础，HarmonyOS是OpenHarmony的包装。 而且，其HarmonyOS主要支持Java和Js
20年老程序员谈谈：鸿蒙开发会成为下一个java吗？_鸿蒙程序员怎么样(1)
2401_84150320的博客
04-15 1189
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。而鸿蒙开发也是一个这样的新风口。互联网大厂都是行业的领头羊和先行者，鸿蒙系统无疑将成为一个新的发展趋势，现在成为第一波投入学习成本的人将获得时间优势，在鸿蒙系统开发在市场广泛流行之前掌握先机，自然有更大的机会进入大厂工作!
鸿蒙开发实战-手写一个Openharmony投屏工具
m0_62167422的博客
02-26 657
【代码】鸿蒙开发实战-手写一个Openharmony投屏工具。
【OpenHarmony】OpenHarmony 简介 ( HarmonyOS / OpenHarmony - Android / AOSP 对比关联 | 鸿蒙开发者定位及使用的开发语言和开发工具)
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-26 5143
一、OpenHarmony 简介 1、OpenHarmony 由来 2、OpenHarmony 架构 3、OpenHarmony 特点 二、HarmonyOS / OpenHarmony - Android / AOSP 对比关联 1、HarmonyOS 与 Android 的关系 2、HarmonyOS 与 OpenHarmony 的关系 3、HarmonyOS 与 OpenHarmony 的版本迭代 三、鸿蒙开发者定位及使用的开发语言和开发工具
OpenHarmony一次开发，多端部署
坚果的博客
12-06 1万+
定义：一套代码工程，一次开发上架，多端按需部署。目标：支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。不同设备间的屏幕尺寸、色彩风格等存在差异，页面如何适配。不同设备的系统能力有差异，如智能穿戴设备是否具备定位能力、智慧屏是否具备摄像头等，功能如何兼容。
OpenJDK在OpenHarmony上异常问题分析
weimin217的博客
10-13 491
OpenHarmony的上运行OpenJDK
OpenHarmony代码操作总结
热门推荐
@_南先生的博客
04-05 5万+
鸿蒙开源社区代码操作总结 本文主要介绍windows环境下鸿蒙开源社区代码操作：代码下载，开发环境搭建，版本编译，烧写，挂载，代码运行，上库等完成操作流程总结；
分析了 200w 行 OpenHarmony 2.0 源码后，有了这些发现
CSDN资讯
06-04 6166
作者 | 阿拉神农 责编 | 欧阳姝黎背景OpenHarmony 2.0于2021年6月2号开源，第一时间下载了代码，做了一些分析。晚上HarmonyOS 2发布，看了直播，感...
鸿蒙OS开源项目的OpenHarmony
这个时代，作为程序员可能要学习小程序
01-13 7874
点击上方的终端研发部，右上角选择“设为星标”前言华为消费者业务CEO余承东在华为开发者大会HDC 2020上正式发布了鸿蒙OS 2.0系统，并开源其源代码。OpenHarmony广泛应用...
HarmonyOS学习资源合集：文档、案例、视频
常见问题部分解答了一系列与HarmonyOS开发相关的问题，例如HarmonyOS元服务的设计与开发、Java和JS开发、模拟器的使用方法、如何使用JsJava开发UI界面、应用配置以及预览器运行等。这些内容为开发者提供了解决实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值