Flutter Row widget 通過切斷剩余區域解決 RenderFlex 溢出問題

Question

這里已經有很多關於Renderflex溢出的問題，但我相信我的用例可能有點不同。

只是常見的問題 - 在Row小Widget中有一個太大的小部件，我得到A RenderFlex overflowed by X pixels...錯誤。

我想創建一個 Row 來切斷它溢出的子Widget ，如果它們在它的區域之外呈現而不會出現錯誤。

首先，在我的情況下，用Expanded或Flexible包裝Row小部件中的最后一個元素不起作用，如此處和此處以及許多其他地方所建議的那樣。 請看代碼和圖片：

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小部件，當important text的區域太寬並且水平不適合屏幕時， Row也沒有准備好 - 它會收到該小部件的溢出錯誤
• 它在第一種情況下在技術上是有效的，因為在綠色區域的右側沒有繪制紅色，它“只是”有一個錯誤

---

如何動態地切斷剩余空間而不會出現任何錯誤 - 無論屏幕大小和內容如何？

Answer 1

我發現的一種解決方案是

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

可以轉換為

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

創建一個水平列表並防止在其上滾動。

---

編輯：剛剛發現你會得到無限的垂直高度，所以它不一樣。