Часть body не отображается после использования bottomNavigationBar во Flutter
Всякий раз, когда я использую bottomNavigationBar: он не показывает тело: часть на экране, но когда я удаляю bottomNavigationBar: тогда он показывает тело: Вот код
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home', textAlign: TextAlign.center),
actions: <Widget>[],
backgroundColor: Color(0xffd81b60),
),
bottomNavigationBar: _getNavBar(context),
body: ListView(children: <Widget>[
SizedBox(height: 300.0),
Container(
height: 50,
width: 10,
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => mealwisePage()));
},
color: Colors.pink,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Meal Wise',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: Colors.white),
),), ), ), ), ]),);}
_getNavBar(context) {
return Stack(
children: <Widget>[
Positioned(
bottom: 0,
child: ClipPath(
clipper: NavBarClipper(),
child: Container(
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.pink,
Colors.pink.shade800,
])), ),),),],);}
Никакой ошибки не отображается, просто тело невидимо на экране
Любое решение, пожалуйста?
2 ответа
Решение
Я понял, что это из-за использования Stack, он перекрывается с телом, поэтому я изменил его с:
return Stack(
children: <Widget>[
Positioned(
bottom: 0,
child: ClipPath(
clipper: NavBarClipper(),
child: Container(),),)],)
Чтобы
return Container(
height: 90,
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Positioned(
bottom: 0,
child: ClipPath(
clipper: NavBarClipper(),
child: Container(),),),],),)
Нижняя навигация является частью конструктора строительных лесов Widget bottomNavigationBar
а не тело, следовательно, рефакторинг вашего кода, как показано ниже
Scaffold(
appBar: AppBar(
title: const Text('Home', textAlign: TextAlign.center),
backgroundColor: Color(0xffd81b60),
),
resizeToAvoidBottomPadding: false,
body: ListView(children: <Widget>[
Container(
child:Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15.0, 40.0, 40.0, 25.0),
child: Center(
child: Text(
'Home',
textAlign: TextAlign.center,
),),), ], ),),
SizedBox(height: 200.0),
]),//listview
bottomNavigationBar: _getNavBar(context),
);//scaffold
обновить править
child: Container(
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
Вы должны оценить это width: MediaQuery.of(context).size.width,
пример width: MediaQuery.of(context).size.width * .98,