滚动时，RenderFlex在底部溢出了19个像素
滚动时，RenderFlex在底部溢出了19个像素
提问于 2020-08-29 20:01:43
在TabBarView ->列中，我在滚动时收到此异常A RenderFlex overflowed by 120 pixels on the bottom.，它仅发生在特定的部件/容器上: TabBarView ->列->容器。为了更好地理解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
════════════════════════════════════════════════════════════════════════════════════════════════════请帮帮我。
回答 3
Stack Overflow用户
发布于 2021-07-15 06:00:45
使用ListView而不是Column应该会有所帮助。
Stack Overflow用户
发布于 2020-08-29 20:14:05
你有没有尝试过像这样用SingleChildScrollView部件包装你的Column？
SingleChildScrollView(
child: Column(
children: <Widget>[Stack Overflow用户
发布于 2020-08-29 20:22:45
用SingleChildScrollview包装Column小部件应该可以。让我知道它是否对你有效..
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63646723
复制相关文章
相似问题
腾讯云开发者
