flutter在列表视图顶部和底部添加小部件

d6kp6zgx  于 2022-11-26  发布在  Flutter
关注(0)|答案(5)|浏览(180)

尝试添加一些小部件到一个列表视图之前....我搜索了一下,发现可以使用扩展,如:

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( ......

但这里的问题是,文本('标题')将被修复,寻找一些方式,在那里的小部件滚动一起列表视图...
谢谢!!!

l2osamch

l2osamch1#

您可以通过在列表视图中使用列表视图来实现这一点,下面是示例代码,请检查

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),
          ),
        ),
      ),
    ],
  ),
gxwragnw

gxwragnw2#

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")
      )
    ]
  )
)
x8diyxa7

x8diyxa73#

试试这个

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
我希望能帮到你。

92dk7w1h

92dk7w1h4#

您现在应该返回ListTile而不是Container,并且您的图块将根据ListTiletitle:属性字段来命名,其中“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]}'),
          );
        },
      ),
    ]),
)
g6ll5ycj

g6ll5ycj5#

以下是如何在列表视图生成器末尾添加静态小部件

  • 创建ListBulder
  • 在If(index == [您的Widget清单].length - 1)中建立条件
  • 然后返回页脚小部件
  • 否则返回顶部小部件的其余部分

Full Article on this
在示例代码中,我创建了一个列表

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]),
            ),
          );
        }
      },
    ),

也有一些其他的方法来实现这个检查Other Ways

相关问题