在 Flutter 中使用“bottomNavigationBar”后，“body”部分不可见

Question

每当我使用 bottomNavigationBar: 时，它都不会在屏幕上显示 body: 部分，但是当我删除 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,
                ])), ),),),],);}

没有错误显示只是身体在屏幕上不可见

请问有什么解决办法吗？

Answer 1

我发现这是因为使用 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(),),),],),)

Answer 2

底部导航是脚手架构造函数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,一个值