Flutter Row 小部件通过切断剩余区域解决 RenderFlex 溢出问题

Posted 2023-02-23

【中文标题】Flutter Row 小部件通过切断剩余区域解决 RenderFlex 溢出问题

【英文标题】：Flutter Row widget solve RenderFlex overflow by cutting off remaining area

【发布时间】：2020-09-03 08:43:43

【问题描述】：

这里已经有很多关于Renderflex 溢出的问题，但我相信我的用例可能有点不同。

只是常见的问题 - 在 Row 小部件中有一个太大的 Widget，我得到了 A RenderFlex overflowed by X pixels ... 错误。

我想创建一个 Row 来切断它溢出的子 Widget，如果它们会在它的区域之外呈现而不会出现错误。

首先，在我的情况下，用Expanded 或Flexible 包装Row 小部件中的最后一个元素不起作用，推荐here 和here 和许多其他地方。请看代码和图片：

class PlayArea extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final dummyChild = Container(
      color: Colors.black12,
      width: 100,
      child: Text('important text'),
    );

    final fadeContainer = Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            Colors.black26,
            Colors.black87,
          ],
        ),
      ),
      width: 600,
    );

    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Container(
        color: Colors.redAccent,
        child: Column(children: [
          Expanded(
            child: Row(
              children: <Widget>[
                dummyChild,
                fadeContainer,
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                dummyChild,
                Expanded(
                  child: fadeContainer,
                ),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Container(
                  color: Colors.black12,
                  width: 1100,
                  child: Text('important text'),
                ),
                Expanded(
                  child: fadeContainer,
                ),
              ],
            ),
          ),
        ]),
      ),
    );
  

要点：

使用Expanded 改变Container 的宽度，从而改变渐变的斜率。我想保持渐变原样 即使使用 Expanded 小部件，Row 也无法应对 important text 的区域太宽且水平不适合屏幕的情况 - 该小部件会出现溢出错误 从技术上讲，它在第一种情况下有效，因为在绿色区域的右侧没有绘制红色，它“只是”有一个错误

---

我如何动态地切断剩余空间而不会出现任何错误 - 无论屏幕大小和内容如何？

【参考方案1】：

我找到的一个解决方案是

Row(
    children: <Widget>[
        dummyChild,
        fadeContainer,
    ],
)

可以转换成

ListView(
    scrollDirection: Axis.horizontal,
    physics: const NeverScrollableScrollPhysics(),
    children: <Widget>[
        dummyChild,
        fadeContainer,
    ],
)

创建一个水平列表并防止滚动。

---

edit.：刚刚发现you'll get unbounded vertical height，所以不一样。