![](/img/trans.png)
[英]Notch for Docked FloatingActionButton Missing in BottomAppBar
[英]How to add notch to TabBar to place FloatingActionButton in it
您可以將底部應用程序欄用於此類用戶界面BottomAppBar的hasNotch屬性必須為true。
這會讓你達到我的目標
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: const Text('Bottom App Bar')),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add), onPressed: () {},),
bottomNavigationBar: BottomAppBar(
hasNotch: true,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {},),
IconButton(icon: Icon(Icons.search), onPressed: () {},),
],
),
),
);
}
謝謝!
嘗試實現此修訂版的代碼。 FAB應該貫穿三個選項卡
class BarTab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.audio),
Icon(Icons.play),
Icon(Icons.maps),
],
),
floatingActionButton: FloatingActionButton(
onpressed:(){},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar:BottomAppBar(
color:Colors.blue,
hasNotch: true,
child:Container(
height:50.0
child:Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: (){})
]
)
)
),
),
);
}
2020年解決方案:
在BottomAppBar 中不再有hasNotch 屬性,但是,您可以在Scaffold 中執行此操作
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(), //this is what creates the notch
color: Colors.blue,
child: SizedBox(
height: height * 0.1,
width: width,
),
),
floatingActionButton: Container(
margin: EdgeInsets.all(10),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
size: 25.0,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
輸出 :
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.