Динамическое удаление элементов из GridView во Flutter

Я создал представление сетки, используя GridView.count() во флаттере.

Теперь, например, при запуске у меня есть 8 элементов в моем представлении сетки (максимум = 8). Я хочу удалить определенные ячейки из сетки на основе некоторого условия, которое пользователь выберет позже. У меня возникают проблемы с достижением этого, как если бы я заменил ячейку сетки пустым контейнером (динамически при проверке условия), он все еще происходит в сетке, в то время как я хочу, чтобы эта ячейка была полностью удалена (даже не происходит в GridView ). Есть ли способ добиться этого?

ИЗМЕНИТЬ

Вот код. Проверка условия находится в операторе возврата в строке №. 10.

Expanded(
                    child: GridView.count(
                      physics: BouncingScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      crossAxisCount: 2,
                      childAspectRatio: 0.7,
                      children: new List<Widget>.generate(
                          category != null ? category.category.length : 0,
                          (index) {
                        return _lowerLimit < category.category.elementAt(index).price && _upperLimit > caregory.categoty.elementAt(index).price ? 
                        GridTile(
                          child: Column(
                            children: <Widget>[
                              Container(
                                margin: EdgeInsets.all(3.0),
                                padding:
                                    EdgeInsets.symmetric(vertical: 30.0),
                                color: Colors.white,
                                child: Hero(
                                  tag: category.category
                                      .elementAt(index)
                                      .productId,
                                  child: Material(
                                    child: InkWell(
                                      onTap: () {
                                        Navigator.of(context).push(
                                            CupertinoPageRoute(
                                                builder: (context) =>
                                                    ItemDetails(
                                                      category.category
                                                          .elementAt(index)
                                                          .productId,
                                                      category.category
                                                          .elementAt(index)
                                                          .name,
                                                      category.category
                                                          .elementAt(index)
                                                          .description,
                                                      category.category
                                                          .elementAt(index)
                                                          .image,
                                                    )));
                                      },
                                      child: Stack(
                                        children: <Widget>[
                                          Center(
                                            child: Image(
                                              image: _loadImage(index),
                                              height: 162.0,
                                              width: 200.0,
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.only(left: 15.0),
                                    child: Column(
                                      //mainAxisAlignment: MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Container(
                                          width: 120.0,
                                          child: Hero(
                                            tag: category.category
                                                .elementAt(index)
                                                .name,
                                            child: Text(
                                              category.category
                                                  .elementAt(index)
                                                  .name,
                                              style: TextStyle(
                                                  fontSize: 12.5,
                                                  fontWeight:
                                                      FontWeight.bold),
                                              overflow:
                                                  TextOverflow.ellipsis,
                                            ),
                                          ),
                                          margin:
                                              EdgeInsets.only(right: 5.0),
                                        ),
                                        Container(
                                          height: 2.0,
                                        ),
                                        Text(
                                          AppConstants.CURRENCY_SYMBOL +
                                              " " +
                                              double
                                                  .tryParse(category
                                                      .category
                                                      .elementAt(index)
                                                      .price)
                                                  .toStringAsFixed(2),
                                          style: TextStyle(
                                              fontSize: 14.0,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue),
                                          overflow: TextOverflow.clip,
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(right: 10.0),
                                    alignment: Alignment.topRight,
                                    child: Icon(
                                      Icons.favorite,
                                      color: Colors.blue,
                                    ),
                                  )
                                ],
                              ),
                              Divider(
                                color: Colors.blue,
                                indent: 10.0,
                              ),
                            ],
                          ),
                        ) : Container();
                      }),
                    ),
                  )

person Jaswant Singh    schedule 07.08.2018    source источник
comment
Пожалуйста, поместите свой пример здесь.   -  person Yamin    schedule 07.08.2018
comment
Я добавил код.   -  person Jaswant Singh    schedule 07.08.2018


Ответы (2)


Допустим, у вас есть list (который содержит эти 8 элементов), с помощью которого вы визуализировали GridView.

new GridView.count(children: maptoWidgets(list))

В действиях пользователя обновите list в setState, что приведет к повторному отображению GridView с обновленными элементами.

setState(() {
  // update the list
})

Обновлено на основе кода: у вас такое состояние, как

_lowerLimit < category.category.elementAt(index).price && 
_upperLimit > caregory.categoty.elementAt(index).price ? GridTile() : Container()

Из-за чего при невыполнении условия мы ставим пустой контейнер. Таким образом, мы получим пустое место вместо того, чтобы пропустить этот элемент.

Как этого избежать:

Использование фильтров, как показано ниже

filteredCategory = category.category
                     .where((oneCategory) {_lowerLimit < oneCategory.price 
                                     && _upperLimit > oneCategory.price;}).toList()

Внутри вашего GridView.count замените все category.category на filteredCategory. И действие пользователя (или когда вы хотите обновить) просто вызовите setState((){})

person Dinesh Balasubramanian    schedule 07.08.2018
comment
Спасибо за внимание! В моем случае я не хочу удалять какой-либо элемент из списка (поскольку мне нужен весь список для других целей), и я хочу, чтобы в сетке отображались только определенные элементы при проверке некоторых условий. Я сделал проверку условия внутри Grid.count(). Теперь, если условие соответствует, оно показывает мне правильную ячейку, но когда условие не соответствует, оно по-прежнему занимает пустое место в сетке. Мне это кажется каким-то странным. скажем, я хочу показать 5 элементов (в соответствии с проверкой условия), но сетка все еще занимает пространство, равное размеру списка, - person Jaswant Singh; 07.08.2018
comment
Не могли бы вы опубликовать код Grid.count(). Я хотел бы увидеть, как вы фильтруете по условию. - person Dinesh Balasubramanian; 07.08.2018
comment
Похоже, нам в конечном итоге нужно создать второй список, которого я пытался избежать в первую очередь. Но я думаю, что это единственный способ добиться этого. - person Jaswant Singh; 08.08.2018

что-то простое, как это должно делать.

    //filtering the content based on user online status
    contact = contact.where((contact) => contact.onlineStatus == i).toList();
    //where i is 1 or 0, or both (using data manipulation techniques)
person The Billionaire Guy    schedule 15.07.2019