你好, 我希望在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".

推荐答案

 return Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),
  body:
  CustomScrollView(
      slivers: [
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            children: <Widget>[
              Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.green.shade50),
              ),
              Flexible(
                flex: 1,
                child: ConstrainedBox(
                  constraints: BoxConstraints(minHeight: 200, maxHeight: 300),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.pink.shade50),
                  ),
                ),
              ),
              Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.blue.shade50),
              ),
            ],
          )
        )
      ],
  )
);

Flutter相关问答推荐

Flutter 导致底部溢出

Flutter:InteractiveViewer中可伸缩SVG背景上的定位小部件不对齐

当仅点击一行时,所有行都被选中

为什么他们实例化类,然后丢弃该实例?

更改BottomNavigationBar onTap?的大小

有没有什么方法可以加快在Flutter 中加载Quill HTML编辑器的速度?

构建方法中的性能声明小部件

从图标启动器打开时,VSCode未检测到Web设备

如何使自动焦点位于已经有一些文本的 TextField 的第一行?

Flutter中pubspec.yaml文件中的name参数是什么?

Flutter 中的 Provider 不会在第一次构建 App 时返回

Flutter 应用程序在启动画面冻结(java.lang.RuntimeException:无法启动活动 ComponentInfo)

当我使用 Confetti Widget 时,Flutter Android 和 IOS 应用程序崩溃

为什么轮播加载图片很慢?

Flutter - 使用 pin 进行身份验证

Flutter NavigationBar 忽略我的背景 colored颜色

如何在flutter中共享容器和gridview之间的滚动条?

Flutter Bloc Todo 示例 - 收听存储库中的单个 todo

如何从用户 Flutter 导航抽屉中隐藏管理菜单

在 Flutter 中更新对象实例属性的最佳实践是什么?该实例嵌套在提供程序类的映射中,如下所示