如何修复 flutter 上的 "A RenderFlex overflowed by Infinity pixels on the bottom." 错误？

Question

我从网上为不同的应用栏设计带来了一些代码并将其应用到我的代码中。我想为我的应用程序使用 bottomnavigationbar 和 tabbar。但是当我尝试将它们一起应用时，bottomenavigationbar 的部分在底部溢出了无限像素。为了在 tabbarview 上滚动，我也附加了 expanded 和 singlechildscrollview，但没有任何改变。我是 Dart 和 Flutter 的真正初学者。请给我提示以解决此问题。


Home.dart



class Home extends StatelessWidget {

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Column(
        children: <Widget>[
          Container(
            height: 160.0,
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.pinkAccent[400],
                  width: MediaQuery.of(context).size.width,
                  height: 100.0,
                  child: Center(
                    child: Text(
                      "여행 앱 로고",
                      style: TextStyle(color: Colors.white, fontSize: 18.0),
                    ),
                  ),
                ),
                Positioned(
                  top: 80.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1.0),
                          border: Border.all(
                              color: Colors.grey.withOpacity(0.5), width: 1.0),
                          color: Colors.white),
                      child: Row(
                        children: [
                          IconButton(
                            icon: Icon(
                              Icons.menu,
                              color: Colors.pinkAccent[400],
                            ),
                            onPressed: () {
                              print("your menu action here");
                              _scaffoldKey.currentState.openDrawer();
                            },
                          ),
                          Expanded(
                            child: TextField(
                              decoration: InputDecoration.collapsed(
                                hintText: "검색",
                              ),
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.search,
                              color: Colors.pinkAccent[400],
                            ),
                            onPressed: () {
                              print("your menu action here");
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
         Container(
           child: TabBarHome(),
         ),
        ],
      ),
    );
  }
}



TabBarHome.dart


class TabBarHome extends StatefulWidget {
  @override
  _TabBarHomeState createState() => _TabBarHomeState();
}

class _TabBarHomeState extends State<TabBarHome> with
SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();

    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              child: SingleChildScrollView(
                child: TabBarView(
                  controller: _tabController,
                  children: <Widget>[
                    Text('회원가입'),
                    Text('마이페이지'),
                    Text('공지'),
                  ],
                ),
              ),
            ),
          ],
        ),
        bottomNavigationBar: Container(
          child: TabBar(
            controller: _tabController,
            labelColor: Colors.black45,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.person), text: '회원가입'),
              Tab(icon: Icon(Icons.assignment_ind), text: '마이페이지'),
              Tab(icon: Icon(Icons.list), text: '공지'),
            ],
          ),
          color: Colors.cyanAccent[100],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () { },
          tooltip: '해외 명소',
          icon: Icon(Icons.location_on),
          label: Text("해외"),
          backgroundColor: Colors.orange[600],
          elevation: 10.0,
        ),
    );
  }
}

我希望滚动每个 tabbarview 页面并且不出错。谢谢。

Answer 1

这是我对您的问题的解决方案。我也只使用了一个脚手架，而不是使用两个。请检查一下，让我知道它是否适合您。

    class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeState();
  }
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  TabController _tabController;
  int _selectedTabIndex;

  @override
  void initState() {
    super.initState();
    _selectedTabIndex = 0;
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();

    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Column(
        children: <Widget>[
          Container(
            height: 160.0,
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.pinkAccent[400],
                  width: MediaQuery.of(context).size.width,
                  height: 100.0,
                  child: Center(
                    child: Text(
                      "여행 앱 로고",
                      style: TextStyle(color: Colors.white, fontSize: 18.0),
                    ),
                  ),
                ),
                Positioned(
                  top: 80.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1.0),
                          border: Border.all(
                              color: Colors.grey.withOpacity(0.5), width: 1.0),
                          color: Colors.white),
                      child: Row(
                        children: [
                          IconButton(
                            icon: Icon(
                              Icons.menu,
                              color: Colors.pinkAccent[400],
                            ),
                            onPressed: () {
                              print("your menu action here");
                              _scaffoldKey.currentState.openDrawer();
                            },
                          ),
                          Expanded(
                            child: TextField(
                              decoration: InputDecoration.collapsed(
                                hintText: "검색",
                              ),
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.search,
                              color: Colors.pinkAccent[400],
                            ),
                            onPressed: () {
                              print("your menu action here");
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Text('회원가입'),
                Text('마이페이지'),
                Text('공지'),
              ],
            ),
          )
          /* Container(
            child: TabBarHome(),
          ),*/
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTabIndex,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('회원가입')),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind), title: Text('마이페이지')),
          BottomNavigationBarItem(icon: Icon(Icons.list), title: Text('공지')),
        ],
        onTap: (int tappedIndex) {
          setState(() {
            _selectedTabIndex = tappedIndex;
            _tabController.index = tappedIndex;
          });
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        tooltip: '해외 명소',
        icon: Icon(Icons.location_on),
        label: Text("해외"),
        backgroundColor: Colors.orange[600],
        elevation: 10.0,
      ),
    );
  }
}

如何修复 flutter 上的 "A RenderFlex overflowed by Infinity pixels on the bottom." 错误？

How to fix "A RenderFlex overflowed by Infinity pixels on the bottom." error on flutter?

flutter

flutter-sliver

flutter-layout