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

Question

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

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

我想创建一个行，将其溢出的子级Widget截断，如果它们将在其区域外呈现而又没有出现错误。

首先，用Row或Expanded包裹Flexible小部件中的最后一个元素不起作用，在我的情况下，建议使用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的区域过宽且无法水平放置屏幕的情况-该小部件会出现溢出错误
• 在第一种情况下，它在技术上是可行的，因为在绿色区域的右侧没有绘制红色，所以'只是'有错误

---

无论屏幕大小和内容如何，​​我如何动态地切断剩余空间而没有任何错误？

Answer 1

我发现的一个解决方案是>

Row(
    children: <Widget>[
        dummyChild,
        fadeContainer,
    ],
)
可以转换为

ListView(
    scrollDirection: Axis.horizontal,
    physics: const NeverScrollableScrollPhysics(),
    children: <Widget>[
        dummyChild,
        fadeContainer,
    ],
)
创建水平列表并防止在其上滚动。

---

编辑。：刚发现它是you'll get unbounded vertical height，所以不一样。