我正在尝试使用flutter创建一个欢迎屏幕，但是当我将设备方向更改为横向时，它会给我一个错误。我想做的是，当用户改变设备方向横向内容应该减少它的大小到可用的大小我不想包装它在SingleChildScrollView
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 227 pixels on the bottom.
The relevant error-causing widget was:
Column Column:/lib/welcome.dart:18:15
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#44483 relayoutBoundary=up1 OVERFLOWING:
needs compositing
creator: Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#1ab81 ink renderer] ← NotificationListener ←
PhysicalModel ← AnimatedPhysicalModel ← ⋯
parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
constraints: BoxConstraints(0.0<=w<=638.0, 0.0<=h<=360.0)
size: Size(638.0, 360.0)
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
我试图将整个主体包裹在一个扩展和灵活的小部件中，但它显示
Another exception was thrown: Incorrect use of ParentDataWidget.
Another exception was thrown: Every child of a RenderCustomMultiChildLayoutBox must have an ID in its parent data.
当方向改变为横向时如何减小内容大小
这是我的代码:
home: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xffFEF3F0),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
child: Container(
child: Image.asset(
'images/blogg.png',
width: 201.6,
height: 100,
fit: BoxFit.cover,
),
),
),
),
Text(
'Express more than writings',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
SizedBox(height: 20),
Container(
child: Image.asset(
'images/drib1.PNG',
height: 300,
fit: BoxFit.cover,
),
),
SizedBox(height: 50),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Register()),
);
},
child: Text('Join for free'),
),
SizedBox(height: 20),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => login()),
);
},
child: Text(
"if you have an account,Sign in",
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
)),
您必须将SizedBox设置为屏幕高度在您的Column小部件的父节点:
Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xffFEF3F0),
body: SizedBox(
height: double.infinity,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
正如评论中提到的，你可以使用LayoutBuilder:
你可以只使用它来影响你的小部件的高度(如果你不想改变布局):
LayoutBuilder(
builder: (context,constraints) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
child: Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
// width: 201.6,
height: constraints.maxHeight*0.2,
fit: BoxFit.cover,
),
),
),
const Text(
'Express more than writings',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
const SizedBox(height: 20),
Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
height: constraints.maxHeight*0.35,
fit: BoxFit.cover,
),
SizedBox(height: constraints.maxHeight*0.04),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {},
child: const Text('Join for free'),
),
SizedBox(height: constraints.maxHeight*0.01),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: const Text(
'if you have an account,Sign in',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
);
}
),
),
或者你设置了一个断点，你的布局应该从这个断点开始改变:
LayoutBuilder(
builder: (context, constraints) {
final maxHeight = constraints.maxHeight;
if (maxHeight > 500) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
child: Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
// width: 201.6,
height: maxHeight * 0.2,
fit: BoxFit.cover,
),
),
),
const Text(
'Express more than writings',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
const SizedBox(height: 20),
Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
height: maxHeight * 0.35,
fit: BoxFit.cover,
),
SizedBox(height: maxHeight * 0.04),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {},
child: const Text('Join for free'),
),
SizedBox(height: maxHeight * 0.01),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: const Text(
'if you have an account,Sign in',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
);
}
return Center(
child: Column(
children: [
const SizedBox(height: 20),
Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
height: maxHeight * 0.5,
fit: BoxFit.cover,
),
const Text(
'Express more than writings',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
SizedBox(height: maxHeight * 0.04),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {},
child: const Text('Join for free'),
),
SizedBox(height: maxHeight * 0.01),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: const Text(
'if you have an account,Sign in',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
),
);
},
),
如果您使用第二种方法，最好为布局创建一个自己的小部件，否则您的代码会变得不清晰。