flutter控件----快速实现TabBar分割符

最新推荐文章于 2025-06-23 16:39:00 发布

mango不想早起

最新推荐文章于 2025-06-23 16:39:00 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter Flutter探索记文章标签： tabbar分隔符

本文链接：https://blog.youkuaiyun.com/S43565442/article/details/86483804

Flutter 同时被 2 个专栏收录

6 篇文章

订阅专栏

Flutter探索记

6 篇文章

订阅专栏

本文介绍在Flutter中自定义TabBar分隔符的方法，包括使用文字、自定义控件及图片作为分隔符，提供了三种实现方式的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

TabBar的Tab之间需要有个竖线或者斜线的分隔符。
可以自定义Tab实现各种想要的效果。在这里插入图片描述

本次仅提供以下几种实现方式。

1、TabBar用文字做分隔符

Widget _tabBarItem(String title, {bool showRightImage = true}) {
  return Tab(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Center(
          child: Text(title),
        ),
      ),

      ///分割符自定义，可以放任何widget
      showRightImage
          ? Text('/', style: TextStyle(color: Color(0xffd0d0d0), fontSize: 23))
          : Text(' ', style: TextStyle(color: Color(0xffd0d0d0), fontSize: 23))
    ],
  ));
}

2、TabBar用自写任意控件做分隔符

Widget _tabBarItem(String title, {bool showRightImage = true}) {
  return Tab(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Center(
          child: Text(title),
        ),
      ),

      ///分割符自定义，可以放任何widget
      showRightImage
          ? Container(
              width: 1,
              margin: EdgeInsets.only(top: 15, bottom: 15),
              color: Colors.red,
            )
          : Container(
              width: 1,
              margin: EdgeInsets.only(top: 15, bottom: 15),
            )
    ],
  ));
}

3、TabBar用本地图片做分隔符

Widget _tabBarItem(String title, {bool showRightImage = true}) {
  return Tab(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Center(
          child: Text(title),
        ),
      ),

      ///分割符自定义，可以放任何widget
      showRightImage
          ? Container(
              width: 1,
              height: 15,
              child: Image.asset(
                'images/separator.png',
                fit: BoxFit.fitHeight,
                color: Colors.blueAccent,
              ),
            )
          : Container(
              width: 1,
            )
    ],
  ));
}

源码下载