Flutter TabBar定制指导：移除标签下方边框并实现目标UI

以下针对主流框架给出具体实现方案，帮你移除TabBar标签下方的边框并贴近目标UI：

Flutter 场景 #

默认TabBar的底部边框来自自带的divider和选中状态的indicator，按以下方式移除：

• 直接在TabBar组件中设置：

TabBar(
  dividerColor: Colors.transparent, // 移除全局底部边框
  indicator: UnderlineTabIndicator(borderSide: BorderSide.none), // 移除选中标签的下划线
  tabs: [
    Tab(text: "标签1"),
    Tab(text: "标签2"),
    Tab(text: "标签3"),
  ],
)

• 若需要全局统一设置，可通过Theme包裹：

Theme(
  data: Theme.of(context).copyWith(
    tabBarTheme: TabBarTheme(
      dividerColor: Colors.transparent,
      indicator: UnderlineTabIndicator(borderSide: BorderSide.none),
    ),
  ),
  child: TabBar(/* 你的标签列表 */),
)

iOS 原生场景 #

UIKit（Swift） #

针对UITabBar，移除底部阴影/边框只需清空阴影图和背景图：

tabBar.shadowImage = UIImage()
tabBar.backgroundImage = UIImage()

SwiftUI #

在视图初始化时全局配置UITabBar样式：

init() {
    UITabBar.appearance().shadowImage = UIImage()
    UITabBar.appearance().backgroundImage = UIImage()
}

var body: some View {
    TabView {
        // 你的页面内容
    }
}

Android 原生场景 #

Jetpack Compose #

通过TabRow的divider参数移除底部边框：

TabRow(
    selectedTabIndex = selectedIndex,
    divider = {} // 直接设置为空组件，移除底部边框
) {
    Tab(
        selected = selectedIndex == 0,
        onClick = { selectedIndex = 0 },
        text = { Text("标签1") }
    )
    // 其他Tab项
}

XML 布局 #

针对TabLayout，通过属性移除边框和指示器：

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="0dp" <!-- 移除选中标签的下划线 -->
    app:tabBackground="@android:color/transparent" <!-- 清空背景，避免默认边框 -->
    app:tabTextColor="#666666"
    app:tabSelectedTextColor="#2196F3"/>

额外UI优化建议 #

• 调整标签文字样式：给选中标签设置加粗、高亮色，未选中标签保持常规样式，贴合目标UI的视觉层级
• 自定义选中状态：比如给选中标签添加顶部小横线、背景色块，替代默认的下划线样式
• 调整TabBar的内边距和高度，让整体布局更紧凑自然

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