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

有两种方法可以实现这一目标：

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

或者

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