Flutter语言 - RenderFlex在底部溢出了81个像素

Question

下午好，我是android编程的新手。我想问一下代码中的错误。在布局过程中抛出了以下断言:一个RenderFlex在底部溢出了81个像素。。我试图找到一个解决办法，但仍然没有任何效果。这是我的代码。谢谢你

class berita_secondpage extends StatelessWidget {
final String title;
berita_secondpage({
this.title,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
image: DecorationImage(
image: AssetImage("assets/images/aquaman.jpg"),
fit: BoxFit.cover,
))),
),
Container(
height: 260,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
Text(
"diupload pada : 20 Agustus 2021",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 10,
fontWeight: FontWeight.w600,
),
),
SizedBox(
width: 15,
),
Text(
"testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 17,
fontWeight: FontWeight.w600,
),
),
],
),
)
],
),
)
],
));
}
}

Answer 1

您的问题是由于您的第二个集装箱高度而发生的。你给容器高度260，但你的文字需要更多的空间来显示。记住，'A RenderFlex溢出......我想告诉你，你的数据(图像/文本)需要更多的空间，但你给他的空间很少。

class SecondPage extends StatelessWidget {
final String title;
SecondPage({required this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
image: DecorationImage(
image: NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover,
),
),
),
),
Container(
height: 360,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
const Text(
"diupload pada : 20 Agustus 2021",
style:  TextStyle(
color: Colors.lightBlueAccent,
fontSize: 10,
fontWeight: FontWeight.w600,
),
),
const   SizedBox(
width: 15,
),
const Text(
"testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing",
style:  TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 17,
fontWeight: FontWeight.w600,
),
),
],
),
)
],
),
)
],
),
));
}
}

Answer 2

您可以尝试将第二个Container添加到Flexible小部件中。这个错误只是说小部件比视窗大。

Answer 3

你可以在wrap组件

Container(
height: 260,
child: Wrap(
children: [
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
Text(
"diupload pada : 20 Agustus 2021",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 10,
fontWeight: FontWeight.w600,
),
),
SizedBox(
width: 15,
),
Text(
"testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 17,
fontWeight: FontWeight.w600,
),
),
],
),
)
],
),
],
),
)

Answer 4

Container(
height: 260,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
Text(
"diupload pada : 20 Agustus 2021",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 10,
fontWeight: FontWeight.w600,
),
),
SizedBox(
width: 15,
),
Text(
"testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing",
style: TextStyle(
// color: Colors.lightBlueAccent,
fontSize: 17,
fontWeight: FontWeight.w600,
),
),
],
),
)
],
),
),
)