0

Пишу на Flutter. Вопрос такой: как в моем коде заменить ListView на GridView без потери функционала? Код ниже:

import 'dart:html';

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List courses = [];

  @override
  void initState() {
    super.initState();

    courses.addAll(["Buy milk", "Wash dishes", "Куть картошку"]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepOrangeAccent[900],
        title: Text("UniverCity"),
        centerTitle: true,
      ),
      body: Column(
              children: [
                ListView.builder(
                  itemCount: courses.length,
                  itemBuilder: (BuildContext context, int index) {
                  return Dismissible(
                    key: Key(courses[index]),
                    child: Card(
                      child: ListTile(title: Text(courses[index]),),
                    )
                  );
                }
              ),

            ]
          ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

        },
        child: Icon(Icons.add),
      ),
    );
  }
}

При добавлении элемента в список courses, он автоматически отображается новой карточкой. Как добиться такого же результата, но используя GridViev

Заранее спасибо.

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 7 мар 2022 в 13:18

1 ответ 1

0

Я использую плагин flutter_staggered_grid_view, с его помощью можно без проблем заменить ListView, прилагаю свой используемый пример кода:

pubspec.yaml:

  flutter_staggered_grid_view: ^0.4.0-nullsafety.3 # Display Grid

notes_page.dart:

  Widget buildNotes(List<NoteModel> notes) => StaggeredGridView.countBuilder(
        key: ValueKey<int>(columnNumber),
        padding: const EdgeInsets.only(top: 24, left: 12, right: 12, bottom: 8),
        itemCount: notesNumber,
        staggeredTileBuilder: (index) => const StaggeredTile.fit(2),
        crossAxisCount: columnNumber, //2 (1 col) or 4 (2 col)
        mainAxisSpacing: 18,
        crossAxisSpacing: 18,
        itemBuilder: (context, index) {
          final note = notes[index];

          return GestureDetector(
            onTap: () async {
              await Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => NoteDetailPage(note: note),
              ));

              refreshNotes();
            },
            child: NoteCardWidget(note: note),
          );
        },
      );

Также можно сделать динамическое изменение количества колонок, достаточно менять параметр crossAxisCount и перестраивать виджет с помощью setState или как-либо иначе.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.