动画容器:RenderFlex 在底部溢出 154 像素
Animated container : RenderFlex overflowed by 154 pixels on the bottom
我在设置不同内容高度的同时调整动画容器大小时遇到问题。
调整大小时抛出异常:
════════ Exception caught by rendering library ════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 154 pixels on the bottom.
这是一个重现问题的最小示例(在我的真实应用程序中要复杂得多,但您明白了):
bool expanded;
initState() {
super.initState();
expanded = false;
}
void _toggleMode() {
setState(() {
expanded = !expanded;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Test")),
body: AnimatedContainer(
height: expanded ? 230 : 70,
duration: Duration(milliseconds: 800),
child: Column(
children: <Widget>[
Expanded(
child: PageView.builder(
itemBuilder: (context, position) {
return expanded
? Column(
children: <Widget>[
Container(height: 40, color: Colors.blue),
Container(height: 40, color: Colors.blue[400]),
Container(height: 40, color: Colors.blue[300]),
Container(height: 40, color: Colors.blue[200]),
Container(height: 40, color: Colors.blue[100]),
],
)
: Column(
children: <Widget>[
Container(height: 40, color: Colors.blue),
],
);
},
),
),
InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
],
),
),
);
}
在两种模式下(扩展或不扩展),内容适合容器(无溢出),仅在调整大小时出现问题。
当然,没有动画的基本容器不会出现问题。
我该如何处理?
这 发生是因为您检查扩展然后立即 return 容器在容器达到其最终大小之前
解决方法 将使用 NeverScrollableScrollPhysics()
的 ListView 更改较大的列
编辑:您甚至不需要再检查是否展开,您将获得正确的动画
bool expanded;
initState() {
super.initState();
expanded = false;
}
void _toggleMode() {
setState(() {
expanded = !expanded;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Test")),
body: AnimatedContainer(
height: expanded ? 230 : 70,
duration: Duration(milliseconds: 800),
child: Column(
children: <Widget>[
Expanded(
child: PageView.builder(
itemBuilder: (context, position) {
return ListView(
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
Column(
children: <Widget>[
Container(height: 40, color: Colors.blue),
Container(height: 40, color: Colors.blue[400]),
Container(height: 40, color: Colors.blue[300]),
Container(height: 40, color: Colors.blue[200]),
Container(height: 40, color: Colors.blue[100]),
],
),
],
);
// : Column(
// children: <Widget>[
// Container(height: 40, color: Colors.blue),
// ],
// );
},
),
),
InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
],
),
),
);
}
我在设置不同内容高度的同时调整动画容器大小时遇到问题。
调整大小时抛出异常:
════════ Exception caught by rendering library ════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 154 pixels on the bottom.
这是一个重现问题的最小示例(在我的真实应用程序中要复杂得多,但您明白了):
bool expanded;
initState() {
super.initState();
expanded = false;
}
void _toggleMode() {
setState(() {
expanded = !expanded;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Test")),
body: AnimatedContainer(
height: expanded ? 230 : 70,
duration: Duration(milliseconds: 800),
child: Column(
children: <Widget>[
Expanded(
child: PageView.builder(
itemBuilder: (context, position) {
return expanded
? Column(
children: <Widget>[
Container(height: 40, color: Colors.blue),
Container(height: 40, color: Colors.blue[400]),
Container(height: 40, color: Colors.blue[300]),
Container(height: 40, color: Colors.blue[200]),
Container(height: 40, color: Colors.blue[100]),
],
)
: Column(
children: <Widget>[
Container(height: 40, color: Colors.blue),
],
);
},
),
),
InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
],
),
),
);
}
在两种模式下(扩展或不扩展),内容适合容器(无溢出),仅在调整大小时出现问题。
当然,没有动画的基本容器不会出现问题。
我该如何处理?
这 发生是因为您检查扩展然后立即 return 容器在容器达到其最终大小之前
解决方法 将使用 NeverScrollableScrollPhysics()
编辑:您甚至不需要再检查是否展开,您将获得正确的动画
bool expanded;
initState() {
super.initState();
expanded = false;
}
void _toggleMode() {
setState(() {
expanded = !expanded;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Test")),
body: AnimatedContainer(
height: expanded ? 230 : 70,
duration: Duration(milliseconds: 800),
child: Column(
children: <Widget>[
Expanded(
child: PageView.builder(
itemBuilder: (context, position) {
return ListView(
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
Column(
children: <Widget>[
Container(height: 40, color: Colors.blue),
Container(height: 40, color: Colors.blue[400]),
Container(height: 40, color: Colors.blue[300]),
Container(height: 40, color: Colors.blue[200]),
Container(height: 40, color: Colors.blue[100]),
],
),
],
);
// : Column(
// children: <Widget>[
// Container(height: 40, color: Colors.blue),
// ],
// );
},
),
),
InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
],
),
),
);
}