Flutter向ListView中添加顶部和底部的小部件

Question

尝试在列表视图之前添加一些小部件…我搜索并发现可以使用expanded，例如：

  return Scaffold(
    appBar: AppBar(
      title: Text('Test Listview'),
    ),
    body: Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          Text('header'),
          Expanded(
            child: ListView.builder(
              itemCount: providerApp.domains.length,
              itemBuilder: (BuildContext context, int index) {
                return Container( ......

但是问题在于Text('header')会保持固定，需要找到一种方式使小部件与listview一起滚动...

谢谢!!!

- aknd

Answer 1

您可以通过在列表视图中使用另一个列表视图来实现此目的，以下是示例代码，请检查。

 body: ListView(
    children: <Widget>[
      Container(
        height: 40,
        color: Colors.deepOrange,
        child: Center(
          child: Text(
            'Header',
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ),
      ),
      ListView.builder(
        physics: ScrollPhysics(),
        shrinkWrap: true,
        itemCount: 50,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.lime,
            height: 60,
            child: Center(
              child: Text(
                'Child $index',
                style: TextStyle(color: Colors.black, fontSize: 16),
              ),
            ),
          );
        },
      ),
      Container(
        height: 40,
        color: Colors.deepOrange,
        child: Center(
          child: Text(
            'Footer',
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ),
      ),
    ],
  ),

- Kailash Chouhan

---

谢谢！！！我也用了Slivers和SliverToBoxAdapter，但我更喜欢你的解决方案。 - aknd

欢迎，如果答案好的话，请点赞。StackOverflow评分系统不计算特定标签评分中已接受的答案。祝编码愉快！ - Kailash Chouhan

这是最佳解决方案。 - Achin

有没有想过如何实现滚动条？ - Simon

答案解释的一个重要补充：不要忘记在列表构建器中添加 shrinkWrap: true。 - undefined

Answer 2

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: ListView(
     children: Widget[
       Container(
         width: MediaQuery.of(context).width,
         height: 50,
         alignment: AlignmentDirectional.center
         child: Text("HEADER")
      ),
      for(var i =0;i<providerApp.domains.length;i++)
      Container(
         width: MediaQuery.of(context).width,
         height: 50,
         alignment: AlignmentDirectional.center
         child: Text("Child $i")
      ),
      Container(
         width: MediaQuery.of(context).width,
         height: 50,
         alignment: AlignmentDirectional.center
         child: Text("Footer")
      )
    ]
  )
)

- Z. Cajurao

---

MediaQuery.of(context).size.widthandMediaQuery.of(context).size.height - Stefan Kühn

Answer 3

如何在Listview Builder的末尾添加静态小部件

• 创建ListBuilder
• 创建条件，如果(index == [yourWidgetList].length – 1)
• 然后返回您的页脚小部件
• 否则返回其余的顶部小部件

此处有关于此主题的完整文章

在示例代码中，我创建了一个列表

List listTiles = ["A", "B", "C", "Footer"];

现在我使用了列表视图构建器来填充这个列表

ListView.builder(
      itemCount: listTiles.length,
      itemBuilder: (context, index) {
        if (index == listTiles.length - 1) {
          return Container(
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            margin: const EdgeInsets.symmetric(vertical: 10.0),
            color: Colors.red,
            child: Center(
              child: Text(listTiles[index]),
            ),
          );
        } else {
          return Container(
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            margin: const EdgeInsets.symmetric(vertical: 10.0),
            color: Colors.greenAccent,
            child: Center(
              child: Text(listTiles[index]),
            ),
          );
        }
      },
    ),

还有其他方法可以实现这个目标 请查看其他方式

- Hemunt Kumar Sharma

Answer 4

试试这个。

body : Container(
      constraints: BoxConstraints.expand(),
      padding: const EdgeInsets.all(10.0),
      child : ListView.builder(
         itemCount : providerApp.domains.length + 1,
         itemBuilder : (BuildContext context, int index){
             Widget result;
             if(index == 0){
               result = Text("Header");
             }else{
               result = Container(..Your list item code here.);
             }
             return result;
         },
      ),
    )

PS：如果您想将小部件添加到列表底部，则条件为provider.domain.length + 1。

希望能对您有所帮助。

- Akio Alex

Answer 5

你应该返回 ListTile 而不是 Container，现在您的瓷砖将根据 ListTile 的 title: 属性字段进行命名，其中 "providerapp.domains" 是字符串列表。

Container(
            child: Column(children: <Widget>[
      Text('header'),
      ListView.builder(
        itemCount: providerApp.domains.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('${(providerApp.domains)[index]}'),
          );
        },
      ),
    ]),
)

- Oprimus