Question

在TabBarView->列中，Iam收到此异常A RenderFlex overflowed by 120 pixels on the bottom. 滚动时，它仅发生在特定的零件/容器上：TabBarView-> Column-> Container。这是一张可以更好地了解sample image

的图片

这是tabView.dart的代码：

class TabView extends StatelessWidget {
  List<Category> categories = [
    
  ];

  final TabController tabController;

  TabView({Key key, this.tabController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height / 9);
    return TabBarView(
        physics: NeverScrollableScrollPhysics(),
        controller: tabController,
        children: <Widget>[
          Column(                                   **//Exception here**
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(8.0),
                  height: MediaQuery.of(context).size.height/9,
                  width: MediaQuery.of(context).size.width,
                     // padding: EdgeInsets.only(top: 4.0),
                    child: ListView.builder(
                      //shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemCount: categories.length,
                        itemBuilder: (_, index) => CategoryCard(
                              category: categories[index],
                            )),),
                SizedBox(
                  height: 16.0,
                ),
                Flexible(child: RecommendedList()),
              ],

          ),

          Column(children: <Widget>[
            SizedBox(
              height: 16.0,
            ),
            Flexible(child: RecommendedList())
          ]),
          Column(children: <Widget>[
            SizedBox(
              height: 16.0,
            ),
            Flexible(child: RecommendedList())
          ]),
          Column(children: <Widget>[
            SizedBox(
              height: 16.0,
            ),
            Flexible(child: RecommendedList())
          ]),
          Column(children: <Widget>[
            SizedBox(
              height: 16.0,
            ),
            Flexible(child: RecommendedList())
          ]),
        ]);
  }
}

recommendedList.dart的代码：

class RecommendedList extends StatelessWidget {
  List<Product> products = [....];

  @override
  Widget build(BuildContext context) {
    return Column(                        **//Exception here**
      children: <Widget>[
        Container(
          height: 20,
           child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              IntrinsicHeight(
                child: Container(
                  margin: const EdgeInsets.only(left: 16.0, right: 8.0),
                  width: 4,
                  color: Colors.lightBlue,
                ),
              ),
              Center(
                  child: Text(
                    'Recommended',
                    style: TextStyle(
                        color: darkGrey,
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold),
                  )),
            ],
          ),
        ),
        Flexible(
          child: Container(),
        ),//
      ],
    );
  }
}

这两个类在主页中使用，代码如下：

    return Scaffold(
        resizeToAvoidBottomPadding: false,
      bottomNavigationBar: CustomBottomBar(controller: bottomTabController),
      body: CustomPaint(
        painter: MainBackground(),
        child: TabBarView(
          controller: bottomTabController,
          physics: NeverScrollableScrollPhysics(),
          children: <Widget>[
            SafeArea(
              child: NestedScrollView(
                headerSliverBuilder:
                    (BuildContext context, bool innerBoxIsScrolled) {
                  // These are the slivers that show up in the "outer" scroll view.
                    return <Widget>[
                      SliverToBoxAdapter(
                        child: appBar,
                      ),
                      SliverToBoxAdapter(
                        child: topHeader, //child: ParallaxMain(),
                      ),
                      SliverToBoxAdapter(
                        child: ProductList(
                          products: products,
                        ),
                      ),
                      SliverToBoxAdapter(
                        child: ProductList2(),
                      ),
                      SliverToBoxAdapter(
                        child: tabBar,
                      ),
                    ];
                  },
                   body: Container(
                     child: TabView(
                       tabController: tabController,
                     ),
                     //: MediaQuery.of(context).size.height/10,
                 ),
              ),
            ),
            CategoryListPage(),
            CheckOutPage(),
            ProfilePage()
          ],
        ),
      ),
    );

这是我得到的例外：

A RenderFlex overflowed by 104 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///E:/arm%20dataset/flutter_ecommerce_template-m/lib/screens/main/components/tab_view.dart:59:11
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#7b505 OVERFLOWING
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=411.4, h=13.1)
...  size: Size(411.4, 13.1)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: min
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
A RenderFlex overflowed by 19 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///E:/arm%20dataset/flutter_ecommerce_template-m/lib/screens/main/components/recommended_list.dart:37:12
════════════════════════════════════════════════════════════════════════════════════════════════════

请帮帮我。

Answer 1

您是否尝试过将Column与SingleChildScrollView小部件一起包装？

 SingleChildScrollView(
                  child: Column(
                    children: <Widget>[

Answer 2

用SingleChildScrollview包装Column小部件应该可以。请让我知道它是否对您有用。

Answer 3

使用 ListView 而不是 Column 应该会有所帮助。

滚动时，RenderFlex在底部溢出了19个像素

3 个答案: