overview.dart中的此页面内容当前正在阻止导航底部栏。内容是滚动页面。我希望能够滚动Overview.dart页面内容而不覆盖导航底栏。因此,滚动时可以同时看到页面内容和固定的底部栏。
我的导航选项卡在另一个页面中创建。
Navigation_tab.dart:
import 'package:flutter/material.dart';
class NavigationTabs extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.cyan[700],
child: const Icon(Icons.add),
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.home,
color: Colors.cyan[700],
),
onPressed: () {},
),
new Container(
padding: EdgeInsets.only(left: 20),
child: IconButton(
icon: Icon(
Icons.menu,
color: Colors.cyan[700],
),
onPressed: () {},
)),
new Container(
padding: EdgeInsets.only(left: 120),
child: IconButton(
icon: Icon(
Icons.explore,
color: Colors.cyan[700],
),
onPressed: () {},
)),
new Container(
height: 22.0,
child: new RawMaterialButton(
onPressed: () {},
child: new Icon(
Icons.person,
color: Colors.white,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 1.0,
fillColor: Colors.cyan[700],
))
])));
}
}
运行应用程序的页面:
Overview.dart:
import 'package:flutter/material.dart';
import '../ui/navigation_tab.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class Overview extends StatelessWidget {
static const routeName = "/navigation";
Widget _buildLevelCard() {
return new SizedBox(
width: 380,
height: 140,
child: new Card(
child: new Column(children: <Widget>[
new ListTile(
title: new Text("title"),
subtitle: new Text("sub")),
new Container(
padding: EdgeInsets.all(5),
child: new Row(children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 7),
child: new RaisedButton.icon(
color: Colors.lightBlueAccent[400],
icon: Icon(
Icons.navigate_next,
color: Colors.white,
),
label: new Text(
"Button",
style: TextStyle(color: Colors.white),
),
onPressed: () => {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0))),
),
new RaisedButton.icon(
color: Colors.deepPurple[400],
icon: Icon(
Icons.navigate_next,
color: Colors.white,
),
label: new Text(
"Button",
style: TextStyle(color: Colors.white),
),
onPressed: () => {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)))
]))
])));
}
Widget _buildCarousel() {
return new SizedBox(
width: 380,
height: 180,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/150x100",
fit: BoxFit.fill,
);
},
itemCount: 5,
viewportFraction: 0.8,
scale: 0.9,
control: new SwiperControl(),
));
}
Widget _buildSearchCard() {
return new SizedBox(
width: 380,
height: 140,
child: new Card(
child: new Column(children: <Widget>[
new ListTile(
title: new Text(
"Test",
)),
new Container(
padding: EdgeInsets.all(5),
child: new Row(children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 7),
)
]))
])));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.cyan[700],
appBar: AppBar(
title: Text('Dashboard'),
),
body: new Stack(
alignment: Alignment.center,
children: <Widget>[
NavigationTabs(),
SingleChildScrollView(
child: Container(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5),
child: new ListTile(
title: new Text("Title"),
subtitle: new Text("Sub"),
),
),
_buildLevelCard(),
Padding(
padding: EdgeInsets.all(5),
child: _buildCarousel(),
),
_buildSearchCard(),
_buildSearchCard(),
],
),
),
),
],
),
);
}
}
See that the scrollable page content is covering the navigation bottom bar.
答案 0 :(得分:0)
这是由于在同一屏幕上有多个Scaffold
小部件引起的,因此您需要将NavigationTabs
支架的内容移动到Overview
支架,如下所示:
在Overview.dart中,替换您的构建方法:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.cyan[700],
appBar: AppBar(
title: Text('Dashboard'),
),
body: SingleChildScrollView(
child: Container(
child: new Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5),
child: new ListTile(
title: new Text("Title"),
subtitle: new Text("Sub"),
),
),
_buildLevelCard(),
Padding(
padding: EdgeInsets.all(5),
child: _buildCarousel(),
),
_buildSearchCard(),
_buildSearchCard(),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.cyan[700],
child: const Icon(Icons.add),
onPressed: () {},
),
bottomNavigationBar: NavigationTabs(),
);
}
在Navigation_tab.dart中,替换您的构建方法:
@override
Widget build(BuildContext context) {
return BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.home,
color: Colors.cyan[700],
),
onPressed: () {},
),
new Container(
padding: EdgeInsets.only(left: 20),
child: IconButton(
icon: Icon(
Icons.menu,
color: Colors.cyan[700],
),
onPressed: () {},
)),
new Container(
padding: EdgeInsets.only(left: 120),
child: IconButton(
icon: Icon(
Icons.explore,
color: Colors.cyan[700],
),
onPressed: () {},
)),
new Container(
height: 22.0,
child: new RawMaterialButton(
onPressed: () {},
child: new Icon(
Icons.person,
color: Colors.white,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 1.0,
fillColor: Colors.cyan[700],
))
],
),
);
}