如何自定义TabBar组件中Tab组件的宽度？（WhatsApp克隆开发）

Android 端（基于TabLayout） #

方法1：给相机Tab设置自定义View并指定宽度 #

1. 先为相机Tab创建一个仅包含图标的自定义布局（比如tab_camera.xml）
2. 在代码中获取相机Tab，为其设置自定义View并指定固定窄宽度：

val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
// 假设相机Tab是第一个（索引0）
val cameraTab = tabLayout.getTabAt(0) ?: return

val cameraView = LayoutInflater.from(this).inflate(R.layout.tab_camera, null)
val tabParams = cameraView.layoutParams as TabLayout.LayoutParams
// 设置宽度为60dp（可根据需求调整）
tabParams.width = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    60f,
    resources.displayMetrics
).toInt()
cameraTab.customView = cameraView

设置完成后，其余Tab会自动平分剩余宽度，和WhatsApp的布局逻辑一致。

方法2：自定义TabLayout子类全局控制宽度 #

如果需要适配横竖屏切换等场景，可以编写自定义TabLayout子类：

class WhatsAppTabLayout(context: Context, attrs: AttributeSet?) : TabLayout(context, attrs) {
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val tabCount = tabCount
        if (tabCount <= 0) return

        // 处理相机Tab（索引0）
        getTabAt(0)?.view?.let { cameraView ->
            val cameraWidth = TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                60f,
                resources.displayMetrics
            ).toInt()
            cameraView.layoutParams.width = cameraWidth
            cameraView.requestLayout()
        }

        // 平分剩余宽度给其他Tab
        val totalAvailableWidth = measuredWidth - 60.dpToPx(resources.displayMetrics)
        val otherTabWidth = totalAvailableWidth / (tabCount - 1)
        for (i in 1 until tabCount) {
            getTabAt(i)?.view?.let { tabView ->
                tabView.layoutParams.width = otherTabWidth
                tabView.requestLayout()
            }
        }
    }

    private fun Int.dpToPx(displayMetrics: DisplayMetrics) =
        TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this.toFloat(), displayMetrics).toInt()
}

之后在布局文件中使用这个自定义TabLayout即可。

Flutter 端（基于TabBar） #

直接指定相机Tab宽度 #

用SizedBox包裹相机Tab，设置固定窄宽度，其余Tab自动适配：

TabBar(
  tabs: [
    SizedBox(
      width: 60, // 相机Tab宽度
      child: Tab(icon: Icon(Icons.camera_alt)),
    ),
    Tab(text: "聊天"),
    Tab(text: "状态"),
    Tab(text: "通话"),
  ],
  indicatorSize: TabBarIndicatorSize.tab, // 指示器跟随Tab宽度
)

动态计算其他Tab宽度（适配不同屏幕） #

如果需要让其余Tab严格平分剩余宽度，使用LayoutBuilder计算：

LayoutBuilder(
  builder: (context, constraints) {
    final cameraTabWidth = 60.0;
    final otherTabWidth = (constraints.maxWidth - cameraTabWidth) / 3;
    return TabBar(
      tabs: [
        SizedBox(width: cameraTabWidth, child: Tab(icon: Icon(Icons.camera_alt))),
        SizedBox(width: otherTabWidth, child: Tab(text: "聊天")),
        SizedBox(width: otherTabWidth, child: Tab(text: "状态")),
        SizedBox(width: otherTabWidth, child: Tab(text: "通话")),
      ],
      indicatorSize: TabBarIndicatorSize.tab,
    );
  },
)

当前实现效果：

期望实现效果：

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