如何响应用户输入删除窗口小部件? [英] How do I remove a widget in response to user input?

查看:109
本文介绍了如何响应用户输入删除窗口小部件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a chip. How do I get the chip to disappear when the user has deleted it? I do not understand the code at all from 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).但是它们并没有提供太多示例.

The docs suggest that this chip (Chip) can be erased. But they don't give much in the way of examples.

推荐答案

我假设您以某种

I am assuming that you have this Chip in some kind of StatefulWidget.

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 对象拥有一个称为擦除 bool ,在初始化状态时,该布尔值分配为 false .
当打算立即删除 Chip 时,将更新此变量并重新构建窗口小部件.当它响应 ered 的值时,一旦删除 Chip ,就会返回一个空的 Container .

Variable responding to state

As you can see, the State object holds a bool called erased that is assigned false when the state is initialized.
When the Chip is meant to be deleted now, this variable is updated and the widget rebuilds. As it responds to the value of erased, an empty Container is returned once the Chip is deleted.

我推荐此资源以了解更多信息.

这篇关于如何响应用户输入删除窗口小部件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆