TypeScript stack-layout.StackLayout類代碼示例

export function createPage() {
    var StackLayout = require("ui/layouts/stack-layout").StackLayout;
    var Image = require("ui/image").Image;

    var stack = new StackLayout();
    var grid = new gridModule.GridLayout();

    grid.addColumn(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
    grid.addColumn(new gridModule.ItemSpec(1, gridModule.GridUnitType.star));

    grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
    grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.star));

    var sldr = new slider.Slider();
    gridModule.GridLayout.setColumnSpan(sldr, 2);
    sldr.maxValue = 500;
 
    stack.addChild(sldr);
    stack.addChild(grid);

    var image = new Image();
    image.stretch = enums.Stretch.fill;
    image.verticalAlignment = 2;
    image.horizontalAlignment = 1;

    image.source = imageSource.fromFile(__dirname + "test.png");
    grid.addChild(image);

    var page = new pages.Page();
    page.content = stack;
    page.css = "GridLayout { background-color: pink } image { background-color: green }";
    return page;
}

	public static addDropShadow(translateY: number, width: number): StackLayout {
		let wrapper = new StackLayout();
		wrapper.width = width;
		wrapper.height = 3;
		wrapper.translateY = translateY;
		wrapper.addChild(this.shadowView(0.4, width));
		wrapper.addChild(this.shadowView(0.2, width));
		wrapper.addChild(this.shadowView(0.05, width));
		return wrapper;
	}

	public static addDropShadow(marginTop: number, width: number): StackLayout {
		let wrapper = new StackLayout();
		wrapper.width = width;
		wrapper.height = 3;
		wrapper.marginTop = marginTop;
		wrapper.addChild(this.shadowView(0.4, width));
		wrapper.addChild(this.shadowView(0.2, width));
		wrapper.addChild(this.shadowView(0.05, width));
		return wrapper;
	}

    ngOnInit() {
        let stackView: StackLayout = this.stack.nativeElement;

        this.newImage = new Image();
        this.newImage.imageSource = ImageSourceModule.fromResource("icon");
        this.newImage.stretch = "none";
        this.newImage.style.margin = "15";

        this.newLabel = new Label();
        this.newLabel.text = "Image loaded from code behind";
        this.newLabel.style.margin = "15";

        stackView.addChild(this.newLabel);
        stackView.addChild(this.newImage);
    }

export function createPage() {
    var StackLayout = require("ui/layouts/stack-layout").StackLayout;
    var Label = require("ui/label").Label;
    var Image = require("ui/image").Image;

    var stack = new StackLayout();
    var grid = new gridModule.GridLayout();
    stack.addChild(grid);

    grid.addColumn(new gridModule.ItemSpec(80, "pixel"));
    grid.addColumn(new gridModule.ItemSpec(1, "star"));
    grid.addRow(new gridModule.ItemSpec(1, "auto"));
    grid.addRow(new gridModule.ItemSpec(1, "auto"));

    var defaultImageSource = imageSource.fromFile(__dirname + "/test.png");

    var img = new Image();
    img.source = defaultImageSource;

    img.width = 80;
    img.height = 80;
    img.verticalAlignment = enums.VerticalAlignment.bottom;
    gridModule.GridLayout.setRowSpan(img, 2);
    grid.addChild(img);

    var titleLabel = new Label();
    titleLabel.textWrap = true;
    titleLabel.text = "some text goes here";
    gridModule.GridLayout.setColumn(titleLabel, 1);
    grid.addChild(titleLabel);

    var commentsLabel = new Label();
    commentsLabel.text = "comments";
    commentsLabel.verticalAlignment = enums.VerticalAlignment.bottom;
    gridModule.GridLayout.setRow(commentsLabel, 1);
    gridModule.GridLayout.setColumn(commentsLabel, 1);
    grid.addChild(commentsLabel);

    var page = new pages.Page();
    page.content = stack;
    page.css = "GridLayout { background-color: yellow } image { background-color: green } label { background-color: red } stackpnael { background-color: pink }";
    return page;
}

    constructor() {
        this.tabviewitems = [];

        let innerFirstStackLayout = new StackLayout();
        let firstLabel = new Label();
        firstLabel.margin = "15";
        firstLabel.text = "Label first page";
        innerFirstStackLayout.addChild(firstLabel);

        let innerSecondStackLayout = new StackLayout();
        let secondLabel = new Label();
        secondLabel.margin = "15";
        secondLabel.text = "Label second page";
        innerSecondStackLayout.addChild(secondLabel);

        let innerThirdStackLayout = new StackLayout();
        let thirdLabel = new Label();
        thirdLabel.margin = "15";
        thirdLabel.text = "Label third page";
        innerThirdStackLayout.addChild(thirdLabel);

        this.tabviewitems.push({ "title": "Tab1", "view": innerFirstStackLayout });
        this.tabviewitems.push({ "title": "Tab2", "view": innerSecondStackLayout });
        this.tabviewitems.push({ "title": "Tab3", "view": innerThirdStackLayout });

    }

    public loginPageFunc() {
        let wv = new TnsOauthWebView(this._cancelEventHandler);

        TnsOAuthWebViewHelper.initWithWebViewAndIntercept(wv, this._checkCodeIntercept);

        let grid = new GridLayout();
        grid.addChild(wv);

        let stack = new StackLayout();
        stack.addChild(grid);

        let page = new Page();
        page.content = stack;

        if (isAndroid) {
            page.actionBarHidden = true;
        }

        wv.src = this._authUrl;

        return page;
    };

	function createView() {
		const page = new Page();
		const layout = new StackLayout();
		page.content = layout;

		const label = new Label();
		label.text = scan.content;
		label.className = "details-content";
		layout.addChild(label);

		const date = new Label();
		date.text = scan.date.toLocaleString('en');
		layout.addChild(date);

		if (callback) {
			const button = new Button();
			button.text = "Open";
			button.on("tap", callback);
			layout.addChild(button);
		}

		return page;
	}