如何将列表视图与其他小部件一起使用？

Posted 2023-02-23

【中文标题】如何将列表视图与其他小部件一起使用？

【英文标题】：How to use listview with other widgets?

【发布时间】：2021-12-03 15:30:19

【问题描述】：

我想将 ListView 与其他小部件一起使用，但我不能。当我为 Listview 使用容器时，我无法查看任何其他小部件。我该怎么做？

 Scaffold(   
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[

              ListView.builder(),

              RaisedButton(
                child: Text('Text'),
                onPressed:())
])));

【问题讨论】：

以展开的形式添加列表视图，以便它占用列内剩余的空间。我相信没有理由拥有 singlechildscrollview。 Expanded(child: ListView.builder())

这能回答你的问题吗？ How to add a ListView to a Column in Flutter?

你能用正确的英文写吗？无意冒犯，你说的我听不懂。 @JiteshMohite

【参考方案1】：

试试这个代码...

 Scaffold(
   body: SingleChildScrollView(
     child: Column(
       children: [
         ListView.builder(
           physics: NeverScrollableScrollPhysics(),
           itemCount: 4,
           shrinkWrap: true,
           itemBuilder: (context, index) 
             return Text('Hello');
           
         ),
         RaisedButton(
           child: Text('Text'),
           onPressed: () 
         )
       ]
     )
   )
 );

【参考方案2】：

如果您尝试基于列表显示一些小部件，则根本不应该嵌套滚动视图，dart 允许您在任何集合中使用 for，您也可以使用 List.generate 或 list.map 与扩展运算符

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        for(final item in list) widget,
        RaisedButton(child: Text('Text'), onPressed: () )
      ],
    ),
  ),
);

或

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        ...list.map((item)=> widget).toList(),
        RaisedButton(child: Text('Text'), onPressed: () )
      ],
    ),
  ),
);

或

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        ...List.generate(list.length, (index)=> widget).toList(),
        RaisedButton(child: Text('Text'), onPressed: () )
      ],
    ),
  ),
);

【讨论】：

第一个解决了。非常感谢！

【参考方案3】：

这是因为你在 Column 中使用 ListView，ListView 和 Column 都占据了它们可用的全屏，因为这样我们只能在屏幕上看到 ListView，要解决这个问题，我们必须将 ListView 缩小到它的确切大小，因为它使用了shrinkwrap: true。

ListView.Builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),

)

physics: NeverScrollableScrollPhysics()，这里用来停止ListView滚动，你添加了滚动整个页面的SingleChildScrollView()

【参考方案4】：

你必须用 Expanded 包装你的 ListView 小部件，或者如果你想用 Container 包装它，那么你必须给 Container 高度或宽度

【参考方案5】：

你需要在这里使用Expanded并将数据设置为ListView.builder

final items = List<String>.generate(10000, (i) => 'Item $i');

Column(children: [
    Expanded(
      child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) 
                return ListTile(
                  title: Text(items[index]),
                );
              ,
            ),
    AnyWidget(...)
])

【参考方案6】：

将 ShrinkWrap 添加到 ListView

 Scaffold(   
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[

           ListView(
        shrinkWrap: true,
        children:[
          Container(),
          Container(),
          ]
        ),

          RaisedButton(
            child: Text('Text'),
            onPressed:())
])));

对于更高级的滚动挑战，例如列中的多个 ListView，我建议您添加一个 ScrollPhysics