如何用ID查找视图

Question

尝试用里库洛框架构建一些简单的应用程序，并有一个问题：

• 是否有可能在分层布局中找到View？怎么做呢？(用Dart) Rikulo网站上有一些关于IdSpace的文档，但我不太明白如何使用它。I应该用IdSpace扩展View吗？或者View会自动生成Id？

更新(添加代码示例)

/*
* Function will actualy build View
*/
void _buildUi(Element tagElement)
{
   View mainView = new View();
   mainView.profile.width = '100%';
   mainView.profile.height = '100%';
   mainView.layout.type = 'linear';
   mainView.layout.orient = 'vertical';
   mainView.style.cssText = "background: yellow;";

   View vWorkSpace = new View();
   vWorkSpace.profile.width = 'flex';
   vWorkSpace.profile.height = 'flex';
   vWorkSpace.layout.type = 'linear';
   vWorkSpace.layout.orient = 'horizontal';
   vWorkSpace.style.cssText = "background: red;";

   //
   // Left menu
   View vLeftBar = new View();
   vLeftBar.profile.width = "10%";
   vLeftBar.profile.height = "10%";
   vLeftBar.layout.type = 'linear';
   vLeftBar.layout.orient = 'vertical';
   vLeftBar.layout.spacing = '10';

   View vLogo = new View();
   vLogo.addChild(new Image('images/google_chrome.png'));
   vLeftBar.addChild(vLogo);

   Button vButton = new Button();
   vButton.text = 'Sign in with Google';
   vLeftBar.addChild(vButton);
   vButton.on.click.add((e){      // Somehow I get an error here: Method 'add' not defined for class 'Stream'
      broadcaster.send(new ViewEvent('foo'));
   });

   vWorkSpace.addChild(vLeftBar);

   mainView.addChild(vWorkSpace);
   mainView.addToDocument(ref: tagElement, layout: true);
}

在dart.app中的另一个位置处理vButton单击事件。我如何(在代码中)找到vLogo视图？

Answer 1

在代码中检索视图的最简单方法是给它一个id：

View vLogo = new View();
vLogo.id = "vLogo";

然后，在事件侦听器中，使用查询访问它：

button.query("#vLogo"); // returns vLogo

但是，在您的示例中，您将能够直接访问事件侦听器闭包中的vLogo实例。

Answer 2

当然，与元素一样，View提供了基于CSS选择器的查询和queryAll检索。您可以在检索DOM元素时使用它们检索视图。

通常，您不必担心IDSpace，除非您希望在不同的视图中使用相同的ID。层次结构树本身就是一个ID空间。如果视图实现了IDSpace，它就会形成另一个ID空间。