调整Flutter大小时的列复制

Question

我正在尝试创建一个卡片，里面有一个图像和一些文本，并且根据窗口大小不会溢出，因为它没有那么多信息。文本显示得不好也没关系。但我遇到了这个问题，当屏幕的大小非常小，并且它复制了列时，就会溢出

这是代码：

class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text(widget.title)),
body: SingleChildScrollView(
child: Column(children: [
ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) => card()
)
])
)
);
}
card() {
return Container(
child: Padding(
padding: EdgeInsets.fromLTRB(5, 10, 5, 0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5.0),),
child: Material(
color: Theme.of(context).cardColor,
child: Ink( child: InkWell(
onTap: () {},
child: FittedBox(child: Padding(
padding: EdgeInsets.only(bottom: 10, top: 10),
child: productInfo()
))
))
)
)
)
);
}
productInfo(){
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
child: Container(
padding: EdgeInsets.only(left: 10),
child: ConstrainedBox(
constraints: BoxConstraints( maxWidth: 130.0, maxHeight: 130),
child: Text('image', style: TextStyle(fontSize: 10))
)
)
),
Container(
padding: EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ info("name"), info("value") ]
)
),
]
);
}
info(String text){
return Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: MediaQuery.of(context).size.width - 168,
child: Text( text, overflow: TextOverflow.ellipsis, softWrap: false, maxLines: 2, textAlign: TextAlign.left,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600
)
)
)
);
}
}

Answer 1

当屏幕的大小非常小时，您必须考虑在Container()中使用了padding: EdgeInsets.fromLTRB(5, 10, 5, 0),。它按预期工作。