android - 一个 RenderFlex 在底部溢出了 99241 个像素并且在空值上使用了空检查运算符
问题描述
======== 小部件库捕获的异常====================================== ================== 在构建BottomTabBtn（脏）时引发了以下_CastError：Null check operator used on a null value
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：Null check operator used on a null value
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：Null check operator used on a null value
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：Null check operator used on a null value
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)
...
==================================================== ====================================================
======== 渲染库捕获的异常===================================== ================ 布局时抛出以下断言： A RenderFlex 在右侧溢出了 399607 像素。
相关的导致错误的小部件是：Row file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 溢出的 RenderFlex 的方向为 Axis.horizontal。溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如，使用 Expanded 小部件）来强制 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)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
==================================================== ====================================================
======== 渲染库捕获的异常===================================== ================ 布局期间抛出以下断言： A RenderFlex 在底部溢出了 99241 像素。
相关的导致错误的小部件是：Column file:///C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13 溢出的 RenderFlex 具有 Axis.vertical 的方向。溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如，使用 Expanded 小部件）来强制 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：Null check operator used on a null value
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：Null check operator used on a null value
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：Null check operator used on a null value
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：Null check operator used on a null value
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)
...
==================================================== ====================================================
======== 渲染库捕获的异常===================================== ================ 布局时抛出以下断言： A RenderFlex 在右侧溢出了 399607 像素。
相关的导致错误的小部件是：Row file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 溢出的 RenderFlex 的方向为 Axis.horizontal。溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如，使用 Expanded 小部件）来强制 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)
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
==================================================== ====================================================
======== 渲染库捕获的异常===================================== ================ 布局期间抛出以下断言： A RenderFlex 在底部溢出了 99241 像素。
相关的导致错误的小部件是：Column file:///C:/Users/bhask/StudioProjects/your_store/lib/screens/home_page.dart:28:13 溢出的 RenderFlex 具有 Axis.vertical 的方向。溢出的 RenderFlex 边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如，使用 Expanded 小部件）来强制 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,
),
),
),
);
}
}
最终结果：
推荐阅读
- javascript - 轮播仅在代码上显示 2 个元素
- python-2.7 - 使用系统管理员以外的用户时，odoo ir.sequence 不起作用
- java - Android Studio中通过调用Rest API构造的Java对象
- javascript - 在 AJAX 响应后更改特定的 HTML 表格内容
- python - 如何确保python版本正常运行
- java - 如何在 htmlunit 驱动程序中最大化窗口大小？
- javascript - 登录表单未居中对齐
- spring5 - org.springframework.security.authentication.InternalAuthenticationServiceException：同时使用 oracle db 对用户进行身份验证
- react-native - 抽屉打开时向右/向左滑动底部标签栏
- netty - LoggingHandler 及其对管道下游处理程序的影响