项目实训第二周第二篇

---

基于鸿蒙前端的fraction局部UI实现

---

1.Main_uiAbilitySlice.java，在TabSelectedListener里添加切换fraction的监听事件

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                // 当某个Tab从未选中状态变为选中状态时的回调
                new ToastDialog(getContext()).setText(tab.getText()).show();
                switch(tab.getText()){
                    case "成员管理" :
                        //语句
                        ((FractionAbility)getAbility()).getFractionManager()
                                .startFractionScheduler()
                                .replace(ResourceTable.Id_test_fraction, new Member_management())
                                .submit();
                        break; //可选
                    case "题库" :
                        //语句
                        ((FractionAbility)getAbility()).getFractionManager()
                                .startFractionScheduler()
                                .replace(ResourceTable.Id_test_fraction, new Question_bank())
                                .submit();
                        break; //可选
                    case "上课历史" :
                        //语句
                        break; //可选
                    //你可以有任意数量的case语句
                    default : //可选
                        //语句
                }
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
                // 当某个Tab从选中状态变为未选中状态时的回调
            }

            @Override
            public void onReselected(TabList.Tab tab) {
                // 当某个Tab已处于选中状态，再次被点击时的状态回调
            }
        });

2.main_ui.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="horizontal">

    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="0vp"
        ohos:weight="1"
        ohos:orientation="vertical"
        ohos:background_element="black">

    </DirectionalLayout>

    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="0vp"
        ohos:weight="8"
        ohos:orientation="vertical"
        ohos:background_element="white">

        <DirectionalLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:background_element="white"
            ohos:orientation="vertical">

            <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:layout_alignment="top|left"
                ohos:text="课程名称"
                ohos:text_alignment="center"
                ohos:text_size="10vp"
                ohos:id="$+id:course_name"
                ohos:bottom_margin="5vp"
                ohos:text_color="black"/>

            <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:layout_alignment="top|left"
                ohos:text="学生人数"
                ohos:text_alignment="center"
                ohos:text_size="10vp"
                ohos:id="$+id:student_num"
                ohos:text_color="black"/>

            <TabList
                ohos:id="$+id:tab_list"
                ohos:tab_length="140vp"
                ohos:text_size="10fp"
                ohos:height="36vp"
                ohos:width="match_parent"
                ohos:orientation="horizontal"
                ohos:text_alignment="center"
                ohos:normal_text_color="black"
                ohos:selected_text_color="blue"
                ohos:selected_tab_indicator_color="blue"
                ohos:selected_tab_indicator_height="2vp"/>

        </DirectionalLayout>

        <DirectionalLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:orientation="vertical">

            <StackLayout
                ohos:id="$+id:test_fraction"
                ohos:width="match_parent"
                ohos:height="match_content"/>

        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>

3.Member_management.java，实例化此fraction替换主界面中Id为test_fraction的StackLayout元素（初始为空）。

import com.chinasofti.smartclassroomtv.ResourceTable;
import com.chinasofti.smartclassroomtv.data.SampleItem;
import com.chinasofti.smartclassroomtv.data.SampleItemProvider;
import com.chinasofti.smartclassroomtv.demain.Question;
import ohos.aafwk.ability.fraction.Fraction;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.*;
import ohos.agp.window.dialog.ToastDialog;

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

public class Member_management extends Fraction {
    private ListContainer listContainer;
    private Button aft;
    private Button pre;
    private Button search_btn;
    private Button return_btn;
    private Button show_add_student_frame;
    private Button close_add_student_frame;
    private Button add_student_btn;
    private TextField id_input;
    private DependentLayout add_student_frame;
    private TextField search_tf;
    private int page = 1;
    private Text page_text;
    private Button delete_btn;
    List<SampleItem> list;
    SampleItemProvider sampleItemProvider;

    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        Component component=scatter.parse(ResourceTable.Layout_menber_management,container,false);
        return  component;
    }

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        listContainer= (ListContainer)
                getFractionAbility().findComponentById(ResourceTable.Id_list_container_member);
        list = getData(page);
        sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
        listContainer.setItemProvider(sampleItemProvider);

        add_student_frame = (DependentLayout)
                getFractionAbility().findComponentById(ResourceTable.Id_add_student_frame);

        close_add_student_frame = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_cancle);

        close_add_student_frame.setClickedListener(lis->{
            //显示添加学生界面
            add_student_frame.setVisibility(1);

        });

        show_add_student_frame = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_btn_add_student);

        show_add_student_frame.setClickedListener(lis->{
            //显示添加学生界面
            add_student_frame.setVisibility(0);

        });

        return_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_btn_return);

        return_btn.setClickedListener(lis->{
            sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
        });

        add_student_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_add_btn);

        id_input = (TextField)
                getFractionAbility().findComponentById(ResourceTable.Id_id_input);

        //在这里添加学生
        add_student_btn.setClickedListener(lis->{
            String id = id_input.getText();
            if(id.equals(null))
                return;
            SampleItem sampleItem = new SampleItem("name",id);
            list.add(sampleItem);
            sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
            add_student_frame.setVisibility(1);
        });


        search_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_btn_search);

        search_tf = (TextField)
                getFractionAbility().findComponentById(ResourceTable.Id_search);

        search_btn.setClickedListener(lis->{
            String nameOrId = search_tf.getText();
            ArrayList<SampleItem> search_result = new ArrayList<>();
            for (int i=0;i<list.size();i++){
                SampleItem sampleItem = list.get(i);
                if (sampleItem.getId().equals(nameOrId)||sampleItem.getName().equals(nameOrId)){
                    search_result.add(sampleItem);
                }
            }

//            if (search_result.size()==0){
                new ToastDialog(getContext()).setText("无搜索结果").show();
//                return;
//            }

            sampleItemProvider = new SampleItemProvider(search_result, getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
        });

        delete_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_delete);

        delete_btn.setClickedListener(lis->{
            int len = (Math.min(list.size(),page*14) - (page-1)*14);
            int count = 0;
            for (int i = 0; i< len ; i++ ){
                Checkbox cb = (Checkbox) listContainer.getComponentAt(i).findComponentById(ResourceTable.Id_item_name);
                if (cb.isChecked()){
                    list.remove((page-1)*14 + (i-count));
                    count++;
                }
            }
            sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
        });


        page_text = (Text)
                getFractionAbility().findComponentById(ResourceTable.Id_page);
        page_text.setText(""+page);

        aft = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_aft);

        aft.setClickedListener(lis->{
            if ((page)*14 >= list.size())
                return;
            sampleItemProvider = new SampleItemProvider(getPageData(++page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
            page_text.setText(""+page);
        });

        pre = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_pre);

        pre.setClickedListener(lis->{
            if (page<=1)
                return;
            sampleItemProvider = new SampleItemProvider(getPageData(--page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
            page_text.setText(""+page);
        });

    }

    //从后端数据库获得所有学生信息，保存到list
    private ArrayList<SampleItem> getData(int page) {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 1; i <= 45; i++) {
            list.add(new SampleItem("姓名"+i,"id"+i));
        }
        return list;
    }

    //从list获取一页的学生信息，不连接后端
    private ArrayList<SampleItem> getPageData(int page) {
        ArrayList<SampleItem> list2 = new ArrayList<>();
        for (int i = (page-1)*14; i < Math.min(list.size(),page*14); i++) {
            list2.add(list.get(i));
        }
        return list2;
    }

}

4.menber_management.xml文件，要切换的局部界面布局

menber_management.xml：

<?xml version="1.0" encoding="utf-8"?>

<com.chinasofti.smartclassroomtv.component.MyDependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="yellow"
    >

    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:background_element="yellow">

        <DirectionalLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:orientation="horizontal"
            ohos:background_element="black"
            ohos:margin="5vp">

            <TextField
                ohos:id="$+id:search"
                ohos:height="30vp"
                ohos:width="0vp"
                ohos:background_element="$graphic:capsule_button_element"
                ohos:layout_alignment="top|left"
                ohos:hint="输入学生姓名或id"
                ohos:text_color="black"
                ohos:text_font="HwChinese-medium"
                ohos:text_alignment="vertical_center|left"
                ohos:padding="5vp"
                ohos:top_margin="10vp"
                ohos:bottom_margin="10vp"
                ohos:left_margin="10vp"
                ohos:text_size="10vp"
                ohos:weight="4"/>

            <Button
                ohos:width="0vp"
                ohos:height="30vp"
                ohos:background_element="$graphic:add_student_button"
                ohos:text="搜索"
                ohos:padding="5vp"
                ohos:id="$+id:btn_search"
                ohos:text_size="10vp"
                ohos:left_margin="5vp"
                ohos:top_margin="10vp"
                ohos:text_color="black"
                ohos:weight="0.5"/>

            <Button
                ohos:width="0vp"
                ohos:height="30vp"
                ohos:background_element="$graphic:add_student_button"
                ohos:text="返回"
                ohos:padding="5vp"
                ohos:id="$+id:btn_return"
                ohos:text_size="10vp"
                ohos:left_margin="5vp"
                ohos:top_margin="10vp"
                ohos:text_color="black"
                ohos:weight="0.5"/>

            <Button
                ohos:width="0vp"
                ohos:height="30vp"
                ohos:background_element="$graphic:add_student_button"
                ohos:text="批量导入学生"
                ohos:padding="5vp"
                ohos:id="$+id:btn_batch_import_student"
                ohos:text_size="10vp"
                ohos:left_margin="250vp"
                ohos:top_margin="10vp"
                ohos:text_color="black"
                ohos:weight="1"/>

            <Button
                ohos:width="0vp"
                ohos:height="30vp"
                ohos:background_element="$graphic:add_student_button"
                ohos:text="添加学生"
                ohos:padding="5vp"
                ohos:id="$+id:btn_add_student"
                ohos:text_size="10vp"
                ohos:left_margin="50vp"
                ohos:top_margin="10vp"
                ohos:text_color="black"
                ohos:weight="1"/>


        </DirectionalLayout>

        <DirectionalLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:width="match_parent"
            ohos:height="350vp"
            ohos:orientation="vertical"
            ohos:background_element="red"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp">

            <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:align_parent_top="true"
                ohos:text="学生（人数）"
                ohos:text_alignment="center"
                ohos:text_size="10vp"
                ohos:id="$+id:title"
                ohos:text_color="black"
                ohos:left_margin="10vp"
                ohos:top_margin="10vp"
                ohos:bottom_margin="10vp"/>

            <DirectionalLayout
                xmlns:ohos="http://schemas.huawei.com/res/ohos"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:background_element="blue"
                ohos:orientation="horizontal">

                <Checkbox
                    ohos:id="$+id:item_name"
                    ohos:height="match_content"
                    ohos:weight="1"
                    ohos:width="0vp"
                    ohos:text="姓名"
                    ohos:left_margin="16vp"
                    ohos:text_size="10fp" />


                <Text
                    ohos:id="$+id:item_id"
                    ohos:height="match_content"
                    ohos:weight="1"
                    ohos:width="0vp"
                    ohos:padding="4vp"
                    ohos:text="Id"
                    ohos:text_size="10fp"
                    ohos:left_margin="10vp"
                    ohos:text_alignment="center"/>

                <Text
                    ohos:id="$+id:item_oprate"
                    ohos:height="match_content"
                    ohos:weight="1"
                    ohos:width="0vp"
                    ohos:padding="4vp"
                    ohos:text="操作"
                    ohos:left_margin="10vp"
                    ohos:text_size="10fp"
                    ohos:text_alignment="center"/>


            </DirectionalLayout>

            <ListContainer
                ohos:width="match_parent"
                ohos:height="match_content"
                ohos:background_element="#FFFFFFFF"
                ohos:id="$+id:list_container_member"
                >

            </ListContainer>


        </DirectionalLayout>

        <DirectionalLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="#FFF700FF"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:id="$+id:bottom">

            <DirectionalLayout
                xmlns:ohos="http://schemas.huawei.com/res/ohos"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:background_element="#FF000000"
                ohos:orientation="horizontal"
                ohos:margin="10vp"
                ohos:layout_alignment="horizontal_center">

                <Button
                    ohos:id="$+id:pre"
                    ohos:height="match_parent"
                    ohos:width="50vp"
                    ohos:text="前"
                    ohos:text_size="10vp"
                    ohos:background_element="$graphic:add_student_button"
                    ohos:text_alignment="center"/>


                <Text
                    ohos:id="$+id:page"
                    ohos:height="match_parent"
                    ohos:width="50vp"
                    ohos:text="page"
                    ohos:text_size="10vp"
                    ohos:background_element="$graphic:add_student_button"
                    ohos:text_alignment="center"
                    ohos:left_margin="10vp"
                    ohos:right_margin="10vp"/>

                <Button
                    ohos:id="$+id:aft"
                    ohos:height="match_parent"
                    ohos:width="50vp"
                    ohos:text="后"
                    ohos:text_size="10vp"
                    ohos:background_element="$graphic:add_student_button"
                    ohos:text_alignment="center"/>

            </DirectionalLayout>

        </DirectionalLayout>

        <DirectionalLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="#FFC300FF"
            ohos:left_margin="5vp"
            ohos:right_margin="5vp"
            ohos:id="$+id:delete_bottom">

            <Button
                ohos:id="$+id:delete"
                ohos:height="match_content"
                ohos:width="50vp"
                ohos:text="删除"
                ohos:text_size="10vp"
                ohos:background_element="$graphic:add_student_button"
                ohos:text_alignment="center"
                ohos:margin="5vp"/>

        </DirectionalLayout>



    </DirectionalLayout>

    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="150vp"
        ohos:width="200vp"
        ohos:background_element="#FFFFD500"
        ohos:vertical_center="true"
        ohos:horizontal_center="true"
        ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:visibility="invisible"
        ohos:id="$+id:add_student_frame">

        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:align_parent_top="true"
            ohos:align_parent_left="true"
            ohos:text="添加学生"
            ohos:text_alignment="center"
            ohos:text_size="10vp"
            ohos:id="$+id:add_student"
            ohos:text_color="black"
            ohos:left_margin="10vp"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"/>

        <Button
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:background_element="$graphic:add_student_button"
            ohos:align_parent_top="true"
            ohos:align_parent_right="true"
            ohos:text="取消"
            ohos:padding="5vp"
            ohos:id="$+id:cancle"
            ohos:text_size="10vp"
            ohos:margin="5vp"
            ohos:text_color="black"/>

        <TextField
            ohos:id="$+id:id_input"
            ohos:width="100vp"
            ohos:height="match_content"
            ohos:background_element="$graphic:capsule_button_element"
            ohos:vertical_center="true"
            ohos:horizontal_center="true"
            ohos:hint="输入学生id"
            ohos:text_color="black"
            ohos:text_font="HwChinese-medium"
            ohos:text_alignment="vertical_center|left"
            ohos:padding="5vp"
            ohos:top_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:left_margin="10vp"
            ohos:text_size="10vp"/>

        <Button
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:background_element="$graphic:add_student_button"
            ohos:align_parent_bottom="true"
            ohos:horizontal_center="true"
            ohos:text="添加"
            ohos:padding="5vp"
            ohos:id="$+id:add_btn"
            ohos:text_size="10vp"
            ohos:margin="10vp"
            ohos:text_color="black"/>



    </DependentLayout>

</com.chinasofti.smartclassroomtv.component.MyDependentLayout>

5.主界面演示

主界面中的StackLayout元素未被fraction切换：

点击成员管理，StackLayout元素被切换为Member_management后：

---