如何编写CssRect borderEdge

Question

我发现我需要确定Dart here

中div的尺寸

简而言之，它说：

Experimental
CssRect get borderEdge

Access the dimensions and position of this element's content + padding + border box.

如何编码？

我正在尝试将此变量用于此变量：

import 'dart:html' as dom;
dom.DivElement textSpan = new dom.DivElement()

我找到了这个例子：

CssRect get borderEdge => textSpan.borderEdge;

我的IDE（PHPStorm）引发了它。我是Dart noob所以我可能会遗漏一些明显的东西。这是一个屏幕截图：

我也遇到了构建错误：

Compiling citation|web/main.dart...
[Error from Dart2JS on citation|web/main.dart]:
packages/citation/tooltip/tooltip.dart:68:5:
Expected ';' after this.
CssRect get borderEdge => textSpan.borderEdge;
^^^^^^^
[Info from Dart2JS]:
Took 0:00:04.330468 to compile citation|web/main.dart.
Build failed.

我安装了Dart编辑器并在其中打开程序。它也不喜欢它：

tooltip.dart

这是从Angular Dart第4章教程

中的工具提示组件开始的

library tooltip;

import 'dart:html' as dom;
import 'package:angular/angular.dart';

@Decorator(selector: '[tooltip]')

class Tooltip
{
final dom.Element element;

@NgOneWay('tooltip')
TooltipModel displayModel;

dom.Element tooltipElem;
dom.Element entry;          // Bibliographic entry: div in the index.html

Tooltip(this.element)
{
element..onMouseEnter.listen((_) => _createTemplate())
       ..onMouseLeave.listen((_) => _destroyTemplate());
}

void _createTemplate()
{
assert(displayModel != null);

tooltipElem = new dom.DivElement();

// All entries have the id 'bex' where x is an integer

entry = dom.querySelector('#be${displayModel.entryRef.toString()}');
String htmlText = entry.innerHtml;


if (displayModel.entryRef != null)
{
  dom.DivElement textSpan = new dom.DivElement()
      ..appendHtml('<hr>')
      ..appendHtml(htmlText)
      ..style.color = "black"
      ..style.fontSize = "smaller"
      ..style.paddingBottom = "5px";

  tooltipElem.append(textSpan);
}
int entryWidth = 200;
tooltipElem.style
    ..padding = "5px"
    ..paddingBottom = "0px"
    ..backgroundColor = "#FFF5E0"
    ..borderRadius = "5px"
    ..width = "${entryWidth}px";

// position the tooltip.

int windowHeight = dom.window.innerHeight;
int windowWidth = dom.window.innerWidth;
var elTopRight = element.offset.topRight;
var elBottomLeft = element.offset.bottomLeft;
int height = 100;
int top = elTopRight.y;
int bottom = elBottomLeft.y;
int left = elBottomLeft.x;
int right = elTopRight.x;
CssRect get borderEdge => textSpan.borderEdge;
print('borderEdge:$borderEdge');
// See if it will fit above
int y = top - height - 10;
if (y < 0) y = bottom + 10;   // If it doesn't fit, put it below
// Start with the left
int x = left;
tooltipElem.style
    ..position = "absolute"
    ..top = "${y}px"
    ..left = "${x}px";

 // Add the tooltip to the document body. We add it here because we need to position it
 // absolutely, without reference to its parent element.
dom.document.body.append(tooltipElem);
}

void _destroyTemplate()
{
  tooltipElem.remove();
}
}

class TooltipModel
{
  final int entryRef;

  TooltipModel(this.entryRef);
}

答案

这总结了GünterZöchbauer在评论中的回答和我自己的回答。

第一个问题是我在给定代码位置的情况下使用了错误的语法。此位置的正确代码是：

 CssRect borderEdge = tooltipElem.borderEdge;

我的情况所特有的第二个问题是我的import语句被声明为：

import 'dart:html' as dom;

'as dom'要求我用dom作为所有html api引用的前缀。所以在我的情况下，我需要编码：

 dom.CssRect borderEdge = tooltipElem.borderEdge;

我从Angular dart教程获得了这段代码。我的下一步是删除该前缀，这样它就不会再搞砸我了。另请注意，答案代码使用tooltipElem而不是textSpan。这种变化与修复问题无关。

Answer 1

我试过，它运作得很好（我使用Dart出血/每晚构建）