flutter TabBar左边间隔问题

原创 于 2025-06-23 16:39:00 发布 · 450 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter

TabBar设置isScrollable: true,内部标签距离左边出现大段间隔
在这里插入图片描述

TabBar(
  isScrollable: true,
  dividerColor: Colors.white, //设置底部隔断线条的颜色(默认灰色)
  tabAlignment: TabAlignment.center,//添加该设置大段间隔消失
  labelPadding: EdgeInsets.only(left: 10,right: 10,bottom: 5),
  indicator: MyCustomArcIndicator(),
  labelColor: JadeColors.black,
  labelStyle: TextStyle(
    fontSize: 36.sp,
    fontWeight: FontWeight.w600,
  ),
  unselectedLabelColor: Color(0xff333333),
  unselectedLabelStyle: TextStyle(
    fontSize: 36.sp,
  ),
  indicatorSize: TabBarIndicatorSize.label,
  controller: providerOf<MainModel>().tabController,
  tabs: MainModel.catList().map((e) => Text(e['name'])).toList(),
  )
flutter TabBar 实战使用技巧
智玲君
01-15 1609
Tabbar属性介绍： const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 thi
flutter 两种方式优雅的实现app首页底部菜单项切换功能，以及凸起效果
智玲君
01-19 1811
前言 首页底部菜单切换几乎是所有app都必须实现的功能，目前网上针对该功能的实现方式基本大同小异，并且细节之处讲的都不是很清楚，本篇将使用两种不同的方式来更优雅的实现该功能，相信看完你肯定会有所收获。 方式1： bottomNavigationBar + IndexedStack 1，类似于安卓里面Activity+多个fragment的方式，通过控制各个fragment的显示和隐藏来显示不同Tab对应的页面，保证每个页面只builder一次。 2，该方式不支持左右滑动切换，如需实现滑动切换，见方式2（也推
Flutter实现顶部导航栏功能
明知山
03-17 3333
import 'package:flutter/material.dart'; class AppBarDemoPage extends StatelessWidget { const AppBarDemoPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { ret...
Flutter组件--TabBar使用详情(分段控制器)
eastWind1101的博客
11-21 1万+
TabBar使用详情, TabController,分段控制器,左右滑动试图
Flutter 的Tabbar 属性详解及设置
weixin_41367871的博客
12-25 3098
indicatorPadding 指示器的内边距 设置top无效，都是设置left right bottom 指示器默认是在divider线上，可以通过该属性设置与divider的距离。insets 和indicatorPadding类似，设置top无效，只能设置bottom 与divider的距离，且，这是left和right是缩短指示器的宽度而不位移。borderSide设置指示器的高度和颜色，这里的width是指示器的高度，指示器的原理是一个边框，设置width就是边框的厚度。
flutter控件----快速实现TabBar分割符
姜澜的博客
04-26 2836
一、概述 TabBar的Tab之间需要有个竖线或者斜线的分隔符。 可以自定义Tab实现各种想要的效果。 本次仅提供以下几种实现方式。 1、TabBar用文字做分隔符 Widget _tabBarItem(String title, {bool showRightImage = true}) { return Tab( child: Row( mainAxisAlignmen...
在Flutter中创建自定义的左对齐TabBar组件
爱喝水程序员的博客
03-15 2461
在某些情况下，我们希望TabBar的标签在水平方向上左对齐，而不是默认的居中对齐。例如，当我们有一个较宽的屏幕，并且希望标签从左侧开始排列时，这种需求就变得尤为重要。通过自定义TabBar组件，我们可以轻松地实现这一目标。
Flutter系列之设置TabBar的tab紧凑排列
shving的专栏
12-01 1万+
我们在使用flutter的TabBar组件的时候会发现，TabBar当中的tab的是平分宽度的，因为TabBar中的tab是一个flex布局，如果你只有两三个tab，想让它紧凑排列，应该怎么办呢？ 要设置一个属性 isScrollable 为 true TabBar( labelColor: Colors.black, labelStyle: TextStyle(color: Colors.black, fontSize: 14), unselectedLabelColor:
flutter 底部tabbar
NotesChapter
04-12 593
flutter 底部tabbar
Flutter学习笔记17-AppBar、TabBar、TabBarView组合使用，实现头条效果的菜单栏
convex1009848621的博客
11-14 560
AppBar\TabBar\TabBarView组合使用，实现头条导航了效果
Flutter中解决ListView没配合AppBar使用顶部出现空白间隔
Flutter|Android移动开发
09-16 5751
ListView头部有一段空白区域，是因为当ListView没有和AppBar一起使用时，头部会有一个padding，为了去掉padding，可以使用MediaQuery.removePadding Widget _listView(BuildContext context){ return MediaQuery.removePadding( removeTop: true, ...
AppBarLayout 嵌套 Toolbar控件去掉阴影以及 去掉左侧默认间距
shanshan_1117的博客
08-29 2357
  下面咱们先看下没处理时出现的问题： Toolbar默认左侧默认有间距，我们只需要一行代码就可以消除此间距： app:contentInsetStart="0dp"   去掉下面的阴影效果需要在AppBarLayout上添加一行代码：  app:elevation="0dp" &lt;android.support.design.widget.AppBarLayout ...
flutter TapBar自定义indicator、固定宽度、圆角、改变indicator和text的距离
热门推荐
pengbo6665631的博客
12-21 1万+
前言 最近开始搞flutter，然后想去使用TabBar，遇到了一些坑，记录一下。 分析过程 需求是这样： 需要处理这样几个细节： 下划线固定宽度 下划线圆角 下划线和文字的间距 两个文字之间的间距 然后在使用TabBar过程中： 下划线想固定25，indicatorSize只有两个属性，一是与tab父布局同宽，二是与字同宽 圆角看看能不能用自定义indicator来实现 ...
六、Flutter自定义Tabbar
飞翔的熊blabla
05-05 2385
转自于:https://www.jianshu.com/p/22034838ae45 目录 一、效果展示 二、底部Tabbar 三、顶部Tabbar 一、效果展示 底部Tabbar切换和顶部Tabbar切换在工作中使用频率都比较高，Flutter很人性化，这些组件都提供好了，我们只需要了解一下如何使用就好了。下面是我用宝贵的周末时间做的一个Demo,请看效果。有什么好的建议，可以在下面留言交流一下，共同学习共同进步。 Tabbar.jpg 二、底部Tabbar 重新build方法会..
flutter 自定义TabBar 【top 0 级别】
半身风雪
12-01 3340
在日常开发中，tab 标签选项，是一个我们特别常用的一个组件了，往往我们在一个项目中，有很多地方会使用到它，每次单独去写，真的是太繁琐，这里我会定义一个通用的tab 选择器，喜欢的朋友可以拿去试试简简单单一个widget，复制粘贴直接用，废话不多说，啥？没有写怎么调用？不知道怎么调用，你还是去看看前面的文章吧。
Flutter-TabBar的使用说明
augfun的博客
11-18 2613
Flutter-TabBar的使用说明 在AppBar中有一个非常重要的Widget，这个Widget就是bottom，bottom是一个抽象类PreferredSizeWidget，可以看到一共有5个Widget继承了它： 这里讲解使用TabBar这一种情况 TabBar的使用需要结合AppBar，现在给出AppBar的使用说明地址：AppBar的使用说明 TabBar的定义 TabBar在使用之前，首先需要熟悉他的定义属性，现在查看常用定义属性： const TabBar({
使用Toolbar/ActionBar自定义布局时，左侧/右侧有一段空白无法使用
阿飞的博客
05-22 1万+
解决方法： 1.给Toolbar加上app:contentInsetStart”="0dp"（左侧）或者“app:contentInsetEnd”="0dp"（右侧） &lt;android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_heig...
flutter tabBar 的属性及自定义实现
半身风雪
07-06 5689
在Flutter中，TabBar的indicatorPadding属性用于设置指示器的内边距，而不是用于调整指示器和文字之间的间距。要调整TabBar中指示器和文字之间的间距，本篇文章主要讲解如何自定义indicatorPadding的边距问题。方法 1: 使用TabBar的indicator属性自定义指示器样式 你可以通过自定义指示器的Widget来实现调整指示器和文字之间的间距。
Flutter 滚动距离来设置TabBar的位置，点击TabBar滚动的到指定的位置
yujunlong3919的专栏
03-25 5742
文章目录效果git定义属性每个组件设置Key获取控件的距离顶部的位置设置监听设置TabBar 点击getY 效果git 定义属性 ScrollController _controller = new ScrollController(); var globalKeyOne = GlobalKey(); var globalKeyTwo = GlobalKey(); var gl...
flutter tabbar
最新发布
06-12
### Flutter 中 TabBar 的用法及常见问题解决 #### 1. 系统默认 TabBar 实现 在 Flutter 中，`TabBar` 是一个常见的 UI 组件，用于在不同内容区域之间快速切换。系统默认的 `TabBar` 实现可以通过 `DefaultTabController` 或手动创建 `TabController` 来完成[^2]。以下是一个简单的实现示例： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.home)), Tab(icon: Icon(Icons.search)), Tab(icon: Icon(Icons.person)), ], ), title: Text('Flutter TabBar Example'), ), body: TabBarView( children: [ Center(child: Text('Home')), Center(child: Text('Search')), Center(child: Text('Profile')), ], ), ), ), ); } } ``` 上述代码展示了如何使用 `DefaultTabController` 创建一个包含三个标签的 `TabBar`，每个标签对应一个页面。 #### 2. 使用第三方库实现自定义 TabBar 如果需要更复杂的样式或功能，可以借助第三方库，例如 `flutter-cupertino-tabbar` 项目[^1]。该项目提供了一个类似 iOS 风格的底部导航栏，支持多种自定义选项。以下是其基本用法： ```dart import 'package:flutter/cupertino.dart'; import 'package:flutter_cupertino_tabbar/flutter_cupertino_tabbar.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoApp( home: CupertinoTabScaffold( tabBar: CupertinoTabBar( items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'), BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'), ], ), tabBuilder: (context, index) { switch (index) { case 0: return Center(child: Text('Home')); case 1: return Center(child: Text('Search')); case 2: return Center(child: Text('Profile')); default: return Container(); } }, ), ); } } ``` 通过 `CupertinoTabBar`，可以轻松实现类似于 iOS 的底部导航栏效果[^1]。 #### 3. 保持页面状态 在使用 `TabBar` 和 `TabBarView` 进行页面切换时，页面状态可能会被销毁。为了解决这一问题，可以结合 `AutomaticKeepAliveClientMixin` 或其他方法来保持页面状态[^4]。 以下是一个使用 `AutomaticKeepAliveClientMixin` 的示例： ```dart class KeepAlivePage extends StatefulWidget { @override _KeepAlivePageState createState() => _KeepAlivePageState(); } class _KeepAlivePageState extends State<KeepAlivePage> with AutomaticKeepAliveClientMixin { @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); return Center(child: Text('This page will not be rebuilt on tab switch')); } } ``` 将此页面作为 `TabBarView` 的子项时，页面状态将被保留[^4]。 #### 4. 监听 Tab 切换事件 如果需要监听 `TabBar` 的切换事件，可以通过 `TabController` 的 `addListener` 方法实现[^3]。以下是一个示例： ```dart class TabBarExample extends StatefulWidget { @override _TabBarExampleState createState() => _TabBarExampleState(); } class _TabBarExampleState extends State<TabBarExample> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); _tabController.addListener(() { print('Current index: ${_tabController.index}'); }); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( bottom: TabBar( controller: _tabController, tabs: [ Tab(text: 'Home'), Tab(text: 'Search'), Tab(text: 'Profile'), ], ), ), body: TabBarView( controller: _tabController, children: [ Center(child: Text('Home')), Center(child: Text('Search')), Center(child: Text('Profile')), ], ), ); } } ``` 上述代码展示了如何通过 `TabController` 监听 `TabBar` 的切换事件[^3]。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值