Flutter：如何在 ListView 中均匀间隔 ListTiles

Question

我正在尝试使用下面的代码在我的列表视图中均匀地间隔我的列表图块，但它不起作用。 更大的目标是在旋转时获得滚动和均匀分布。 谢谢您的帮助。

      Widget _buildBodyListView() {
        return new Container(
          padding: EdgeInsets.all(12.0),
          child: Container(color: Colors.green,
            child: ListView(shrinkWrap: false,
              children: <Widget>[
                ListTile(
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text('LATEST NEWS', textAlign: TextAlign.center,),
                ),
                ListTile(
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text('MARKET NEWS ', textAlign: TextAlign.center,),
                ),
                ListTile(
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text('MARKET REPORT', textAlign: TextAlign.center,),
                ),
             ListTile(
              trailing: Icon(Icons.keyboard_arrow_right),
              title: Text('LATEST NEWS', textAlign: TextAlign.center,),
            ),
            ListTile(
              trailing: Icon(Icons.keyboard_arrow_right),
              title: Text('MARKET NEWS ', textAlign: TextAlign.center,),
            ),
            ListTile(
              trailing: Icon(Icons.keyboard_arrow_right),
              title: Text('MARKET REPORT', textAlign: TextAlign.center,),
            ),

              ],
            ),
          ),
        );
      }

Answer 1

我建议您使用ListView.separated小部件。 它有一个名为 separatorBuilder 的属性。 您可以在此处返回特定高度的 SizedBox 小部件。 这是你应该怎么做。

    ListView.separated(
                        physics: BouncingScrollPhysics(),
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
itemCount: 6,
                        itemBuilder: (BuildContext context, int index) {
                         return Container(
          padding: EdgeInsets.all(12.0),
          child: Container(color: Colors.green,
            child: ListView(shrinkWrap: false,
              children: <Widget>[
                ListTile(
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text('LATEST NEWS', textAlign: TextAlign.center,),
                ),
                ListTile(
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text('MARKET NEWS ', textAlign: TextAlign.center,),
                ),
                ListTile(
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text('MARKET REPORT', textAlign: TextAlign.center,),
                ),
             ListTile(
              trailing: Icon(Icons.keyboard_arrow_right),
              title: Text('LATEST NEWS', textAlign: TextAlign.center,),
            ),
            ListTile(
              trailing: Icon(Icons.keyboard_arrow_right),
              title: Text('MARKET NEWS ', textAlign: TextAlign.center,),
            ),
            ListTile(
              trailing: Icon(Icons.keyboard_arrow_right),
              title: Text('MARKET REPORT', textAlign: TextAlign.center,),
            ),

              ],
            ),
          ),
        );
                        },
                        separatorBuilder: (BuildContext context, int index) {
                          return SizedBox(
                            height: 10,
                          );
                        },
                      );

Answer 2

用卡片包裹您的列表磁贴。

Card(child : ListTile(title : Text('Your text',textAlign: TextAlign.center), dense : true), // ListTile ) // Card

Answer 3

你可以使用这个：

ListView.separated

它在每个项目之间均匀地创建分隔

Answer 4

我是这样实现的：

_hotels 是我的列表，我有一个水平滚动视图，为了保持左右项目空间相等，我使用了下面的代码。

ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: _hotels.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: index == _hotels.length - 1
                          ? const EdgeInsets.fromLTRB(8, 0, 8, 0)
                          : const EdgeInsets.only(left: 8),
                      child: Container(
                ........
                ........
            ))
            });

Answer 5

在可滚动的列表视图中，我们（至少我自己）总是希望我们的内容从顶部开始，这与列的均匀间隔功能允许小部件均匀占据整个屏幕不同。 以下小部件可以提供均匀分布的列表视图。 您可以在 Scaffold 列中调用此SampleWidget 。

class SampleWidget extends StatelessWidget {
  final List tasksList = [
    Card( // cards provide nice margin
      margin: EdgeInsets.symmetric(vertical: 10),
      child: ListTile(
        title: Text('test1'),
      ),
    ),
    Card(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: ListTile(
        title: Text('test2'),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
          itemCount: tasksList.length,
          itemBuilder: (BuildContext context, int index) {
            return tasksList[index];
          }),
    );
  }
}

Answer 6

我有同样的问题，但找不到理想的答案，但后来我发现这只是使用Padding小部件。

附加此填充类文档链接以供您参考

你只是用 ListTile 类包装 Padding 类：

Padding(
    padding: EdgeInsets.all(8),
    child: ListTile(
        trailing: Icon(Icons.keyboard_arrow_right),
        title: Text('LATEST NEWS', textAlign: TextAlign.center,),
    )
);

如果要自定义顶部、右侧、底部和左侧的填充，请将EdgeInsets.all()替换为EdgeInsets.fromLTRB(double left, double top, double right, double bottom) 。 还有其他方法，请查看 此文档。

Answer 7

尝试 itemExtent: 对我来说列表视图的参数效果很好

 ListView(
        itemExtent: 70.0,
        shrinkWrap: true,
        children:[
       
         ]
      )

Answer 8

他在问如何“均匀”空间，而不仅仅是在它们之间使用 sizedbox 或 padding 扔一些随机像素。 案例：

      Expanded(
        flex: 1,
        child: Container(
          //width: double.infinity,
          alignment: Alignment.centerLeft,
          //padding: EdgeInsets.only(left: 8),
          padding: EdgeInsets.fromLTRB(1, 1, 1, 1),
          color: Colors.indigo,
          child: Row(
              //scrollDirection: Axis.horizontal, // You can use following for LISTVIEW and comment out next line
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
                  // PLEASE REMEMBER THERE IS AN OVERFLOW HERE IF RESIZED TO SMALL SO PUT THIS IN A LISTVIEW
              ElevatedButton(onPressed: changeText, child: AutoSizeText('Previous', style: TextStyle(color: Colors.white,fontSize: 14, fontWeight: FontWeight.bold))),
              ElevatedButton(onPressed: changeText, child: AutoSizeText('Play', style: TextStyle(color: Colors.white,fontSize: 14, fontWeight: FontWeight.bold))),
              ElevatedButton(onPressed: changeText, child: AutoSizeText('Pause', style: TextStyle(color: Colors.white,fontSize: 14, fontWeight: FontWeight.bold))),
              ElevatedButton(onPressed: changeText, child: AutoSizeText('Stop', style: TextStyle(color: Colors.white,fontSize: 14, fontWeight: FontWeight.bold))),
              ElevatedButton(onPressed: changeText, child: AutoSizeText('Next', style: TextStyle(color: Colors.white,fontSize: 14, fontWeight: FontWeight.bold))),
            ]
          )
        ),
      ),

从 Row 改为 ListView 就可以看到问题了

Answer 9

有两种方法可以实现：

在每个项目之间插入一个SizedBox()小部件

或者

将 ListView 小部件更改为 Column。 设置属性mainAxisAlignment: MainAxisAlignment.spaceEvenly