Flutter ListView 具有不同的小部件和列表项

Question

我不确定我是否遗漏了什么。我正在玩 Flutter，我想用一些文本小部件、按钮和其他小部件构建一个（简单）视图（见下图）。这些小部件后面应该跟着一个项目列表。整个视图（当然除了应用栏）应该是可滚动的——不仅仅是项目。

这就是为什么我将所有内容都放在 ListView 中。但我无法做这样的事情（而

items

是带有字符串值的地图）：

...    
home: Scaffold(
  appBar: AppBar(
    title: Text('App bar'),
  ),
  body: new ListView(
    children: <Widget>[
      new Text('Some Text'),
      new FlatButton(...),
      new Image.asset(...),
      items.map((item)=>new Padding(
        child: new Text(item.title),
      )).toList()
    ],
  ),
),
...

获得所需视图的正确方法是什么？

提前致谢！

Answer 1

您可以使用

ListView.builder

因为效率更高，因为这些项目仅在滚动到屏幕上时才会创建。在第一个位置，您可以放置不在列表中的小部件，如下所示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('App bar')),
    body: ListView.builder(
      itemCount: items.length + 1,
      itemBuilder: (context, index) {
        if (index == 0) {
          return Column(
            children: <Widget>[
              Text('Some Text'),
              FlatButton(child: Text('A flat button'), onPressed: () {}),
              Image.asset("An image"),
            ],
          );
        }
        return Text('Item ${items[index].title}');
      },
    ),
  );
}

Answer 2

你可以这样使用

 ListView(
     shrinkWrap: true,
     children: <Widget>[
          Text('hi'),//first widget
          Text('hi2'),//second widget
          Flex(
              direction: Axis.horizontal,children: <Widget>[
                      Expanded(
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: 3,
                            itemBuilder: (BuildContext context, int index){
                              return ...

或者 只需调整计数和索引即可。

 ListView.builder(
      itemCount: get.length + 2, // add room for the two extra
      itemBuilder: (BuildContext context, int index) {
        if(index == 0){
         return Text('Custom any widget');
        }
        if(index == 1){
         return Text('Custom any widget');
        }
        index -= 2; // decrement index so that it's now in the range [0..length]
        return Bubble(
            style: styleSomebody,
            child: Container(
              ... 
            ));
      }),

Answer 3

您可以在

body

中使用以下代码。

body: SingleChildScrollView( //add to Scroll whole screen
    child: Column(
        children: <Widget>[
            new Text('Some Text'), //Element-1
            new FlatButton(...),   //Element-2
            new Image.asset(...),  //Element-3
            items.map((item)=>new Padding(child: new Text(item.title),)).toList(), //Element-4
            ListView.separated(    //Element-5
                shrinkWrap: true,  //this property is must when you put List/Grid View inside SingleChildScrollView
                physics: NeverScrollableScrollPhysics(), //this property is must when you put List/Grid View inside SingleChildScrollView
                itemCount: listItems.length,
                itemBuilder: (context, i) {
                    return ListTile(
                        title: Text(listItems[i].Title),
                        subtitle: Text(listItems[i].Description),
                    );
                },
                separatorBuilder: (context, i) {
                    return Divider();
                },
            ),
        ],
    ),
),

Answer 4

您可以通过 slivers 来做到这一点，对于固定部分使用 SliverToBoxAdapter，对于滚动列表使用 SliverList。页面中的固定部分和列表部分都可以轻松滚动！！！

return CustomScrollView(
  slivers: [
    SliverToBoxAdapter(child: FixedHeader()),
    SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
            YourListitems()
         })
    )]
)

Answer 5

使用 for 循环

...    
home: Scaffold(
  appBar: AppBar(
    title: Text('App bar'),
  ),
  body: new ListView(
    children: <Widget>[
      new Text('Some Text'),
      new FlatButton(...),
      new Image.asset(...),
      for (var i in items)
      Padding(
        child: new Text(i.title),
      ))
    ],
  ),
),
...

Answer 6

ListView 中的子项是 itens 列表，因此，如果您想显示按钮或文本，您的小部件树是：

Scaffold
 appBar: AppBar
 body:  Container
   child: ListView       
            ListItem
            ListItem
            ListItem

然后，在您的情况下，您可以使用列来显示“固定小部件”（文本、按钮）+可滚动列表视图：

Scaffold
 appBar: AppBar
 body:  Column 
     [
        Text,
        Buttom,
        ListView
          ListItem
          ListItem
          ListItem
     ]