Flutter实现滚动自动选中首个元素的TabBar（类似Airbnb首页）

不管是移动端还是前端，实现这个功能的核心逻辑都一致：监听内容容器的滚动事件，计算当前可视区域对应的Tab索引，同步更新TabBar的选中状态；反过来点击Tab时，让内容容器滚动到对应区域。下面分不同平台给出具体实现：

iOS（Swift + UIKit） #

如果用UICollectionView做横向滚动的内容容器，每个页面对应一个Tab，实现起来很简单：

1. 先把UICollectionView和TabBar的基础布局做好，每个Tab对应CollectionView的一个section/page。
2. 给CollectionView设置代理，监听滚动：

collectionView.delegate = self

3. 在滚动代理方法里计算当前页面索引，更新TabBar选中状态：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 按页面宽度计算当前滚动到的索引
    let currentIndex = Int(scrollView.contentOffset.x / scrollView.bounds.width)
    // 避免重复触发选中逻辑
    if currentIndex != tabBar.selectedItemIndex {
        tabBar.selectedItemIndex = currentIndex
    }
}

4. 点击TabBar时，让CollectionView滚动到对应页面：

func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
    guard let index = tabBar.items?.firstIndex(of: item) else { return }
    let targetOffset = CGPoint(x: CGFloat(index) * collectionView.bounds.width, y: 0)
    collectionView.setContentOffset(targetOffset, animated: true)
}

如果是垂直滚动的UITableView，就把contentOffset.x换成contentOffset.y，根据section的高度计算对应的Tab索引就行。

Android（Kotlin + ViewPager2/TabLayout） #

用ViewPager2搭配TabLayout是官方推荐的方式，默认就能实现滚动联动：

1. 布局里加好TabLayout和ViewPager2：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

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

2. 绑定两者，自动实现滚动联动选中：

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
    tab.text = "Tab ${position + 1}"
}.attach()

如果是用RecyclerView垂直滚动联动Tab，就得自己监听滚动：

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        val layoutManager = recyclerView.layoutManager as LinearLayoutManager
        // 获取第一个可见的item位置
        val firstVisiblePos = layoutManager.findFirstVisibleItemPosition()
        // 这里根据你的业务逻辑，把item位置映射成Tab索引（比如每个section对应一个Tab）
        val currentTabIndex = mapItemPosToTabIndex(firstVisiblePos)
        if (currentTabIndex != tabLayout.selectedTabPosition) {
            tabLayout.selectTab(tabLayout.getTabAt(currentTabIndex))
        }
    }
})

// 点击Tab时滚动到对应内容区域
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        val targetPos = mapTabIndexToItemPos(tab.position)
        recyclerView.layoutManager?.scrollToPosition(targetPos)
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {}
    override fun onTabReselected(tab: TabLayout.Tab) {}
})

前端（Vue3示例） #

用监听滚动容器的scroll事件，判断当前可视区域对应的内容块，同步Tab选中状态：

1. 模板结构：

<template>
  <div class="tab-bar">
    <div 
      v-for="(tab, index) in tabs" 
      :key="index"
      :class="['tab-item', { active: activeTab === index }]"
      @click="scrollToTab(index)"
    >
      {{ tab }}
    </div>
  </div>
  <div class="content-container" ref="contentContainer" @scroll="handleScroll">
    <div v-for="(tab, index) in tabs" :key="index" class="content-item">
      <!-- 这里放每个Tab对应的内容 -->
    </div>
  </div>
</template>

2. 核心逻辑：

<script setup>
import { ref, onMounted } from 'vue'

const tabs = ref(['Tab1', 'Tab2', 'Tab3'])
const activeTab = ref(0)
const contentContainer = ref(null)
let contentItems = []

onMounted(() => {
  contentItems = document.querySelectorAll('.content-item')
})

const handleScroll = () => {
  const scrollTop = contentContainer.value.scrollTop
  const containerHeight = contentContainer.value.clientHeight
  // 遍历内容块，找到当前可视区域中心对应的块
  for (let i = 0; i < contentItems.length; i++) {
    const item = contentItems[i]
    const itemTop = item.offsetTop
    const itemHeight = item.offsetHeight
    // 判断容器中心是否落在当前内容块内
    if (scrollTop + containerHeight / 2 >= itemTop && scrollTop + containerHeight / 2 <= itemTop + itemHeight) {
      if (activeTab.value !== i) {
        activeTab.value = i
      }
      break
    }
  }
}

const scrollToTab = (index) => {
  const targetItem = contentItems[index]
  contentContainer.value.scrollTo({
    top: targetItem.offsetTop,
    behavior: 'smooth'
  })
}
</script>

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