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",
                          )),
                );
              },
            ),
          ),},
    ),
  );
}

如何在使用map（）时使用listTile在Flutter中创建分隔线？

1 个答案: