HarmonyOS組件開發 ScrollView嵌套ListContainer 滑動沖突問題

愛吃土豆絲的打工人 2021-08-15 18:14:21 阅读数:282

本文一共[544]字,预计阅读时长:1分钟~
harmonyos scrollview 嵌套 listcontainer

ScrollView嵌套ListContainer

就ScrollView嵌套ListContainer的滑動問題,社區問答中也是遇見了兩次提問的小夥伴。在幫助第一個小夥解决這個問題的時候,我提供了一個思路和以前在寫Android ScrollView嵌套ListView滑動問題的解决方法。經過方法的修改也是解决了他的問題,後續沒有再把這個問題解决的全過程記錄下來,直到發現有第二個小夥伴也遇到了同樣的問題,准備把這個小問題寫成一篇帖子,希望後面再遇到“ScrollView嵌套ListContainer 滑動問題”的同學可以幫助到你們。

思路

一、ScrollView嵌套ListContainer 想讓ListContainer不滑動,只滑動ScrollView。在Android中有個東西叫做攔截器,ScrollView的攔截器,通過對攔截器的賦值達到只滑動ScrollView,不滑動ListView。 image.png 調用方式 image.png 因為ScrollView繼承自ViewGroup,在ViewGroup中有有dispatchTouchEvent()這個方法, image.png 但是在HarmonyOS中,ScrollView繼承自ComponentContainer,而且在ComponentContainer中沒有類似於dispatchTouchEvent的攔截器方法,那麼攔截器不能搞就得換方法。 二、這時第二個思路也成型了,因為ScrollView的高度是根據它內部的組件的高度變化的,當內部的組件高度大於手機屏幕的高度時會出現ScrollView的滾動,反之不會出現。 那麼就只能從ScrollView的高度入手了,要改變ScrollView的高度就必須去改變它內部組件的高度,那麼問題來了ScrollView嵌套ListContainer,ListContainer的高度最大只能到屏幕大小或者是固定於屏幕內部,一旦高度達到所設置的高度,ListContainer就會出現自動滾動此時ScrollView的滾動也會失效,這裏是焦點的關系滑動動作取到的焦點會在它當前組件上。 思路到這裏也就清晰了,ListContainer的高度大於原始設置的高度時會發生滑動,ScrollView在內部組件高度大於手機屏幕時才會滑動。那麼如果把ListContainer的高度設置成一個動態的固定值,ListContainer的數據永遠不會被填充滿,ListContainer就不會出現滑動。隨即ListContainer的高度如果大於了屏幕的高度ScrollView就會滑動。 OK,問題找到了,解决ListContainer的動態高度就解决的滑動沖突。

解决問題

首先我找到了當初寫Android時動態Listview高度的方法。這裏就粘一下圖 image.png 思路沒有變,將每次listview的Item高度相加作為listview的整體高度,listview的高度就是動態的變化,listview的高度會根據數據的增加而變化。 ==根據參考== 下面開始寫代碼 首先整體布局文件,很簡單ScrollView嵌套ListContainer 為了效果明顯加入了一個圖片

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent">
<ScrollView
ohos:id="$+id:view"
ohos:height="match_parent"
ohos:width="match_parent">
<!--設置DirectionalLayout的高度為match_parent-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Image
ohos:id="$+id:img"
ohos:height="100vp"
ohos:width="100vp"
ohos:image_src="$media:icon"></Image>
<ListContainer
ohos:id="$+id:list"
ohos:height="match_parent"
ohos:width="match_parent"
></ListContainer>
</DirectionalLayout>
</ScrollView>
</DirectionalLayout>
複制代碼

ListContainer的Item 布局,這裏很簡單就放一個文本

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:left_margin="16vp"
ohos:right_margin="16vp"
ohos:orientation="vertical">
<Text
ohos:id="$+id:item_index"
ohos:height="match_content"
ohos:width="match_content"
ohos:padding="4vp"
ohos:text="Item0"
ohos:text_size="20fp"
ohos:layout_alignment="center"/>
</DirectionalLayout>
複制代碼

創建SampleItem.java,作為ListContainer的數據包裝類。

public class SampleItem {
private String name;
public SampleItem(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
複制代碼

寫一個ListContainer的適配器用於放數據

public class SampleItemProvider extends BaseItemProvider {
private List<SampleItem> list;
private AbilitySlice slice;
public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) {
this.list = list;
this.slice = slice;
}
@Override
public int getCount() {
return list == null ? 0 : list.size();
}
@Override
public Object getItem(int position) {
if (list != null && position >= 0 && position < list.size()){
return list.get(position);
}
return null;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
final Component cpt;
if (component == null) {
cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null, false);
} else {
cpt = component;
}
SampleItem sampleItem = list.get(position);
Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
text.setText(sampleItem.getName());
return cpt;
}
}
複制代碼

在Java代碼中添加ListContainer的數據,並適配其數據結構。 還沒有加動態高度的方法。

public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initListContainer();
}
private void initListContainer() {
ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list);
List<SampleItem> list = getData();
listContainer.setBoundarySwitch(true); //添加分界線
SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this);
listContainer.setItemProvider(sampleItemProvider);
}
private ArrayList<SampleItem> getData() {
ArrayList<SampleItem> list = new ArrayList<>();
for (int i = 0; i < 30; i++) {
list.add(new SampleItem("Item" + i));
}
return list;
}
}
複制代碼

查看效果

1.gif

編寫自定義高度方法:

private void setListContainerHeight(ListContainer listContainer) {
//獲取當前listContainer的適配器
BaseItemProvider BaseItemProvider = listContainer.getItemProvider();
if (BaseItemProvider == null){
return;
}
int itemHeight = 0;
for (int i = 0; i < BaseItemProvider.getCount(); i++) {
//循環將listContainer適配器的Item數據進行累加
Component listItem = BaseItemProvider.getComponent(i, null, listContainer);
itemHeight += listItem.getHeight();
}
//對當前listContainer進行高度賦值
ComponentContainer.LayoutConfig config = listContainer.getLayoutConfig();
//這邊加上(listContainer.getBoundaryThickness() * (BaseItemProvider.getCount()+1))
//listContainer.getBoundaryThickness() 就是分界線的高度
//(BaseItemProvider.getCount()+1) 是Item的數量 加1 是因為頂部還有一條分界線
config.height = itemHeight
+ (listContainer.getBoundaryThickness() * (BaseItemProvider.getCount()+1));
//賦值
listContainer.setLayoutConfig(config);
}
複制代碼

調用方法: image.png 實現效果:

2.gif

出問題了,不能滑動!!!!!!!

找到了,問題在布局中 image.png

重新運行,查看結果:

3.gif

OK了,以達到了最終的效果。 代碼放在了下面的資源鏈接裏,大家可以進行參考。

源代碼

版权声明:本文为[愛吃土豆絲的打工人]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815181418962q.html