如何删除颤动中的特定网格？

Question

我想通过双击下面给出的代码来删除任何网格。我被困在这里，我是新手。请帮我。这是我的代码：

import 'dart:html';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Garden",
      home: new Home(),
      theme: new ThemeData(primaryColor: Colors.deepOrange),
    );
  }
}

class Home extends StatefulWidget {
  _Homesatate createState() => new _Homesatate();
}

class _Homesatate extends State<Home> {
  @override
  Widget build(BuildContext context) {
    var trees = [
      "m",
      "n",
      "o",
      "x",
      "m",
      "n",
      "o",
      "x",
      "m",
      "n",
      "o",
      "x",
      "m",
      "n",
      "o",
      "x",
      "apple",
      "neem",
      "mango",
      "banana",
      "guava",
      "berry",
      "litchi",
      "apple",
      "neem",
      "mango",
      "banana",
      "guava",
      "berry",
      "litchi",
      "n",
      "o",
      "x",
      "m",
      "n"
    ];
    var gridview = new GridView.builder(
      itemCount: trees.length,
      gridDelegate:
          new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 7),
      itemBuilder: (BuildContext context, int index) {
        return new GestureDetector(
          child: new Card(
            elevation: 5.0,
            child: new Container(
              alignment: Alignment.center,
              margin: new EdgeInsets.all(2.0),
              child: new Text(trees[index]),
            ),
          ),
          onTap: () {
            showDialog(
                builder: (context) => new CupertinoAlertDialog(
                      title: new Column(
                        children: <Widget>[
                          new Text("GridView"),
                          new Icon(
                            Icons.favorite,
                            color: Colors.red,
                          )
                        ],
                      ),
                      content: new Text(trees[index]),
                      actions: <Widget>[
                        new FlatButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: new Text("Ok"))
                      ],
                    ),
                barrierDismissible: false,
                context: context);
          },
          onDoubleTap: () {
            Visibility(
              visible: false,
              child: 
            );
          },
        );
      },
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Garden"),
      ),
      body: gridview,
    );
  }
}

void main(List<String> args) {
  runApp(MyApp());
}

在这里，我想通过双击删除任何网格。在这里，单击将显示网格的内容。我主要停留在这些区域：

onDoubleTap: () {
            Visibility(
              visible: false,
              child: 
            );
          }

所以，任何人都请帮助我。特别是，我不明白如何处理双击部分中的 child。

Answer 1

在 Flutter 中，UI 是你状态的结果。因此，要更改 UI，您需要处理状态。现在，所有单元格始终可见。

我建议将 trees 从 String 更改为具有两个属性的对象，例如 'name' 和 'visible'。

class Tree {
  String name;
  bool visible;

  Tree(this.name, this.visible);
}

然后你可以这样定义你的列表：

var trees = [
  Tree('apple', true),
  Tree('mango', true),
  // etc
];

重要的是在 build 方法的外部定义它，这样它将成为您状态的一部分。

然后您可以在 Card 周围包装一个 Visibility 小部件，并传入特定 Tree 对象的 visible 属性。

class _HomeState extends State<Home> {

  var trees = [
    Tree('apple', true),
    Tree('mango', true),
    // etc
  ];

  @override
  Widget build(BuildContext context) {
    var gridview = new GridView.builder(
      itemCount: trees.length,
      gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 7),
      itemBuilder: (BuildContext context, int index) {
        return new GestureDetector(
          child: new Visibility(
            visible: trees[index].visible,
            child: new Card(
              // etc...
  }

}

然后在 onDoubleTap 中，您通过 setState

切换可见性

onDoubleTap: () => setState(() {
  trees[index].visible != trees[index].visible;
}),

如何删除颤动中的特定网格？

how to delete a specific grid in flutter?

grid

dynamic

flutter

flutter-layout

flutter-animation