如何在TabView中懒加载标签页？是否有内置实现机制？

不同技术栈的TabView组件大多提供了内置懒加载机制，无需手动监听标签选中事件来实现内容加载，以下是主流平台的具体实现方式：

SwiftUI #

SwiftUI 的 TabView 默认采用懒加载策略：只有当标签页被首次选中时，对应的视图才会完成初始化与加载。无需额外配置，直接定义标签内容即可，若需更精准的延迟控制，可结合 LazyView 封装视图：

TabView {
    Text("首页内容")
        .tabItem {
            Image(systemName: "house")
            Text("首页")
        }
    LazyView {
        DetailView() // 首次选中该标签时才会创建并加载此视图
    }
    .tabItem {
        Image(systemName: "list.bullet")
        Text("详情")
    }
}

Android（ViewPager2 + TabLayout） #

搭配 TabLayout 使用的 ViewPager2 内置懒加载逻辑，默认预加载当前页面左右各1个页面，可通过关闭预加载让页面仅在选中时加载：

val viewPager = findViewById<ViewPager2>(R.id.viewPager)
viewPager.adapter = MyTabAdapter(this)
viewPager.offscreenPageLimit = 0 // 关闭预加载，仅加载当前选中页面

val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
    tab.text = "标签${position+1}"
}.attach()

同时，FragmentStateAdapter 本身会按需创建Fragment，仅当页面需要显示时才触发 createFragment 方法。

Vue.js（主流组件库） #

主流Vue组件库的Tab组件都支持内置懒加载：

• Element UI：给 el-tab-pane 添加 lazy 属性

<el-tabs>
  <el-tab-pane label="标签1" name="1">即时加载内容</el-tab-pane>
  <el-tab-pane label="标签2" name="2" lazy>首次选中时加载内容</el-tab-pane>
</el-tabs>

• Naive UI：通过 n-tab-pane 的 lazy 属性控制

<n-tabs>
  <n-tab-pane name="1" label="标签1">即时内容</n-tab-pane>
  <n-tab-pane name="2" label="标签2" :lazy="true">懒加载内容</n-tab-pane>
</n-tabs>

React（Ant Design Tabs） #

Ant Design 的 Tabs 组件可通过 lazy 属性开启懒加载，标签内容仅在首次激活时渲染：

import { Tabs } from 'antd';
const { TabPane } = Tabs;

function App() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="标签1" key="1">即时加载内容</TabPane>
      <TabPane tab="标签2" key="2" lazy>首次选中时加载的内容</TabPane>
    </Tabs>
  );
}

内容的提问来源于stack exchange，提问作者JamesL