在 flutter 的單個子滾動視圖中使用時，如何為列表視圖提供擴展高度？

Question

這是一個演示，其中我采用了一些容器、文本字段和列表視圖生成器，

我已將所有內容包裝在 SingleChildScrollView 中以避免打開鍵盤時出現像素錯誤，

在這里我想給列表視圖可能的高度，取決於列表視圖和保存按鈕之間的項目計數和間隔

這是我的代碼：

  List<String> paybylist=[
    'A','B','C','D','E','F','G',
    'H','I','J','K','L','M','N',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(children: [
          Container(
            height: 100,
            color: Colors.red,
            child: Center(child: Text('Container1')),
          ),
          Container(
            height: 50,
            //color: Colors.green,
            child: Center(
              child: CustomTextField(),
            ),
          ),
          Text('Select Payment Mode'),
          Container(
            height: 400,//height should be based on available space
            color: Colors.grey,
            child:ListView.builder(
                itemCount: paybylist.length,
                itemBuilder: (context,index){
                  return ListTile(
                    title: Text(paybylist[index]),
                  );
                }) ,
          ),

             //want to add available space between listview and save button

          Padding(
            padding: const EdgeInsets.all(8.0),
            child: MaterialButton(
              color: Colors.blue,
              onPressed: (){},child: Center(child: Text('Save')),),
          )

        ],),
      ),
    );
  }
}

Answer 1

您可以在ListView.builder()中添加shrinkWrap:true並向其添加physics: NeverScrollableScrollPhysics() ，否則您的列表將不會滾動。

這是一個例子

@override
  Widget build(BuildContext context) {
    List<String> paybylist = [
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
    ];

    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 100,
              color: Colors.red,
              child: Center(child: Text('Container1')),
            ),
            Container(
              height: 50,
              //color: Colors.green,
              child: Center(
                child: TextField(),
              ),
            ),
            Text('Select Payment Mode'),
            Container(
              // height: 400,
              child: ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: paybylist.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(paybylist[index]),
                    );
                  }),
            ),

//want to add available space between listview and save button

            Padding(
              padding: const EdgeInsets.all(8.0),
              child: MaterialButton(
                color: Colors.blue,
                onPressed: () {},
                child: Center(child: Text('Save')),
              ),
            )
          ],
        ),
      ),
    );
  }

您也可以在Stack或BottomNavigationBar中添加保存按鈕，這樣按鈕將始終可見。

Answer 2

不能在flutter的Scrollable Widget里面添加Expanded ，

---

要填補可用空白，請將save按鈕放在bottomNavigationBar中

所以現在ListView不需要 400 的固定高度，它可以跨越以獲得完整的高度。 事實上，它只會跨越兒童的高度

---

確保在ListView.builder()中添加shrinkWrap:true和physics: NeverScrollableScrollPhysics() )

你現在的結構

Scaffold
 |_body: 
   |_SingleChildScrollView
     |_Column
       |_Container
       |_Container
       |_Continaer (400 height)
         |_ListView
       |_Container (Save Button)

將其更改為：

Scaffold
 |_body: 
   |_SingleChildScrollView
     |_Column
       |_Container
       |_Container
       |_ListView
         |shrinkWrap:true
         |physics: NeverScrollableScrollPhysics()
 |_bottomNavigationBar
   |_Container (Save Button)