我希望有人可以帮助我解决水平转动屏幕时的溢出问题。当我水平转动屏幕时，出现异常:
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: () {},
),),
]),
),
),
)],
);
},
),
);
}
}
编辑:这个问题得到了解答，但该解决方案又产生了另一个问题。因此，如果您想帮忙 this question或者您遇到同样的问题，请点击链接。 :)
最佳答案
在 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: () {},
),
),
]),
),
),
)
],
);
},
),
);
}
}
关于flutter - 尝试使用 Flutter 布局修复底部溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71246184/