我试图用底部的应用栏和FAB创建一个webview应用。这是我的home.dart代码
class _HomeState extends State<Home> {
// Properties & Variables needed
int currentTab = 0; // to keep track of active tab index
final List<Widget> screens = [
Dashboard(),
Profile(),
]; // to store nested tabs
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = Dashboard(); // Our first view in viewport
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.home,
color: currentTab == 0 ? Colors.white : Colors.black26,
),
onPressed: () {
setState(() {
currentScreen =
Dashboard(); // if user taps on this dashboard tab will be active
currentTab = 0;
});
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Chat(); // if user taps on this dashboard tab will be active
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.chat_bubble,
color: currentTab == 1 ? Colors.orange : Colors.black26,
),
Text(
'Chats',
style: TextStyle(
color:
currentTab == 1 ? Colors.orange : Colors.black26,
),
),
],
),
)
],
),
// Right Tab bar icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Profile(); // if user taps on this dashboard tab will be active
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.branding_watermark,
color: currentTab == 2 ? Colors.orange : Colors.black26,
),
Text(
'Profile',
style: TextStyle(
color:
currentTab == 2 ? Colors.orange : Colors.black26,
),
),
],
),
),
],
)
],
),
),
),
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
);
}
}
这是我的仪表板。dart
class _DashboardState extends State<Dashboard> {
@override
Widget build(BuildContext context) {
return WebviewScaffold(
url: 'https://google.com',
);
}
}
结果是这样的
FAB应该位于webview小部件上方,无论我将FAB放在哪里,它都始终位于webview小部件之后。即使我将FAB代码放在body小部件顶部,但我在哪里做错了?