flutter - 脚手架底部导航栏重叠正文内容。如何预防

Question

我想要一个带有应用栏和底部导航栏的仪表板。但是当我在 body(Scaffold) 中添加 listview 或 pageview 时，内容与底部导航栏重叠。

我已经设置了填充小部件和纵横比小部件，但内容高度因不同的屏幕尺寸而异。

BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: _currentIndex,

        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.chat_bubble),
            title: new TextView(
              'Conversations',
              size: 16.0,
              color: Colors.black,
              fontWeight: FontWeight.normal,
            ),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.dashboard),
            title: new TextView(
              'Matchboard',
              size: 16.0,
              color: Colors.black,
              fontWeight: FontWeight.normal,
            ),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: TextView(
                'Match-o-Meter',
                size: 20.0,
                color: Colors.black,
                fontWeight: FontWeight.normal,
              ))
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: IndexedStack(index: _currentIndex, children: <Widget>[
              CouplingMatches(),
              MatchBoard(),
              MoMPage(),
            ]),
          ),
        ],
      ),

我想要 appbar 和底部导航栏之间的正文内容，但我得到的结果为:


我已向下滚动但内容与底部导航栏重叠

Answer 1

包裹你的 body Scaffold在 SafeArea小部件。