如何使用ListView將元素相互放置？

Question

當涉及ListView時，我很難將各個項目放在一起。

我有這個代碼：

body:
    Column(
        children: [
            Text('foo'),
            Expanded(
                child: ListView.builder(
                    controller:     ...,
                    itemCount:      ...,
                    itemBuilder:    ... 
                )
            ),
            Text('bar')
        ]
    )
,

它給了我左邊的結果，但是我想要右邊的結果：

我試圖將ListView放在一個容器中（ height: double.maxFinite ），但它給了我一個： Bottom overflowed by X pixels 。

編輯 ：這是我想要達到的結果（在“整頁”中運行代碼段）：

 body { font-size: 18px; margin: 0; padding: 0; } .mobile { position: relative; width: 320px; margin: 0 auto; border: 1px solid cyan; max-height: 400px; overflow-y: scroll; padding-top: 41px; } .appbar { position: fixed; top: 0; width: 300px; background: rgba(0, 0, 0, 1); color: white; padding: 10px; } .text { background: rgba(255, 0, 0, .3); padding: 10px; } .list-view { background: rgba(0, 255, 0, .3); padding: 10px; min-height: 500px; } 

 <div class="mobile"> <div class="appbar">AppBar</div> <div class="text">Text</div> <div class="list-view">ListView</div> <div class="text">Text</div> </div> 

Answer 1

您必須使用CustomScrollView

CustomScrollView(
    slivers: <Widget>[
      SliverToBoxAdapter(
        child: Text("Text"),
      ),
      SliverList(
        delegate: SliverChildListDelegate( [
              Container(
                height: 200.0,
                decoration: BoxDecoration(color: Colors.orange),
              ),
              Container(
                height: 400.0,
                decoration: BoxDecoration(color: Colors.pink),
              ),
              Container(
                height: 500.0,
                decoration: BoxDecoration(color: Colors.blue),
              )
            ]),
      ),
      SliverToBoxAdapter(
        child: Text("Text"),
      ),
    ],
  ) 

請注意，您可以使用SliverChildListDelegate或SliverChildBuilderDelegate

Answer 2

試試這個

body: Column( children: [ Text('foo'), Expanded( child: Container( child: ListView.builder( shrinkWrap: true, itemBuilder: ......., itemCount: ....., ), ), ), Text('bar') ] ) ,

這段代碼對我有用。

Answer 3

您可以將頂部和底部的foo和bar添加為列表的第一項和最后一項。 ListView將具有list.length + 2項目。

  body: Column(children: [
    Text('foo'),
    Expanded(
      child: ListView.builder(
        itemCount: list.length + 2,
        itemBuilder: (context, index) {
          if (index == 0)
            return Text("foo");
          else if (index < list.length + 1)
            return Text("$index");
          else
            return Text('bar');
        },
      ),
    ),
  ]),