gridview - 动态从 Flutter 中的 GridView 中删除项目

Question

我在颤振中使用 GridView.count() 创建了一个网格视图。

现在例如在开始时，我的网格视图中有 8 个项目（最大值 = 8）。我想根据用户稍后选择的某些条件从网格中删除特定的单元格。我无法实现这一点，就好像我用空容器替换网格单元格（动态检查条件）它仍然发生在网格中，而我希望完全删除该单元格（甚至不发生在 GridView ）。有没有办法做到这一点？

编辑

这是代码。条件检查在第 1 行的 return 语句中。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();
                      }),
                    ),
                  )

标签： gridviewdartflutterflutter-layout

Answer 1

假设您有一个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((){})