Как сделать так, чтобы каждый элемент в listview колебался в столбце

#flutter

#колебание

Вопрос:

Я работаю в listview в flutter, и поскольку я новый разработчик во flutter, я сталкиваюсь с некоторыми трудностями при разработке listview.Теперь список работает со мной следующим образом:

 1

Теперь все данные отображаются как строка или в одной строке. Я пытаюсь сделать его похожим на столбец, каждый элемент в котором является отдельным столбцом.Таким образом, в центре первого столбца будет изображение, во втором столбце текст, в третьем столбце текст, подобный этому.Сверху вниз.

Это мой код:

 @override
  Widget build(BuildContext context) {
    String getID;
    getID=  widget.itemHolder.toString();
    return FutureBuilder<List<Flowerdata>>(
                future: fetchFlowers(),
              builder: (context, snapshot) {

                if (!snapshot.hasData) return Center(
                    child: CircularProgressIndicator()
                );
                return ListView(
                  children: snapshot.data.map((data) => Column(children: <Widget>[
                    GestureDetector(
                      onTap: ()=>{getItemAndNavigate(data.id ,context)
                      },
                      child: Row(
                          children: [
                            Container(
                                width: 100,
                                height: 100,
                                margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                child: ClipRRect(
                                    borderRadius: BorderRadius.circular(8.0),
                                    child:
                                    Image.network(data.ImageURL,
                                      width: 200, height: 100, fit: BoxFit.cover,))),

                            Flexible(child:
                            Text(data.Name,
                                style: TextStyle(fontSize: 18)
                            )
                            ),
                            Flexible(child:
                            Text(data.SendFrom,
                                style: TextStyle(fontSize: 18)
                            )
                            ),

                             FloatingActionButton(
                              onPressed: () {

                                Navigator.push(context, MaterialPageRoute(builder: (context) => AddComments( UserPostID: UserPostID,psoid:psoid.toString()),));
                              },

                              child: Icon(Icons.add),
                            ),
                          ]

                      ),
                    ),

                    Divider(color: Colors.black),

                  ],))
                      .toList(),

                );
              },
            );

  }
}

  

Если кто-нибудь знает решение проблемы, пожалуйста, помогите мне.

Комментарии:

1. Просто удалите строку внутри GestureDetector. Затем удалите GestureDetector. Оберните его поверх столбца. Теперь ваш макет выглядит следующим образом: GestureDetector-> Column-> children

2. Привет, братан. Если я это сделаю, я получу черный экран

Ответ №1:

Попробуйте это

  return ListView(
          children: [
            for (var data in snapshot.data)
              GestureDetector(
                child: Column(
                  children: [
                    Row(),
                    Text(data),
                    Text(data),
                    Text(data),
                  ],
                ),
              )
          ],
        );
  

или

  return ListView(
          children: [
            snapshot.data.map((data) => GestureDetector(
                  child: Column(
                    children: [
                      Row(),
                      Text(data),
                      Text(data),
                      Text(data),
                    ],
                  ),
                ))
          ],
        );
  

Комментарии:

1. Хороший ответ. Лучше использовать карту. Хотя почему там есть ненужная строка?

Ответ №2:

просто добавьте каркас на верхний уровень страницы

 Scaffold(
      body: ListView
    )
  

Комментарии:

1. это не то, о чем он просит.

2. Привет, братан. Мне нужен весь список в виде столбца