2

每当我使用bottomNavigationBar：它不显示body：屏幕上的一部分但是当我删除bottomNavigationBar：然后它显示body： 这是代码

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

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

请问有什么解决办法吗？

4

2 回答 2

5

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

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(),),),],),)
于 2020-01-18T08:45:44.943 回答
0

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

于 2020-01-17T14:00:39.063 回答