底部溢出 99241 像素的 RenderFlex & 用于空值的 Null 检查运算符
A RenderFlex overflowed by 99241 pixels on the bottom & Null check operator used on a null value
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:35:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:39:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:42:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:46:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:49:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:53:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:56:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:60:33)
...
============================================= ================================================ =====
========渲染库捕获异常================================ =====================
布局期间抛出以下断言：
右侧溢出 399607 像素的 RenderFlex。
导致错误的相关小部件是：
行文件:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14
溢出的 RenderFlex 的方向为 Axis.horizontal。
溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。
这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#7c268 relayoutBoundary=up3 OVERFLOWING
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
... size: Size(392.7, 100000.0)
... direction: horizontal
... mainAxisAlignment: spaceAround
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
child 1: RenderErrorBox#ee73a
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 2: RenderErrorBox#3f178
parentData: offset=Offset(100000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 3: RenderErrorBox#4099b
parentData: offset=Offset(200000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 4: RenderErrorBox#2956f
parentData: offset=Offset(300000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
========渲染库捕获异常================================ =====================
布局期间抛出以下断言：
底部溢出 99241 像素的 RenderFlex。
导致错误的相关小部件是：
专栏 file:///C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13
溢出的 RenderFlex 的方向为 Axis.vertical。
溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。
这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#1474e relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=759.3)
... size: Size(392.7, 759.3)
... direction: vertical
... mainAxisAlignment: spaceBetween
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:35:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:39:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:42:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:46:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:49:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:53:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ =======================
构建 BottomTabBtn(dirty) 时抛出了以下 _CastError：
用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:56:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:60:33)
...
============================================= ================================================ =====
========渲染库捕获异常================================ =====================
布局期间抛出以下断言：
右侧溢出 399607 像素的 RenderFlex。
导致错误的相关小部件是：
行文件:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14
溢出的 RenderFlex 的方向为 Axis.horizontal。
溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。
这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#4004c relayoutBoundary=up3 OVERFLOWING
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
... size: Size(392.7, 100000.0)
... direction: horizontal
... mainAxisAlignment: spaceAround
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
child 1: RenderErrorBox#db496
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 2: RenderErrorBox#73a53
parentData: offset=Offset(100000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 3: RenderErrorBox#b66f8
parentData: offset=Offset(200000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 4: RenderErrorBox#d20be
parentData: offset=Offset(300000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
========渲染库捕获异常================================ =====================
布局期间抛出以下断言：
底部溢出 99241 像素的 RenderFlex。
导致错误的相关小部件是：
专栏 file:///C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13
溢出的 RenderFlex 的方向为 Axis.vertical。
溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。
这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#293da relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=759.3)
... size: Size(392.7, 759.3)
... direction: vertical
... mainAxisAlignment: spaceBetween
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
这是我的代码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BottomTabs extends StatefulWidget {
final int? selectedTab;
final Function(int)? tabPressed;
BottomTabs({this.selectedTab, this.tabPressed});
@override
_BottomTabsState createState() => _BottomTabsState();
}
class _BottomTabsState extends State<BottomTabs> {
int _selectedTab = 0;
@override
Widget build(BuildContext context) {
_selectedTab = widget.selectedTab ?? 0;
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0), topRight: Radius.circular(12.0)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
spreadRadius: 1.0,
blurRadius: 30.0,
)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
BottomTabBtn(
imagePath: "assets/images/tab_home.png",
selected: _selectedTab == 0 ? true : false,
onPressed: () {
widget.tabPressed!(0);
},
),
BottomTabBtn(
imagePath: "assets/images/tab_search.png",
selected: _selectedTab == 1 ? true : false,
onPressed: () {
widget.tabPressed!(1);
},
),
BottomTabBtn(
imagePath: "assets/images/tab_saved.png",
selected: _selectedTab == 2 ? true : false,
onPressed: () {
widget.tabPressed!(2);
},
),
BottomTabBtn(
imagePath: "assets/images/tab_logout.png",
selected: _selectedTab == 3 ? true : false,
onPressed: () {
widget.tabPressed!(3);
},
),
],
),
);
}
}
class BottomTabBtn extends StatelessWidget {
final String? imagePath;
final bool? selected;
final Function? onPressed;
BottomTabBtn({this.imagePath, this.selected, this.onPressed});
@override
Widget build(BuildContext context) {
bool _selected = selected ?? false;
return GestureDetector(
onTap: onPressed!(),
child: Container(
padding: EdgeInsets.symmetric(vertical: 28.0, horizontal: 24.0),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: _selected ? Theme.of(context).accentColor : Colors.transparent,
width: 2.0,
))),
child: Image(
image: AssetImage(imagePath ?? "assets/images/tab_home.png"),
width: 22.0,
height: 22.0,
color: _selected ? Theme.of(context).accentColor : Colors.black,
),
),
);
}
}
您可以通过多种方式处理此问题：
- 阅读提供后续步骤提示的日志详细信息。第 32 行是违规者。添加一个 Expanded 小部件，以便适当地约束该行。
”相关的导致错误的小部件是：Row file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 The overflowing RenderFlex has an orientation of Axis.horizontal. 的边缘溢出的RenderFlex在渲染中被标记为黄黑条纹图案。这通常是由于内容对于RenderFlex来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。"
- 如果使用 Android Studio，您可以单击“Flutter Inspector”，它可以帮助您缩小有问题的小部件的范围并测试各种选项以消除溢出。
我的猜测：99241 像素很多！如果您的资产 (assets/images/tab_home.png) 未正确缩放。您可以通过用 Icon() 小部件替换它们来潜在地验证这些是特定的违规者。
您必须首先为您的自定义标签栏设置适当的宽度和高度，并使用扩展小部件为您的标签项提供相同的弹性。
import 'package:flutter/material.dart';
class BottomTabs extends StatefulWidget {
final int? selectedTab;
final Function(int)? tabPressed;
BottomTabs({this.selectedTab, this.tabPressed});
@override
_BottomTabsState createState() => _BottomTabsState();
}
class _BottomTabsState extends State<BottomTabs> {
int _selectedTab = 0;
@override
Widget build(BuildContext context) {
_selectedTab = widget.selectedTab ?? 0;
return Container(
height: 56, // Set height as per your need
width: MediaQuery.of(context).size.width, // Screen Width
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0), topRight: Radius.circular(12.0)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
spreadRadius: 1.0,
blurRadius: 30.0,
)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
flex: 1, // Expanded with flex 1 for all items
child: BottomTabBtn(
imagePath: "assets/images/tab_home.png",
selected: _selectedTab == 0 ? true : false,
onPressed: () {
widget.tabPressed!(0);
},
),
),
Expanded(
flex: 1,
child: BottomTabBtn(
imagePath: "assets/images/tab_search.png",
selected: _selectedTab == 1 ? true : false,
onPressed: () {
print("pressed search");
widget.tabPressed!(1);
},
),
),
Expanded(
flex: 1,
child: BottomTabBtn(
imagePath: "assets/images/tab_saved.png",
selected: _selectedTab == 2 ? true : false,
onPressed: () {
widget.tabPressed!(2);
},
),
),
Expanded(
flex: 1,
child: BottomTabBtn(
imagePath: "assets/images/tab_logout.png",
selected: _selectedTab == 3 ? true : false,
onPressed: () {
widget.tabPressed!(3);
},
),
)
],
),
);
}
}
我发现您的按下手势存在一个问题，我也已更正该问题：
class BottomTabBtn extends StatelessWidget {
final String? imagePath;
final bool? selected;
final Function? onPressed;
BottomTabBtn({this.imagePath, this.selected, this.onPressed});
@override
Widget build(BuildContext context) {
bool _selected = selected ?? false;
return GestureDetector(
onTap: () {
onPressed!();
},
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: _selected ? Theme.of(context).accentColor : Colors.transparent,
width: 2.0,
))),
child: Center(
child: Image(
image: AssetImage(imagePath ?? "assets/images/tab_home.png"),
width: 22.0,
height: 22.0,
color: _selected ? Theme.of(context).accentColor : Colors.black,
),
),
),
);
}
}
最终结果：
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:35:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:39:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:42:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:46:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:49:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:53:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:56:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:60:33)
...
============================================= ================================================ =====
========渲染库捕获异常================================ ===================== 布局期间抛出以下断言： 右侧溢出 399607 像素的 RenderFlex。
导致错误的相关小部件是： 行文件:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 溢出的 RenderFlex 的方向为 Axis.horizontal。 溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。 这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#7c268 relayoutBoundary=up3 OVERFLOWING
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
... size: Size(392.7, 100000.0)
... direction: horizontal
... mainAxisAlignment: spaceAround
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
child 1: RenderErrorBox#ee73a
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 2: RenderErrorBox#3f178
parentData: offset=Offset(100000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 3: RenderErrorBox#4099b
parentData: offset=Offset(200000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 4: RenderErrorBox#2956f
parentData: offset=Offset(300000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
========渲染库捕获异常================================ ===================== 布局期间抛出以下断言： 底部溢出 99241 像素的 RenderFlex。
导致错误的相关小部件是： 专栏 file:///C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13 溢出的 RenderFlex 的方向为 Axis.vertical。 溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。 这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#1474e relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=759.3)
... size: Size(392.7, 759.3)
... direction: vertical
... mainAxisAlignment: spaceBetween
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:35:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:39:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:42:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:46:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:49:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:53:33)
...
============================================= ================================================ =====
======== widgets库捕获异常================================ ======================= 构建 BottomTabBtn(dirty) 时抛出了以下 _CastError： 用于空值的空检查运算符
The relevant error-causing widget was:
BottomTabBtn file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:56:11
When the exception was thrown, this was the stack:
#0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:172:53)
#1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19)
#2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16)
#3 _HomePageState.build.<anonymous closure> (package:your_store/screens/home_page.dart:61:35)
#4 _BottomTabsState.build.<anonymous closure> (package:your_store/widgets/bottom_tabs.dart:60:33)
...
============================================= ================================================ =====
========渲染库捕获异常================================ ===================== 布局期间抛出以下断言： 右侧溢出 399607 像素的 RenderFlex。
导致错误的相关小部件是： 行文件:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 溢出的 RenderFlex 的方向为 Axis.horizontal。 溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。 这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#4004c relayoutBoundary=up3 OVERFLOWING
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
... size: Size(392.7, 100000.0)
... direction: horizontal
... mainAxisAlignment: spaceAround
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
child 1: RenderErrorBox#db496
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 2: RenderErrorBox#73a53
parentData: offset=Offset(100000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 3: RenderErrorBox#b66f8
parentData: offset=Offset(200000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
child 4: RenderErrorBox#d20be
parentData: offset=Offset(300000.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
========渲染库捕获异常================================ ===================== 布局期间抛出以下断言： 底部溢出 99241 像素的 RenderFlex。
导致错误的相关小部件是： 专栏 file:///C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13 溢出的 RenderFlex 的方向为 Axis.vertical。 溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。 这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
The specific RenderFlex in question is: RenderFlex#293da relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=759.3)
... size: Size(392.7, 759.3)
... direction: vertical
... mainAxisAlignment: spaceBetween
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
============================================= ================================================ =====
这是我的代码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BottomTabs extends StatefulWidget {
final int? selectedTab;
final Function(int)? tabPressed;
BottomTabs({this.selectedTab, this.tabPressed});
@override
_BottomTabsState createState() => _BottomTabsState();
}
class _BottomTabsState extends State<BottomTabs> {
int _selectedTab = 0;
@override
Widget build(BuildContext context) {
_selectedTab = widget.selectedTab ?? 0;
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0), topRight: Radius.circular(12.0)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
spreadRadius: 1.0,
blurRadius: 30.0,
)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
BottomTabBtn(
imagePath: "assets/images/tab_home.png",
selected: _selectedTab == 0 ? true : false,
onPressed: () {
widget.tabPressed!(0);
},
),
BottomTabBtn(
imagePath: "assets/images/tab_search.png",
selected: _selectedTab == 1 ? true : false,
onPressed: () {
widget.tabPressed!(1);
},
),
BottomTabBtn(
imagePath: "assets/images/tab_saved.png",
selected: _selectedTab == 2 ? true : false,
onPressed: () {
widget.tabPressed!(2);
},
),
BottomTabBtn(
imagePath: "assets/images/tab_logout.png",
selected: _selectedTab == 3 ? true : false,
onPressed: () {
widget.tabPressed!(3);
},
),
],
),
);
}
}
class BottomTabBtn extends StatelessWidget {
final String? imagePath;
final bool? selected;
final Function? onPressed;
BottomTabBtn({this.imagePath, this.selected, this.onPressed});
@override
Widget build(BuildContext context) {
bool _selected = selected ?? false;
return GestureDetector(
onTap: onPressed!(),
child: Container(
padding: EdgeInsets.symmetric(vertical: 28.0, horizontal: 24.0),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: _selected ? Theme.of(context).accentColor : Colors.transparent,
width: 2.0,
))),
child: Image(
image: AssetImage(imagePath ?? "assets/images/tab_home.png"),
width: 22.0,
height: 22.0,
color: _selected ? Theme.of(context).accentColor : Colors.black,
),
),
);
}
}
您可以通过多种方式处理此问题：
- 阅读提供后续步骤提示的日志详细信息。第 32 行是违规者。添加一个 Expanded 小部件，以便适当地约束该行。
”相关的导致错误的小部件是：Row file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 The overflowing RenderFlex has an orientation of Axis.horizontal. 的边缘溢出的RenderFlex在渲染中被标记为黄黑条纹图案。这通常是由于内容对于RenderFlex来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。"
- 如果使用 Android Studio，您可以单击“Flutter Inspector”，它可以帮助您缩小有问题的小部件的范围并测试各种选项以消除溢出。
我的猜测：99241 像素很多！如果您的资产 (assets/images/tab_home.png) 未正确缩放。您可以通过用 Icon() 小部件替换它们来潜在地验证这些是特定的违规者。
您必须首先为您的自定义标签栏设置适当的宽度和高度，并使用扩展小部件为您的标签项提供相同的弹性。
import 'package:flutter/material.dart';
class BottomTabs extends StatefulWidget {
final int? selectedTab;
final Function(int)? tabPressed;
BottomTabs({this.selectedTab, this.tabPressed});
@override
_BottomTabsState createState() => _BottomTabsState();
}
class _BottomTabsState extends State<BottomTabs> {
int _selectedTab = 0;
@override
Widget build(BuildContext context) {
_selectedTab = widget.selectedTab ?? 0;
return Container(
height: 56, // Set height as per your need
width: MediaQuery.of(context).size.width, // Screen Width
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0), topRight: Radius.circular(12.0)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
spreadRadius: 1.0,
blurRadius: 30.0,
)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
flex: 1, // Expanded with flex 1 for all items
child: BottomTabBtn(
imagePath: "assets/images/tab_home.png",
selected: _selectedTab == 0 ? true : false,
onPressed: () {
widget.tabPressed!(0);
},
),
),
Expanded(
flex: 1,
child: BottomTabBtn(
imagePath: "assets/images/tab_search.png",
selected: _selectedTab == 1 ? true : false,
onPressed: () {
print("pressed search");
widget.tabPressed!(1);
},
),
),
Expanded(
flex: 1,
child: BottomTabBtn(
imagePath: "assets/images/tab_saved.png",
selected: _selectedTab == 2 ? true : false,
onPressed: () {
widget.tabPressed!(2);
},
),
),
Expanded(
flex: 1,
child: BottomTabBtn(
imagePath: "assets/images/tab_logout.png",
selected: _selectedTab == 3 ? true : false,
onPressed: () {
widget.tabPressed!(3);
},
),
)
],
),
);
}
}
我发现您的按下手势存在一个问题，我也已更正该问题：
class BottomTabBtn extends StatelessWidget {
final String? imagePath;
final bool? selected;
final Function? onPressed;
BottomTabBtn({this.imagePath, this.selected, this.onPressed});
@override
Widget build(BuildContext context) {
bool _selected = selected ?? false;
return GestureDetector(
onTap: () {
onPressed!();
},
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: _selected ? Theme.of(context).accentColor : Colors.transparent,
width: 2.0,
))),
child: Center(
child: Image(
image: AssetImage(imagePath ?? "assets/images/tab_home.png"),
width: 22.0,
height: 22.0,
color: _selected ? Theme.of(context).accentColor : Colors.black,
),
),
),
);
}
}
最终结果：