[英]Add Indicator on top of TabBar in Flutter
像这个:
下面的代码将添加 TabBar 的 Indicator 底部:
DefaultTabController(
length: 2,
child : new TabBar(
labelColor: Colors.purple,
indicatorColor: Colors.purple,
indicatorSize: TabBarIndicatorSize.label,
unselectedLabelColor: Colors.black,
tabs: [
new Tab(icon: Icon(Icons.chrome_reader_mode),),
new Tab(icon: Icon(Icons.clear_all),),
]),
);
但是我需要在TabBar
之上的Indicator
。 我认为构建自定义标签栏不是一个好主意,因为我不想为这个简单的事情做很多工作。
有一个简单的技巧,那就是使用indicator
属性并添加UnderlineTabIndicator()
并且该类命名了名为insets
参数,作为我添加的值EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
Left: 50.0, // 将指标从左边缩小 50.0
顶部:0.0,
Right: 50.0, // 使指标从右边小 50.0
底部:40.0 // 将指标从底部推至顶部 40.0
像下面这样:
const textStyle = TextStyle(
fontSize: 12.0,
color: Colors.white,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600);
//.....
new TabBar(
controller: controller,
labelColor: Color(0xFF343434),
labelStyle: textStyle.copyWith(
fontSize: 20.0,
color: Color(0xFFc9c9c9),
fontWeight: FontWeight.w700),
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Color(0xDD613896), width: 8.0),
insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
),
unselectedLabelColor: Color(0xFFc9c9c9),
unselectedLabelStyle: textStyle.copyWith(
fontSize: 20.0,
color: Color(0xFFc9c9c9),
fontWeight: FontWeight.w700),
tabs: [
new Tab(
text: 'LOGIN',
),
new Tab(
text: 'SIGNUP',
),
],
),
您也可以创建一个自定义指标扩展Decoration
另一种选择是为indicator:
定义一个新的Decoration
indicator:
TabBar
小部件的属性,这样您就不会绑定到 TabBar 高度(与使用insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
) ,但您不能创建比选项卡本身小的指示器。
这里的代码:
TabBar(
indicator: BoxDecoration(
border: Border(
top: BorderSide(
color: Theme.of(context).accentColor,
width: 3.0
),
),
),
),
您必须为此创建一个自定义TabController 。 我在这里找到了 Flutter TabBar 的一个简单示例。 您可以在此处详细检查。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.