文章目录
基于鸿蒙前端的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后: