如何在使用 map() 时使用 listTile 在 Flutter 中制作分隔符？

Question

我正在使用 .map() 创建一个 listView，并且我想在两行之间放置一个分隔符。我想使用 Divider() 方法或 listTiles.divideTiles()，但我不知道如何很好地实现它。我不知道这是否不可能，或者我是否真的不了解该方法（这可能是因为我对 Flutter 还很陌生），但我认为我的应用程序在使用分隔符时会更好看。这是我要在其中创建它们的构建方法：

  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text("Grocery Lists")),
  drawer: AppDrawer(),
  body: ListView(
    children: groceryListNames.map(
          (data) => ListTile(
            trailing: const Icon(Icons.arrow_forward_ios),
            title: Text(
              data,
              style: GoogleFonts.biryani(fontSize: 24),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => GroceryListPage(
                          listTitle: "$data Grocery List",
                        )),
              );
            },
          ),
        )
        .toList(),
  ),
);

}

Answer 1

在使用动态生成的列表视图时，您应该使用ListView.separated()（类似于ListView.builder()），由于实时渲染，它可以提供更好的性能：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Grocery Lists")),
    drawer: AppDrawer(),
    body: ListView.separated(
      itemCount: groceryListNames.length,
      separatorBuilder: (_, __) => const Divider(),
      builder: (context, index) {
          final data = groceryListNames[index];
          return ListTile(
              trailing: const Icon(Icons.arrow_forward_ios),
              title: Text(
                data,
                style: GoogleFonts.biryani(fontSize: 24),
              ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => GroceryListPage(
                            listTitle: "$data Grocery List",
                          )),
                );
              },
            ),
          ),},
    ),
  );
}