Question

我有芯片。用户删除芯片后，如何使它消失？我根本不理解Flutter Docs的代码。

我已经尝试了一切。

Chip(
 deleteIcon:  Icon(Icons.close, size: 15,),
 label: Text('Delete me!'),
 deleteButtonTooltipMessage: 'erase',
 onDeleted: () {setState(() {print("I want to erase this chip, and     eat chips");}); },
)

文档建议可以擦除此芯片（Chip）。但是它们并没有提供太多示例。

Answer 1

您需要设置标志或bool来指示是否删除Chip。

工作示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDeleted = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: _isDeleted
              ? Container()
              : Chip(
                  label: Text("EMINEM"),
                  onDeleted: () {
                    setState(() {
                      _isDeleted = true;
                    });
                  },
                ),
        ),
      ),
    );
  }
}

输出

Answer 2

我假设您以某种StatefulWidget的身份拥有这个Chip。

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

  @override
  State createState() => _DisappearingChipState();
}

class _DisappearingChipState extends State<DisappearingChip> {
  bool erased;

  @override
  void initState() {
    erased = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) => erased
      ? Container()
      : Chip(
          deleteIcon: Icon(
            Icons.close,
            size: 15,
          ),
          label: const Text('Delete me!'),
          deleteButtonTooltipMessage: 'erase',
          onDeleted: () {
            setState(() {
              erased = true;
            });
          },
        );
}

变量对状态的响应

如您所见，State object拥有一个名为bool的{{1}}，在初始化状态时，该erased被分配了false。
当打算立即删除Chip时，将更新此变量并重新构建窗口小部件。由于它响应erased的值，因此一旦删除Container就会返回一个空的Chip。

我推荐这个resource to learn more。

Answer 3

bool isDeleted = false; // Place the variable within the same class or declare them as global variables
//[...]
    (isDeleted)?Container():Chip(
     deleteIcon:  Icon(Icons.close, size: 15,),
     label: Text('Delete me!'),
     deleteButtonTooltipMessage: 'erase',
     onDeleted: () {setState(() {isDeleted=true;}); },
    )
//[...]

isDeleted是一个布尔变量，它存储true或false。

如果您看到自己的主要代码（由于不需要而未提供），则存在一个构建方法，我们将其重写以实现/返回单个Widget（UI）。

每当调用setstate或在播放动画（60 fps）时每秒60次调用一次的构建方法。

因此，当我们尝试删除Chip时，将触发onDeleted方法，该方法又触发setstate（）函数，该函数首先进行我们作为参数传递的函数中提到的所需更改，然后请求应用程序调用构建再次运行。

在我们的案例中，当我们的窗口小部件首次构建时，应用会看到三元条件的最终结果为false，因此它会构建第二个窗口小部件，即Chip小部件。现在，当调用setState时，onDeleted的值将更改为true，然后再次调用构建函数。但是这次因为onDeleted的值为true，所以构建了第一个小部件，即没有尺寸的容器...相当于那里没有任何东西（但是我们使用它是因为我们不能将其保留为空，因为它会导致一些错误取决于您使用代码的方式）。

现在您可能想知道为什么在发生所有这些事情时我们没有意识到/注意到任何事情...

这是因为普通人只有在更改发生超过200毫秒时才能注意到任何更改。如果它比它快（少于200毫秒），那么我们将这些更改视为动画/过渡。如果这些更改需要花费更多时间，则我们认为该应用程序处于滞后状态。

这就是为什么将有状态的小部件分开放置会提高应用程序整体性能的原因，因为我们不会重建不需要重建的小部件，因为它们将保持无状态。

我希望您的疑虑现在已经消除。

如何响应用户输入删除窗口小部件？

3 个答案:

变量对状态的响应