ListView in LimitedBox vs ConstrainedBox

Question

当我试图找出如何限制ListView的大小时，我在Stackoverflow中看到了一些例子，这些例子表明，将ListView放置在LimitedBox中，并设置Limited框的maxHeight和ListView的shrinkwrap就可以实现这一点。然而，ListView仍将增长超过最大高度以适应ListView中的子级的大小。

最后，我尝试了一个使用ConstrainedBox的例子，并设置了它的maxHeight和ListView的Shrinkwrap；这样做似乎实现了将Listview高度限制为maxHeight设置的预期结果。

有人能帮我理解为什么在这种情况下LimitedBox maxHeight不起作用，而ConstraintdBox起作用吗？

以下是LimitedBox的一个示例，它不将自己约束为maxHeight:

Widget _getPopupCard(){
return Hero(
tag: 0,
createRectTween: (begin,end){
return MaterialRectCenterArcTween(begin: begin, end: end);
},
child: Container(
child:Padding(
padding: EdgeInsets.all(14), 
child: Material(
borderRadius: BorderRadius.circular(18), 
color: Colors.white, 
child:  LimitedBox(
maxHeight: 300,
child: ListView(
shrinkWrap: true,
children:  _getTiles(),
),
),
),
),
),
);
}

以下是ConstrainedBox版本的一个示例，它将自己限制为maxHeight:

Widget _getPopupCard(){
return Hero(
tag: 0,
createRectTween: (begin,end){
return MaterialRectCenterArcTween(begin: begin, end: end);
},
child: Container(
child:Padding(
padding: EdgeInsets.all(14), 
child: Material(
borderRadius: BorderRadius.circular(18), 
color: Colors.white, 
child:  ConstrainedBox(
constraints: BoxConstraints(maxHeight: 300.0),
child: ListView(
shrinkWrap: true,
children:  _getTiles(),
),
),
),
),
),
);
}

Answer 1

https://api.flutter-io.cn/flutter/widgets/LimitedBox-class.html

LimitedBox：只有在不受约束的情况下才限制其大小的长方体。

ConstraintdBox：它在所有情况下都应用其约束，而不仅仅是在传入约束是无边界的情况下。

LimitedBox只能在父对象未受训练且颤振无法呈现无穷大宽度/高度时工作，因此LimitedBox必须同时提供MaxWidth和MaxHeight

你可以包装UnconstrainedBox以使LimitedBox工作，但你真的不需要这个。。。请参阅：https://www.woolha.com/tutorials/flutter-using-limitedbox-widget-examples

https://dartpad.dev/2cfc997a7984bf848687f209cba917ce?null_safety=true

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'LimitedBox',
home: Scaffold(
appBar: AppBar(
title:
Text('LimitedBox can only work when parent is unconstrainted')),
body: Center(
child: UnconstrainedBox( // wrap UnconstrainedBox to make LimitedBox works, but you really don't need this... https://www.woolha.com/tutorials/flutter-using-limitedbox-widget-examples
child: _getPopupCard(),
),
),
),
);
}
}
Widget _getPopupCard() {
return LimitedBox(
maxHeight: 300.0,
maxWidth: 300.0,
child: ListView(
shrinkWrap: true,
children: _getTiles(),
),
);
}
List<Widget> _getTiles() {
return List.generate(100, (int i) => i).map((int i) {
return Container(
color: i % 2 == 0 ? Colors.red : Colors.green,
child: Center(child: Text("$i")),
);
}).toList();
}

---

更新：

Container是否是覆盖LimitedBox的受约束父级，即使我没有在Container上设置高度或宽度？

我搜索这个问题只是因为我正在阅读本指南：https://flutter.dev/docs/development/ui/layout/constraints容器的布局行为并不复杂。

关于这一点，我在下面运行了代码，似乎flutter会给Container一个默认的Constraints。容器源告诉一些事情，也许你应该从源中获得一些信息。

runApp(
MaterialApp(
home: UnconstrainedBox(
child: LayoutBuilder(
builder: (ctx, Constraints constraints) {
print(ctx);
print(constraints);//BoxConstraints(unconstrained)
return Text("hello world");
},
),
),
),
);
runApp(
MaterialApp(
home: Container(
color: Colors.white,
child: LayoutBuilder(
builder: (ctx, constraints) {
print(ctx);
print(constraints); // BoxConstraints(w=500.0, h=296.0)
return Text("hello world333333");
},
),
),
),
);