Flutter将分隔线添加到ListTile

时间:2020-07-22 22:54:04

标签: flutter dart

在我的last question之后,我能够在ListTile窗口小部件中显示数据库中的所有数据,但是如何添加一些行来分隔它。

return ListView.builder(
        itemCount: int.parse(_resultLength),
        itemBuilder: (context, index) {
          return Column(
            children: _Users
                .map(
                  (user) => ListTile(
                    leading: Container(
                      height: 47,
                      width: 47,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        image: DecorationImage(
                          image: NetworkImage(user.imageLink),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    title: Text(user.firstName + " " + user.lastName),
                    /*onTap: () {
                //_selectedUser = user;
                setState(() {});
              },*/
                  ),
                )
                .toList(),
          );
        },
      );

我尝试在Divider(),之后使用ListTile,并将ListView.builder更改为ListView.separated。但是,children: _Users.map((user) =>).toList()阻止了分隔符起作用。有没有办法在不改变当前代码的情况下添加它?

1 个答案:

答案 0 :(得分:1)

您正在做的事情有点奇怪...您不应该使用ListView来建造一个大型单品。

我假设_resultLength_Users列表的长度。与其构建包含整个_Users列表的单个项目,不如尝试类似的事情

return ListView.separated(
  separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
  itemCount: int.parse(_resultLength),
  itemBuilder: (context, index) {
    var user = _Users[index];
    return ListTile(
      leading: Container(
        height: 47,
        width: 47,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6),
          image: DecorationImage(
            image: NetworkImage(user.imageLink),
            fit: BoxFit.fill,
          ),
        ),
      ),
      title: Text(user.firstName + " " + user.lastName),
      /*onTap: () {
            //_selectedUser = user;
            setState(() {});
          },*/
    );
  },

您将可以通过这种方法使用ListView.separated