NativeScript - Image

Posted on   |   In

image 图片标签

import { Component, ViewChild, ElementRef } from "angular2/core"
import { Color } from "color"
import { SearchBar } from "ui/search-bar"
import { TextField } from "ui/text-field"
import { Switch } from "ui/switch"
import { Slider } from "ui/slider"
import { Progress } from "ui/progress"
import { PropertyChangeData } from "data/observable"

@Component({
  selector: "my-app",
  template: `
    <GridLayout columns="*, auto,auto" class="add-bar">
        <TextField id="grocery"  hint="Enter a grocery item" col="0"></TextField>
        <Image src="~/icon.png" width="80" height="180" id="add-image" col="1" stretch ="aspectFill" ></Image>
        <Image src="~/icon.png" width="80" height="180" id="add-image" col="0" stretch ="aspectFit" ></Image>
        <Image src="~/icon.png" width="80" height="180" id="add-image" col="2" stretch ="fill" ></Image>
    </GridLayout>
`,
  styleUrls: ["app.css"]
})
export class AppComponent {
  constructor() {}

  ngAfterViewInit() {}
}

res://logo.png 是从 appResouce 下去拿图片
~/icon.png 是从 app 根目录下拿

stretch

  • none 就是原图大小
  • aspectFill 按原图比例缩放适应目标尺寸
  • aspectFit 保持原图比例,但会充满目标尺寸,可能会切
  • fill 充满但不保持原图比例