问题描述
我在支架上的容器上放置了边框半径。我现在想要的是让TabBar指示器与容器一起向下弯曲,而不是直线弯曲,从而导致指示器漂浮在背景上方。该图像将显示我的意思。
我尝试使用TabBar的indicator属性,但没有成功。
Picture of result that I'm looking for (Photoshop)
wrapper.dart
Widget build(BuildContext context) => StoreConnector<AppState,Store<AppState>>(
converter: (Store<AppState> store) => store,builder: (BuildContext context,Store<AppState> store) => Container(
decoration: widget.decoration,child: Scaffold(
drawer: widget.drawer ? _menuDrawer(context,store) : null,backgroundColor: Colors.transparent,appBar: PreferredSize(
preferredSize: Size.fromHeight(widget.tabBar != null ? 110.0 : 60.0),child: Container(
alignment: Alignment.center,child: AppBar(
actions: widget.actions,iconTheme: IconThemeData(color: Colors.white),title: widget.teamIsPremium != null
? Row(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
Icon(widget.teamIsPremium ? MdiIcons.star : MdiIcons.sTaroff),Container(
width: 5,),Text(widget.title),],)
: Text(widget.title),centerTitle: true,elevation: 0,bottom: widget.tabBar,))),bottomNavigationBar: widget.selectedMenuItem == WrapperMenuItem.NONE
? null
: Theme(
data: Theme.of(context).copyWith(textTheme: Theme.of(context).textTheme),child: BottomNavigationBar(
selectedItemColor: Color(0xff2e2e2e),unselectedItemColor: Color(0xff757575),currentIndex: _getIdFromEnum(widget.selectedMenuItem),onTap: (i) => {
if (i != _getIdFromEnum(widget.selectedMenuItem))
{widget.selectedMenuItem = _getWrapperMenuItemFromId(i),_movetoPage(context,i)}
},showSelectedLabels: true,items: [
BottomNavigationBarItem(icon: Icon(MdiIcons.home),title: Text('Start')),BottomNavigationBarItem(icon: Icon(MdiIcons.trafficCone),title: Text('Trainingen')),BottomNavigationBarItem(icon: Icon(MdiIcons.trophy),title: Text('Wedstrijden')),BottomNavigationBarItem(icon: Icon(MdiIcons.accountGroup),title: Text('Spelers'))
]),body: Container(
margin: widget.small
? EdgeInsets.only(left: 5,right: 5,top: 5)
: widget.tabBar != null ? EdgeInsets.only(top: 0) : EdgeInsets.only(top: 0),decoration: Boxdecoration(
color: widget.transparent ? Colors.transparent : Color.fromrGBO(240,240,1),borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15))),constraints: BoxConstraints.expand(),alignment: Alignment(-1,-1),child: ClipRRect(
child: widget.child,topRight: Radius.circular(15)),floatingActionButton: widget.floatingActionButton,floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,)));
match.dart
return DefaultTabController(
length: 2,child: Wrapper(
title: 'Wedstrijden',drawer: true,selectedMenuItem: WrapperMenuItem.MATCH,tabBar: TabBar(
tabs: [
Tab(text: 'Overzicht'),Tab(text: 'Statistieken'),child: TabBarView(
children: [
MatchOverviewTab(),MatchStatsTab(),);
解决方法
这是您可以尝试的方法,请记住,一切都是扑朔迷离的小部件,因此,首先在脚手架内创建 Stack ,将 TabBar()和 Container(),使用“位置”或任何其他位置,使其重叠到所需程度,然后您应将Custom Indicator(在您的情况下,这是一个带有圆边的容器)添加到 TabBar ()。
当然,有几种可能的方法可以做到这一点,但这是我能想到的,您也会看到相同的指示器动画。 想知道它是否有效。