如何包裹“AspectRatio”小部件以避免黄/黑溢出线？

Question

这是我的代码（完整的项目代码：https://github.com/mitchkoko/responsivedesign）：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class MyDesktopBody extends StatelessWidget {
  const MyDesktopBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[200],
      appBar: AppBar(
        title: Text('D E S K T O P'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            // First column
            Expanded(
              child: Column(
                children: [
                  // videoplayer section
                  AspectRatio(
                    aspectRatio: 16/9,
                    child: Container(
                      color: Colors.deepPurple[400],
                    ),
                  ),
                    
                  // comment section
                  Expanded(
                    child: ListView.builder(
                      itemCount: 8,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            color: Colors.deepPurple[300],
                            height: 120,
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
            ),
        
            // second column
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 200,
                  color: Colors.deepPurple[300],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

当我扩展窗口大小或减小窗口高度时，我收到以下错误消息：

════════渲染库捕获异常 ═════════════════════════════════抛出以下断言 布局期间：RenderFlex 底部溢出 5.1 像素。

导致错误的相关小部件是 Column 库 esponsive\desktop_body.dart:20 您可以使用以下命令检查此小部件 VS Code 通知中的“检查小组件”按钮。这 溢出的 RenderFlex 的方向为 Axis.vertical。边缘 溢出的 RenderFlex 已在渲染中标记 带有黄色和黑色条纹图案。这通常是由 内容对于 RenderFlex 来说太大了。

考虑应用弹性因子（例如使用扩展小部件） 强制 RenderFlex 的子级适应可用空间 而不是按照自然尺寸调整尺寸。这被认为是 错误条件，因为它表明存在无法执行的内容 可见。如果内容合法地大于可用的内容 空间，在放置之前考虑使用 ClipRect 小部件对其进行裁剪 在 Flex 中，或者使用可滚动容器而不是 Flex，例如 一个列表视图。

具体的 RenderFlex 问题是：RenderFlex#cd135 relayoutBoundary=up7 溢出 ════════════════════════════════════════ ══════════ ══════════════════════════════

我认为问题是视频播放器部分中的

AspectRatio

小部件。我不知道如何包装这个小部件以防止发生此错误，但是当我注释掉这部分代码时，我将不再收到错误。

Answer 1

是的，当 YouTube 播放器部分尝试根据小高度和大宽度填充高度时，问题会出现。您可以用

AspectRatio

换行来解决这个问题。ConstrainedBox

完整小部件

body: LayoutBuilder(
  builder: (context, constraints) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
      children: [
        // First column
        Expanded(
          child: Column(
            children: [
              // videoplayer section
              ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: constraints.maxHeight - 16,
                ),
                child: AspectRatio(
                  aspectRatio: 16 / 9,

Answer 2

class MyDesktopBody extends StatelessWidget {
  const MyDesktopBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[200],
      appBar: AppBar(
        title: Text('D E S K T O P'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              // First column
              Expanded(
                child: Column(
                  children: [
                    // videoplayer section
                    ConstrainedBox(
                      constraints: BoxConstraints(
                        maxHeight: constraints.maxHeight - 16,
                      ),
                      child: AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Container(
                          color: Colors.deepPurple[400],
                        ),
                      ),
                    ),

                    // comment section
                    Expanded(
                      child: ListView.builder(
                        itemCount: 8,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              color: Colors.deepPurple[300],
                              height: 120,
                            ),
                          );
                        },
                      ),
                    )
                  ],
                ),
              ),

              // second column
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 200,
                    color: Colors.deepPurple[300],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}