本文介绍了底部出现99241像素溢出的RenderFlex空检查运算符，用于空值(&A；NULL CHECK运算符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=渲染库=捕获到异常布局期间引发以下断言：一个RenderFlex在右侧溢出了399607像素。相关的导致错误的小部件是：行file:/C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14溢出的RenderFlex的方向为Axis.Horizular。渲染中溢出的RenderFlex边缘已标记为黄色和黑色条纹图案。这通常是由于内容对于RenderFlex而言太大造成的。考虑应用弹性因子(例如，使用展开的小部件)来强制RenderFlex的子项适应可用空间，而不是调整到它们的自然大小。这被认为是错误情况，因为它指示存在看不到的内容。如果内容合理地大于可用空间，请考虑在将其放入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)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
==
=渲染库=捕获到异常布局期间引发以下断言：一个RenderFlex在底部溢出了99241像素。相关的导致错误的小部件是：列file:/C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13溢出的RenderFlex的方向为Axis.Vertical。渲染中溢出的RenderFlex边缘已标记为黄色和黑色条纹图案。这通常是由于内容对于RenderFlex而言太大造成的。考虑应用弹性因子(例如，使用展开的小部件)来强制RenderFlex的子项适应可用空间，而不是调整到它们的自然大小。这被认为是错误情况，因为它指示存在看不到的内容。如果内容合理地大于可用空间，请考虑在将其放入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
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=微件库==捕获的异常在构建BottomTabBtn(脏)时引发以下_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)
...
==
=渲染库=捕获到异常布局期间引发以下断言：一个RenderFlex在右侧溢出了399607像素。相关的导致错误的小部件是：行file:/C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14溢出的RenderFlex的方向为Axis.Horizular。渲染中溢出的RenderFlex边缘已标记为黄色和黑色条纹图案。这通常是由于内容对于RenderFlex而言太大造成的。考虑应用弹性因子(例如，使用展开的小部件)来强制RenderFlex的子项适应可用空间，而不是调整到它们的自然大小。这被认为是错误情况，因为它指示存在看不到的内容。如果内容合理地大于可用空间，请考虑在将其放入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)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
==
=渲染库=捕获到异常布局期间引发以下断言：一个RenderFlex在底部溢出了99241像素。相关的导致错误的小部件是：列file:/C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13溢出的RenderFlex的方向为Axis.Vertical。渲染中溢出的RenderFlex边缘已标记为黄色和黑色条纹图案。这通常是由于内容对于RenderFlex而言太大造成的。考虑应用弹性因子(例如，使用展开的小部件)来强制RenderFlex的子项适应可用空间，而不是调整到它们的自然大小。这被认为是错误情况，因为它指示存在看不到的内容。如果内容合理地大于可用空间，请考虑在将其放入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,
),
),
);
}
}
推荐答案
您必须首先为自定义选项卡栏设置适当的宽度和高度，并对选项卡项使用展开的小工具。
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,
),
),
),
);
}
}
最终结果：
这篇关于底部出现99241像素溢出的RenderFlex空检查运算符，用于空值(&A；NULL CHECK运算符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！