你好, 我希望在Web/桌面应用程序(Web/Windows)中,以灵活/展开的方式放置在列中的内容占据整个屏幕高度,但如果我try 从下面压缩窗口,内容将不会被释放,例如缩小到低于300像素(minHeight?)
我试着像这样解决它,但不幸的是它没有工作.它总是允许中间的红色容器被压缩到小于300像素.
try #1:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Container(
height: 100,
decoration: BoxDecoration(color: Colors.green.shade50),
),
Flexible(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: 300),
child: Container(
decoration: BoxDecoration(color: Colors.pink.shade50),
),
),
),
Container(
height: 100,
decoration: BoxDecoration(color: Colors.blue.shade50),
),
],
),
);
}
try #2:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Container(
height: 100,
decoration: BoxDecoration(color: Colors.green.shade50),
),
Flexible(
child: LayoutBuilder(
builder: (context, constraints2) {
return SizedBox(
height: (constraints2.maxHeight).clamp(200, 300),
child: Container(
decoration: BoxDecoration(color: Colors.pink.shade50),
),
);
},
),
),
Container(
height: 100,
decoration: BoxDecoration(color: Colors.blue.shade50),
),
],
),
);
}
我们try 了很多互联网上的解决方案. 但这对我不好,因为容器的最小大小和最大大小也在这里指定.我喜欢它,这样我只想要最小的大小,但最大的大小应该是这样的,它正好填满了窗口的高度与其他内容(即扩展).
如果红色的Container小于300,则应出现"Bottom Overflow by xxx Pixels".