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

San*_*jaz 2 dart flutter flutter-layout flutter-appbar flutter-design

每当我使用bottomNavigationBar:它不显示body:部分在屏幕上但是当我删除bottomNavigationBar:然后它显示body: Here is the code

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,
                ])), ),),),],);}

Run Code Online (Sandbox Code Playgroud)

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

请问有什么解决办法吗?

San*_*jaz 5

我发现这是因为使用Stack它与 body 重叠,所以我将其更改为:

return Stack(
    children: <Widget>[
      Positioned(
        bottom: 0,
        child: ClipPath(
          clipper: NavBarClipper(),
          child: Container(),),)],)

Run Code Online (Sandbox Code Playgroud)

return Container(
      height: 90,
      child: Stack(
        alignment: Alignment.bottomCenter,
    children: <Widget>[
      Positioned(
        bottom: 0,
        child: ClipPath(
          clipper: NavBarClipper(),
          child: Container(),),),],),)
Run Code Online (Sandbox Code Playgroud)