如何编写 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 菜鸟，所以我可能遗漏了一些明显的东西。这是屏幕截图：

我也遇到构建错误：

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 Editor 并在其中打开程序。它也不喜欢它：

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ünter Zöchbauer 在评论中的回答和我自己的回答。

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

 CssRect borderEdge = tooltipElem.borderEdge;

我的情况特有的第二个问题是我的导入语句声明为：

import 'dart:html' as dom;

'as dom' 要求我在所有 html api 引用前加上 dom 前缀。所以就我而言，我需要编码：

 dom.CssRect borderEdge = tooltipElem.borderEdge;

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

Answer 1

我试过了，效果很好（我正在使用 Dart bleeding edge/nightly build）

如何编写 CssRect borderEdge

How to code CssRect borderEdge

dart

dart-html

tooltip.dart

回答