哈哈，老铁们好！今天咱们聊聊Flutter里怎么搞定那个Neng滚的TabBar和配套的TabBarView。这个东西啊，kan似简单，实际玩起来还是有点门道的。别急着翻下一页，听我慢慢道来。

咱就说吧，你见过那些新闻APP吗？顶部那个标签栏，左滑右滑还Neng切换内容区域。这就是典型的滚动TabBar加上配套的TabBarView。不光是新闻APP，现在hen多复杂界面dou会用到这种模式。

那你可Neng想问了：普通TabBar不Neng用吗？不不Neng用啊！但是当你有十几二十个标签的时候，普通TabBar就显得特别拥挤。而可滚动的TabBar就Neng解决这个问题，让用户通过左右滑动查kangeng多标签。

TabBar - 就是顶部那个带标签的条条 TabBarView - 就是底下跟着变化的内容区域

这两个兄弟组合在一起才Neng发挥威力。一个负责显示选项卡，一个负责展示内容。就像键盘和鼠标一样配对使用。

import 'package:flutter/material.dart';
void main {
  runApp);
}
class MyApp extends StatelessWidget {
  @override
  Widget build {
    return MaterialApp(
      home: DefaultTabController(
        length: 4, // 有4个标签
        child: Scaffold(
          appBar: AppBar(
            title: Text,
            bottom: TabBar(
              isScrollable: true, // 关键设置！允许水平滚动
              tabs: ,
            ),
          ),
          body: TabBarView(
            children: ,
          ),
        ),
      ),
    );
  }
}

isScrollable - 就是控制你这个Tab是否Ke以左右滑动。

"害！这不废话嘛"你可Neng会这么想。但真的需要强调一下这个属性！默认情况下它是false，所以当你发现自己的Tab怎么dou不Neng往左拉的时候... 对啊... 是因为忘记把它设为true了！ 进阶玩法：自定义风格

好了现在咱们来玩点高级操作！别总让你们家APPkan起来跟原生系统没两样吧？ 指示器样式改造：从下划线到圆角矩形

indicatorSize: TabBarIndicatorSize.label,
indicatorPadding = EdgeInsets.all,
indicatorWeight = 4.0,
indicatorColor = Colors.red,
indicator = BoxDecoration(
    borderRadius = BorderRadius.circular,
    color = Colors.blue.withOpacity,
),

"哇靠!这样一改居然Neng变成这种风格!"是的老铁，现在指示器不是单纯的一条线了,而是圆角矩形背景色效果!

labelColor = Colors.blue, //选中时文字颜色
unselectedLabelColor = Colors.black.withOpacity, //未选中时文字颜色
labelStyle = TextStyle, //选中文字样式
unselectedLabelStyle = TextStyle, //未选中文字样式

"那那个那个... Neng不Neng把文字也变粗一点?"当然Ke以!直接给TextStyle里加上fontWeight字段就行!

"老哥你kan我写了篇文章讲Flutter开发,可百度就是不收录啊!" 唉~这话题我也头疼过... 几个可Neng原因: - 内容太短/质量太差 - SEO优化不到位 - 外链质量太差或没有外链支持 - 抓取失败/网站结构问题 建议: 多写原创深度文章! 注意SEO关键词布局! 提升网站访问速度! 增加高质量外链! 回归正题... 联动效果实现原理揭秘!

"哎呀... 跟着手指移动的时候有时候会卡顿啊"是啊是啊,联动效果Ru果Zuo不好确实影响体验...

// 在StatefulWidget中定义一个全局控制器
late final _tabController;
// 初始化时创建并绑定监听器
@override void initState {
 super.initState;
 _tabController = new TabController;
 _tabController.addListener;
}
void _onChanged{
 setState{});
}
...
body:
// 注意这里同时传入相同控制器!
children:
...
}

"不对不对... 应该先创建DefaultTabController再传入才对吧?还是直接new一个?" 其实两种方式dou行!但使用DefaultTabControllergeng符合Material设计规范哦~

MainAxisAlignment.spaceBetween:

MainAxisAlignment.spaceEvenly:

MainAxisAlignment.spaceAround:

MainAxisAlignment.start/center/end:

"哈哈哈是不是觉得我突然变成数学老师啦?其实这些dou是控制子元素之间间距和位置的属性~"

Zui终完整版代码如下:

dart import 'package:flutter/material.dart';

class ScrollingTabsDemo extends StatefulWidget { @override State

class _ScrollingTabsDemoState extends State

@override void initState { super.initState; tabsText=; tabContents=; // 建立联系并初始化位置为第1个 int initialIndex=1; this._tabController=new TabController; }

@override Widget build{ return Scaffold, bottom))), controller:_tabcontroller tabs:) ) ), body )) ); } }

Zui后一下:

滚动效果通过