我尝试使用PreferredSize创建一个自定义标签栏,但是我无法将标签栏的颜色与正文融合,标签栏和正文之间似乎有一个边框。下面的图片将清楚地向您展示我试图完成的任务。
我试过创建一个与大宽度的主体颜色相同的边框,但似乎不起作用。以下是我的代码:
Widget _buildAppBar(context) {
return AppBar(
title: Text(title),
elevation: 0,
flexibleSpace: Image.asset(
'images/motif_batik_01.jpg',
fit: BoxFit.cover,
width: 1200,
),
bottom: _buildTabBar(context)
);
}
Widget _buildTabBar(context) {
return PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
padding: EdgeInsets.only(
top: 50,
left: 20,
right: 20,
),
height: 100,
child: TabBar(
indicator: BoxDecoration(
color: Colors.orange, borderRadius: BorderRadius.circular(20)
),
labelStyle: TextStyle(color: Colors.white),
unselectedLabelColor: Colors.orange,
tabs: <Widget>[
Tab(child: Text('A', style: TextStyle(fontSize: 18.0))),
Tab(child: Text('B', style: TextStyle(fontSize: 18.0))),
],
),
)
);
}
编辑注解:我发现如果我的“preferedSize”是40.0(40.0,80.0)的乘法,那么这条线就会消失,这会不会是Flutter本身的一个bug?
6条答案
按热度按时间xlpyo6sf1#
为tabBar添加指示器颜色,为transparent添加颜色。
indicatorColor: Colors.transparent
agxfikkp2#
indicator:BoxDecoration()
或indicatorColor:Colors.transparent
nc1teljy3#
无论你在
body
中返回什么,都将它 Package 在下面的代码中。不要忘记关闭括号。jm2pwxwz4#
为tabBar添加分隔线颜色,为transparent添加颜色。
dividerColor: Colors.transparent
jhiyze9q5#
您是否尝试过将包含TabBar的AppBar的标高设置为0,
2g32fytz6#
现在