将图像添加到 Dart lang 中的自定义元素

Question

我正在制作一个 fab 图标自定义元素，就像材料设计中的那个，并且想添加图像（图标图像），但不能。

我尝试了 3 种方法：

1. 将 .src 添加到 shado.host
2. 将 .src 添加到 ImageElement
3. 将 .src 添加到 ButtonElement

我也尝试过使用两种类型的图片

1. PNG
2. SVG

我的代码如下：

part of fonix_client_library;

@init()
 upgradeFonixFab() =>  
    document.registerElement(FonixFab.tag, FonixFab);


 class FonixFab extends HtmlElement {
 static final tag = 'fonix-fab';
 ShadowRoot shadow;

 ButtonElement innerButton;
 ImageElement innerImage;

 factory FonixFab() => (new Element.tag(tag) as FonixFab);

 FonixFab.created() : super.created() {

 shadow = this.createShadowRoot();

 shadow.host
 //   ..style.src='ic_create_24px.svg'  <- did not work
 //   ..style.src='ic_create_24px.png'  <- did not work
  ..style.display='inline-block'
  ..style.position = 'fixed' 
  ..style.right='15px'
  ..style.bottom='15px'
  ..style.outline='none'
  ..style.userSelect = 'none'
  ..style.cursor='pointer'
  ..style.zIndex='1'
  ..style.boxSizing = 'border-box'
  ..style.width='26px'
  ..style.height='26px'
  ..style.background = '#d23f31'
  ..style.color='#fff'
  ..style.borderRadius='50%'
  ..style.paddingTop='2px'
  ..style.paddingLeft='1px'
  ;

innerImage = new ImageElement ()
   ..style.src='ic_create_24px.svg'; //  <- did not work

innerButton = new ButtonElement()
 //   ..style.src='ic_create_24px.svg'  <- did not work
 //   ..style.src='ic_create_24px.png'  <- did not work
   ..text="+"                        // <- This is fine for using +, but I need to use image instead
   ..style.cursor='pointer'
   ..style.color= 'white'
   ..style.border="0px"
   ..style.background='#d23f31' 
   ..style.borderRadius='5px';   


  shadow.nodes.add(innerButton);  OR shadow.nodes.add(innerImages);

}

 @override
 void attached() {
  super.attached();

  shadow.host.onMouseDown.listen((e){ 
  shadow.host..style.color="#333"
     ..style.background=themeColor; //'#FF8F66';
  });
  shadow.host.onMouseUp.listen((e){ 
     shadow.host..style.color=themeColor
     ..style.background='#ffd9cc'
     ..style.outline='none';  // remove the focus outline/glur
  });
  shadow.host.onMouseEnter.listen((e)=> shadow.host..style.boxShadow='0px 0px 5px #888888');
  shadow.host.onMouseLeave.listen((e)=> shadow.host..style.boxShadow='0px 0px 0px');
 }

 Remove(){
 this.remove();
 } 
}

有吗？

Answer 1

你需要添加一个图片标签并在那里设置src属性<img src="xxx.png">