尝试使用 Flutter 布局修复底部溢出
Trying to fix bottom overflow with Flutter layout
我希望有人能帮助我解决水平转动屏幕时出现的溢出问题。当我水平转动屏幕时出现异常：
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#baeb5 relayoutBoundary=up16 OVERFLOWING:
creator: Column ← Padding ← ColoredBox ← ConstrainedBox ← Container ← _SingleChildViewport ←
IgnorePointer-[GlobalKey#3fcbb] ← Semantics ← Listener ← _GestureSemantics ←
RawGestureDetector-[LabeledGlobalKey#4a7bc] ← Listener ← ⋯
parentData: offset=Offset(12.0, 12.0) (can use size)
constraints: BoxConstraints(0.0<=w<=762.3, h=133.7)
size: Size(762.3, 133.7)
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
以及我的模拟器上的提示：
BOTTOM OVERFLOW BY 194 PIXELS
现在因为这个异常我尝试添加一个“SingleChildScrollView”来解决这个问题，允许答案选项滚动而不是溢出，但是滚动似乎不起作用并且问题仍然存在。所以我希望有人能帮我解决这个问题，让我的测验页面也能在水平方向上正常工作而不会出错。非常感谢您的帮助！
quiz.dart
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column( children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(fontSize: 20.0,)),))
),
Visibility(// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(fontSize: 17.0,)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(fontSize: 15.0,)),
],),
)),
),
),),
SingleChildScrollView(
child:Container(
height: constraints.maxHeight / 2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: Column(children: [
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
]),
),
),
)],
);
},
),
);
}
}
编辑：这个问题得到了回答，但解决方案产生了另一个问题。因此，如果您想帮助 或遇到同样的问题，请关注 link。 :)
您不需要在 singlechildscrollview 中换行列而不是容器。
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column(
children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(
fontSize: 20.0,
)),
))),
Visibility(
// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(
fontSize: 17.0,
)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(
fontSize: 15.0,
)),
],
),
)),
),
),
),
//not here
Container(
height: constraints.maxHeight/2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: SingleChildScrollView( //here
child: Column(children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
]),
),
),
)
],
);
},
),
);
}
}
我希望有人能帮助我解决水平转动屏幕时出现的溢出问题。当我水平转动屏幕时出现异常：
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#baeb5 relayoutBoundary=up16 OVERFLOWING: creator: Column ← Padding ← ColoredBox ← ConstrainedBox ← Container ← _SingleChildViewport ← IgnorePointer-[GlobalKey#3fcbb] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#4a7bc] ← Listener ← ⋯ parentData: offset=Offset(12.0, 12.0) (can use size) constraints: BoxConstraints(0.0<=w<=762.3, h=133.7) size: Size(762.3, 133.7) direction: vertical mainAxisAlignment: start mainAxisSize: max crossAxisAlignment: center verticalDirection: down
以及我的模拟器上的提示：
BOTTOM OVERFLOW BY 194 PIXELS
现在因为这个异常我尝试添加一个“SingleChildScrollView”来解决这个问题，允许答案选项滚动而不是溢出，但是滚动似乎不起作用并且问题仍然存在。所以我希望有人能帮我解决这个问题，让我的测验页面也能在水平方向上正常工作而不会出错。非常感谢您的帮助！
quiz.dart
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column( children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(fontSize: 20.0,)),))
),
Visibility(// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(fontSize: 17.0,)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(fontSize: 15.0,)),
],),
)),
),
),),
SingleChildScrollView(
child:Container(
height: constraints.maxHeight / 2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: Column(children: [
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
]),
),
),
)],
);
},
),
);
}
}
编辑：这个问题得到了回答，但解决方案产生了另一个问题。因此，如果您想帮助
您不需要在 singlechildscrollview 中换行列而不是容器。
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column(
children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(
fontSize: 20.0,
)),
))),
Visibility(
// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(
fontSize: 17.0,
)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(
fontSize: 15.0,
)),
],
),
)),
),
),
),
//not here
Container(
height: constraints.maxHeight/2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: SingleChildScrollView( //here
child: Column(children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
]),
),
),
)
],
);
},
),
);
}
}