You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Fragment中TabLayout无法滑动,嵌入底部导航后滑动白屏求助

问题分析与解决方案

核心问题1:重复的Tab选中逻辑触发冲突

你在registerOnPageChangeCallback里手动调用tabLayout.getTabAt(position).select()完全多余——TabLayoutMediator已经自动完成了TabLayout和ViewPager2的双向绑定:滑动ViewPager2时会自动选中对应Tab,点击Tab时也会自动切换ViewPager2页面。手动调用选中Tab会触发双向绑定的循环回调,直接导致滑动逻辑混乱,甚至出现无法滑动的情况。

核心问题2:ViewPager2布局高度设置错误(白屏元凶)

如果你的fragment_bookcase.xml中ViewPager2的高度设为wrap_content,在底部导航嵌套TabFragment的场景下,ViewPager2无法正确计算子Fragment的高度,滑动后就会出现白屏。必须将ViewPager2的高度改为match_parent或者固定值。

修正后的代码

BookcaseFragment修改版

public class BookcaseFragment extends Fragment {

    private TabLayout tabLayout;
    private ViewPager2 mViewPager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bookcase, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        tabLayout = view.findViewById(R.id.tab_layout_bookcase);
        mViewPager = view.findViewById(R.id.bookcase_viewpager);

        BookcaseViewPagerAdapter adapter = new BookcaseViewPagerAdapter(this);
        mViewPager.setAdapter(adapter);

        // TabLayoutMediator已完成双向绑定,无需额外处理Tab选中
        new TabLayoutMediator(tabLayout, mViewPager, (tab, position) -> {
            switch (position){
                case 0:
                    tab.setText("关注");
                    break;
                case 1:
                    tab.setText("已下载");
                    break;
                case 2:
                    tab.setText("已观看");
                    break;
            }
        }).attach();

        // 若不需要额外页面切换逻辑,直接删掉下面的回调;若有其他逻辑,保留但移除Tab选中代码
        /*
        mViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                // 移除tabLayout.getTabAt(position).select();
                System.out.println(position);
            }
        });
        */
    }
}

布局文件检查(fragment_bookcase.xml)

确保ViewPager2高度设置正确:

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/bookcase_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

额外排查点

如果修改后仍有白屏,检查子Fragment(FollowingFragment、DownloadedFragment等)的onCreateView方法,确保它们正确返回了布局,没有出现空布局或加载失败的情况。

内容的提问来源于stack exchange,提问作者Huy Ngô

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 10:55:17