喜欢这个:
下面的代码会在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),),
]),
);
但我需要 Indicator
在 TabBar
之上。我认为构建自定义标签栏不是一个好主意,因为我不想为这个简单的事情做很多工作。
最佳答案
有一个简单的技巧,那就是使用 indicator
属性并添加 UnderlineTabIndicator()
并且该类具有名为 insets
的命名参数,并且我添加了 EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0) 作为值,
Left: 50.0, // make indicator small by 50.0 from left
Top: 0.0,
Right: 50.0, // make indicator small by 50.0 from right
Bottom: 40.0 // pushed indicator to top by 40.0 from bottom
如下:
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
https://stackoverflow.com/questions/51125056/