Flutter：固定高度容器內的可滾動列子項

Question

我在ListView中有幾個容器，這將在頁面中產生可滾動的內容。 每個容器都有一個 Column 作為子項，在 Column 中我有一個標題和一個分隔符，然后是實際內容。

---

我希望其中一個容器類似於：

Title
--------- (divider)
Scrollable content (most likely a ListView)

---

到目前為止我所擁有的：

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SingleChildScrollView(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: 15,
                itemBuilder: (BuildContext context, int index) {
                    return Text('abc');
                }
            )
        )
    ]
)

---

問題是我希望容器有一個特定的高度，但我得到一個溢出像素錯誤。

Answer 1

用Expanded包裝您的ListView 。 刪除您的SingleChildScrollView因為 ListView 有它自己的滾動行為。 嘗試如下：

Container(
height: 250,
child: Column(children: <Widget>[
    Text('Title'),
    Divider(),
    Expanded(
      
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 15,
            itemBuilder: (BuildContext context, int index) {
                return Text('abc');
            }
        ),
    
    )
]
))

Answer 2

將ListView.builder()小部件包裝在SizedBox()小部件中，並在容納Title()小部件后指定可用高度。

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SizedBox(
            height: 200, // (250 - 50) where 50 units for other widgets
            child: SingleChildScrollView(
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: 15,
                    itemBuilder: (BuildContext context, int index) {
                        return Text('abc');
                    }
                )
            )
        )
    ]
)

您也可以使用Container()小部件而不是SizedBox()小部件，但前提是需要。 SizedBox()是Container()小部件不是的 const 構造函數，因此SizedBox()允許編譯器創建更高效的代碼。