[英]flutter card render overflow issue
我有一个网格视图,并且我一直在列上遇到这个溢出问题。 我不知道如何解决这个问题,并尝试了尽可能多的方法。
GestureDetector(
onTap: () => {print('clicked')},
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(6, 6, 6, 6),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.5),
topRight: Radius.circular(4.5),
bottomLeft: Radius.zero,
bottomRight: Radius.zero,
),
child: Image.network(
prop.thumbnail,
fit: BoxFit.fill,
width: double.infinity,
height: 100,
),
),
Container(
color: Colors.orange,
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
child: Text(
prop.description,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
Row(
children: [
Text('text'),
],
),
Row(
children: [
Text('text'),
],
),
Row(
children: [
Expanded(
flex: 9,
child: Text('text'),,
),
Expanded(
flex: 1,
child: Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
)
],
),
],
),
),
),
我已经编辑了你的代码,请试试这个并告诉我。
GestureDetector(
onTap: () => {print('clicked')},
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(6, 6, 6, 6),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.5),
topRight: Radius.circular(4.5),
bottomLeft: Radius.zero,
bottomRight: Radius.zero,
),
child: Image.network(
prop.thumbnail,
fit: BoxFit.fill,
width: double.infinity,
height: 100,
),
),
Container(
color: Colors.orange,
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
child: Text(
prop.description,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
Text('text'),
Text('text'),
Row(
children: [
Expanded(
flex: 9,
child: Text('text'),
),
Expanded(
flex: 1,
child: Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
)
],
),
],
),
),
),
),
我怀疑您遇到的问题是两件事之一……(但可能是下面的第二件事)
您的图片的固定高度为 100。 尝试将其减少到 80,看看是否可以弥补。 如果是这样,这是您需要考虑的事情。 我创建了这个 dartpad 来测试这个理论: https://dartpad.dev/216440eee06d8fde3ef63f3845026946
我假设您有一长串正在离开屏幕的“文本”小部件。 如果是这种情况,您可以将 Column 包装在SingleChildScrollView中,以便它可以滚动页面。 我在这里创建了一个示例: https://dartpad.dev/cc724a72283b7b01cfd992fe80da5eb4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.