組件開發ScrollView嵌套ListContainer滑動問題詳解
ScrollView嵌套ListContainer
就ScrollView嵌套ListContainer的滑動問題，社區問答中也是遇見了兩次提問的小伙伴。在幫助第一個小伙解決這個問題的時候，我提供了一個思路和以前在寫Android ScrollView嵌套ListView滑動問題的解決方法。經過方法的修改也是解決了他的問題，后續沒有再把這個問題解決的全過程記錄下來，直到發現有第二個小伙伴也遇到了同樣的問題，準備把這個小問題寫成一篇帖子，希望后面再遇到“ScrollView嵌套ListContainer 滑動問題”的同學可以幫助到你們。
思路
一、ScrollView嵌套ListContainer 想讓ListContainer不滑動，只滑動ScrollView。在Android中有個東西叫做攔截器，ScrollView的攔截器，通過對攔截器的賦值達到只滑動ScrollView，不滑動ListView。
調用方式
因為ScrollView繼承自ViewGroup，在ViewGroup中有有dispatchTouchEvent()這個方法，
但是在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高度的方法。這里就粘一下圖
思路沒有變，將每次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;
- }
- }
查看效果
編寫自定義高度方法：
- 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);
- }
調用方法：
實現效果：
出問題了，不能滑動!!!!!!!
找到了，問題在布局中。
重新運行，查看結果：
OK了，以達到了最終的效果。
代碼放在了下面的資源鏈接里，大家可以進行參考。
