[英]How to give a gradient line in tab bar indicator
我具有选项卡栏功能,其中显示了甜甜圈图和车辆列表,但我需要显示用户选择的选项卡,我在TabBar中具有indicatorColor,但需要填充渐变线,如图所示,请帮助我出。
PS:如果可以的话,请让我知道如何给主题色赋予主色作为渐变的主要色彩???
return Scaffold(
body: new DefaultTabController(
length: 2,
child: new Column(
children: <Widget>[
new Container(
width: 1200.0,
child: new Container(
color: Colors.white,
child: new TabBar(
labelColor: Colors.black,
tabs: [
Tab(
child: new Text("Visual",
style: new TextStyle(fontSize: 20.0)
),
),
Tab(
child: new Text("Tabular",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
),
new Expanded(
child: new TabBarView(
children: [
Tab(
child: new RefreshIndicator(
child: new Text('DONUT CHART'),
onRefresh: refreshList,
key: refreshKey1,
),
),
Tab(
child: new RefreshIndicator(
child: new Text('List of vehicles'),
onRefresh: refreshList,
key: refreshKey2,
),
),
],
),
),
],
),
),
);
我认为唯一的方法是创建自定义TabBar。 您可以从tabs.dart复制TabBar的代码,并在_TabBarState中必须更改Decoration get _indicator
。
就像是:
return ShapeDecoration(shape: UnderlineInputBorder(), gradient: LinearGradient(
colors: [Colors.blue, Colors.green]));
UPD:
得到它了。 ShapeDecoration不起作用。 有了它,我可以为整个选项卡设置渐变。 对于下划线-同一文件中有_IndicatorPainter
类。 并且有此类的Rect indicatorRect
方法。
return Rect.fromLTWH(tabLeft, 0.0, tabRight - tabLeft, tabBarSize.height);
此字符串返回rect进行装饰。 如果您更改它-您可以得到下划线:
return Rect.fromLTWH(tabLeft, tabBarSize.height - 4.0, tabRight - tabLeft, 4.0);
而Decoration get _indicator
内部Decoration get _indicator
别忘了更改return UnderlineTabIndicator
到
return ShapeDecoration(shape: RoundedRectangleBorder(), gradient: LinearGradient(
colors: [Colors.blue, Colors.green]));
与其更改核心文件,不如这里是对我有用的更好答案。
TabBar(
controller: tabController,
indicatorPadding: EdgeInsets.all(0.0),
indicatorWeight: 4.0,
labelPadding: EdgeInsets.only(left: 0.0, right: 0.0),
indicator: ShapeDecoration(
shape: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
width: 4.0,
style: BorderStyle.solid)),
gradient: LinearGradient(colors: [pinkLight, pinkDark])),
tabs: <Widget>[
Center(
child: Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Rating",
style: themeData.accentTextTheme.title,
),
),
),
Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Category",
style: themeData.accentTextTheme.title,
),
),
Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Friend",
style: themeData.accentTextTheme.title,
),
),
],
),
使指标填充为零,标签填充为零,indicatorWeight为4.0或之后需要的尺寸,而不是在选项卡中使用文本,请在顶部使用容器并为其指定颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.