如何解决当列在具有完整高度的容器中时,列的MainAxisSize.min和ListView的shrinkWrap:true不起作用
如果您创建一个占用屏幕整个高度的容器,然后将其mainAxisSize属性设置为MainAxisSize.min的Column或将其compressionWrap属性设置为true的ListView放置,则将忽略这些值,并且Column / ListView将占据容器的整个高度。
以下是代码示例来说明这一点:
///Column
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,child: Column(
mainAxisSize: MainAxisSize.min,children: const [
Text('1'),Text('2'),Text('3'),],),);
}
OR
///ListView
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,child: ListView(
shrinkWrap: true,);
}
当列或ListView放置在具有窗口全高的容器内时,如何仅占用其内容的大小?
解决方法
您可以将其包装在Column
中并包含
Expanded/Flexible
用于其他小部件,例如以下示例:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,color: Colors.pink,child: Column(children: [
Column(
mainAxisSize: MainAxisSize.max,children: const [
Text('1'),Text('2'),Text('3'),],),Expanded(child: Container(color: Colors.green))
]),);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。