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

Question

我正在使用 a.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",
                          )),
                );
              },
            ),
          ),},
    ),
  );
}