在 ListView.separated 中分隔在 flutter 中不起作用

Question

我嘗試做什么。 我嘗試將 ListView.separated 中的數據與我從數據庫中獲取的數據分開，但這不起作用我不知道為什么。 我有一個表，該表在數據庫中有很多列，例如名稱和年齡以及位置..等。

現在我想在 ListView.separated 中向用戶顯示該表中的一行，所以我想在這些數據之間進行分隔，就像在（姓名分隔、年齡分隔、位置分隔..etc）之間那樣分隔。

我知道如果我從數據庫中帶來多組行數據，每一行之間都會有一個拆分，但是現在我試圖顯示一行，然后帶來該行列的所有數據，然后拆分每列數據之間。

我需要讓它自動而不是通過在每一行之后添加一個一個 divider() 來實現。

桌子：

+---------+--------------+---------------------+
| user_id | Name         | Age       | Lcation |
+---------+--------------+-----------+---------+
|    1    | Irene        | 22        |   A     |
+---------+--------------+---------------------+

代碼：

 Container(
      child:

      FutureBuilder(
    future: ApiService().TopOne(ID),
    builder: (context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {
        return ListView.separated(
          separatorBuilder: (BuildContext context, int index) {
            return Divider(
              thickness: 1,
            );
          },
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          physics: ScrollPhysics(),
          itemCount: snapshot.data.length,
          itemBuilder: (context, index) {
            return Container(
                child: Column(
              children: [
                Text("${snapshot.data[index]['Name']}"),
                Text("${snapshot.data[index]['Age']}"),
                Text("${snapshot.data[index]['Location']}"),
                Text("${snapshot.data[index]['Others']}"),
              ],
            ));
          },
        );
      } else if (snapshot.hasError) {
        return Center(
            child: Image.asset(
          'assets/nodata.png',
          fit: BoxFit.contain,
          width: 180,
          height: 180,
        ));
      }

 
      return Center(
          child: SizedBox(
        height: MediaQuery.of(context).size.height / 1.3,
        child: Image.asset(
          'assets/no_dataa.png',
          fit: BoxFit.contain,
          width: 180,
          height: 180,
        ),
      ));
    },
  ));
}

圖像作為我嘗試做的事情：

任何人都知道我的代碼中的錯誤是什么，我該如何解決這個問題？ 謝謝你。

Answer 1

您可以在Column小部件中包含Divider 。

return Container(
  child: Column(
    children: [
      Text("${snapshot.data[index]['Name']}"),
      Divider(),
       Text("${snapshot.data[index]['Age']}"),
      Divider(),
      Text("${snapshot.data[index]['Location']}"),
      Divider(),
       Text("${snapshot.data[index]['Others']}"),
      Divider(),
    ],
  ),
);

如果您不想在 Column 有分隔線末端，您可以只使用.builder