代码之家 › 专栏 › 技术社区 › Jaswant Singh

动态地从Flutter中的GridView中移除项

flutter-layout flutter dart gridview

Jaswant Singh · 技术社区 · 7 年前

我在flutter中使用grid view.count()创建了一个网格视图。

例如,在开始时,我的网格视图中有8个项目(最大值为8)。我想根据用户稍后选择的条件从网格中删除特定单元格。我很难做到这一点,就好像我用一个空容器替换了网格单元(动态的条件检查)它仍然发生在网格中,而我希望该单元被完全删除(甚至不发生在网格视图中)。有办法做到这一点吗?

编辑

这是密码。条件检查在第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();
                      }),
                    ),
                  )

1 回复 | 直到 7 年前

Dinesh Balasubramanian 7 年前

假设你有一个 list (包含8项) 你通过它 GridView .

new GridView.count(children: maptoWidgets(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((){})

The Billionaire Guy 6 年前

像这样简单的事情应该做。

    //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)