Flutter：允許容器內溢出？

Question

是否可以允許容器內溢出而不使內容可滾動？ 例如：

Container(
  height: 100,
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: List.generate(10, (i) => Container(height: 100.0, width: 300).toList();
   ),
)

我知道它理論上會在發布時正常工作，但我希望在調試時抑制溢出警告。

我嘗試將 Container() 包裝在 OverflowBox() 中，但它仍然顯示溢出警告。 我嘗試過的所有其他方法都使列表可滾動 - 它需要保持固定。

Answer 1

使用將 scrollDirection 設置為 Axis.horizontal 的 SingleChildScrollView，雖然它有效，但我推薦 ListViewBuilder

Container(
          height: 100,
          width: MediaQuery.of(context).size.width,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: List.generate(
                10,
                (i) => Container(
                  height: 100.0,
                  width: 300,
                  margin: EdgeInsets.all(8),
                  color: Colors.green,
                ),
              ).toList(),
            ),
          ),
        ),

使用 ListviewBuilder

ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 100,
              itemBuilder: (context, i) {
                return Container(
                  height: 100.0,
                  width: 300,
                  margin: EdgeInsets.all(8),
                  color: Colors.green,
                );
              },
            )

編輯： Wrap 小部件可以解決問題。

SizedBox(
        height: 100,
        width: MediaQuery.of(context).size.width,
        child: Wrap(
          clipBehavior: Clip.hardEdge,
          direction: Axis.horizontal,
          children: List.generate(
            10,
            (i) => Container(
              height: 100.0,
              width: 300,
              margin: EdgeInsets.all(8),
              color: Colors.green,
            ),
          ).toList(),
        ),
      ),

Answer 2

要使列表不可滾動，請在 ListView 中使用NeverScrollableScrollPhysics() 。
例如

ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: 100,
          itemBuilder: (context, i) {
            return Container(
              height: 100.0,
              width: 300,
              margin: EdgeInsets.all(8),
              color: Colors.green,
            );
          },
        ),