TypeScript GridLayout.addRow方法代碼示例

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;
}

export function createPage() {
    var page = new pages.Page();
    var gridLayout = new gridLayoutModule.GridLayout();

    var lengths = [
        new gridLayoutModule.ItemSpec(140, "pixel"),
        new gridLayoutModule.ItemSpec(1, "star"),
        new gridLayoutModule.ItemSpec(140, "pixel")
    ];

    var rows = 2;
    var cols = 3;
    var row;
    var col;

    for (row = 0; row < rows; row++) {
        var rowDef = new gridLayoutModule.ItemSpec(1, "auto");
        gridLayout.addRow(rowDef);
    }

    for (col = 0; col < cols; col++) {
        gridLayout.addColumn(lengths[col]);
    }

    var btn = new btns.Button();
    btn.text = "Col: 0";
    gridLayoutModule.GridLayout.setColumn(btn, 0);
    gridLayoutModule.GridLayout.setRow(btn, 0);
    gridLayout.addChild(btn);

    var btn2 = new btns.Button();
    btn2.text = "Col: 2";
    gridLayoutModule.GridLayout.setColumn(btn2, 2);
    gridLayoutModule.GridLayout.setRow(btn2, 0);
    gridLayout.addChild(btn2);

    var txt = new tb.TextField();
    txt.text = "Col: 1";
    txt.width = 140;
    gridLayoutModule.GridLayout.setColumn(txt, 1);
    gridLayoutModule.GridLayout.setRow(txt, 0);
    gridLayout.addChild(txt);

    var txt2 = new tb.TextField();
    txt2.text = "Col: All";
    gridLayoutModule.GridLayout.setColumnSpan(txt2, 3);
    gridLayoutModule.GridLayout.setRow(txt2, 1);
    gridLayout.addChild(txt2);

    page.content = gridLayout;
    return page;
}

export function createPage() {
    var grid = new gridModule.GridLayout();

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

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

    var image = new img.Image();
    image.stretch = "fill";
    image.verticalAlignment = "bottom";
    image.horizontalAlignment = "center";

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

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

export function createPage() {
    var page = new pages.Page();
    var grid = new gridModule.GridLayout();
    grid.addRow(new gridModule.ItemSpec());
    grid.addRow(new gridModule.ItemSpec());
    page.content = grid;

    var count = 0;
    var control = new btns.Button();
    control.text = "test control";
    control.on(btns.Button.tapEvent, (data) => { control.text = "count: " + count++; });
    grid.addChild(control);

    var scrollView = new scroll.ScrollView();
    gridModule.GridLayout.setRow(scrollView, 1);
    grid.addChild(scrollView);
    var stack = new stacks.StackLayout();
    scrollView.content = stack;

    function createNumericPropertyUI(desc: NumericProeprtyDescriptor) {
        var lbl = new labels.Label();
        lbl.text = desc.name;
        lbl.horizontalAlignment = "left";
        stack.addChild(lbl);

        var slider = new sliders.Slider();
        slider.minValue = desc.min;
        slider.maxValue = desc.max;
        slider.value = desc.value;
        stack.addChild(slider);

        var options: bindable.BindingOptions = {
            sourceProperty: "value",
            targetProperty: desc.name,
        };
        control.bind(options, slider);
    };

    function createBooleanPropertyUI(desc: BoolPropertyDescriptor) {
        var lbl = new labels.Label();
        lbl.text = desc.name;
        lbl.horizontalAlignment = "left";
        stack.addChild(lbl);

        var sw = new switches.Switch();
        sw.checked = desc.value;
        sw.horizontalAlignment = "left";
        stack.addChild(sw);

        var options: bindable.BindingOptions = {
            sourceProperty: "checked",
            targetProperty: desc.name,
        };
        control.bind(options, sw);
    };

    function createStringPropertyUI(desc: StringPropertyDescriptor) {
        var lbl = new labels.Label();
        lbl.text = desc.name;
        lbl.horizontalAlignment = "left";
        stack.addChild(lbl);

        var txt = new textView.TextView();
        txt.text = desc.value;
        stack.addChild(txt);

        var options: bindable.BindingOptions = {
            sourceProperty: "text",
            targetProperty: desc.name,
        };
        control.bind(options, txt);
    };

    createNumericPropertyUI({ name: "style.minWidth", value: 30, min: 10, max: 300 });
    createNumericPropertyUI({ name: "style.width", value: 100, min: 10, max: 300 });

    createNumericPropertyUI({ name: "style.minHeight", value: 30, min: 10, max: 300 });
    createNumericPropertyUI({ name: "style.height", value: 100, min: 10, max: 300 });

    createBooleanPropertyUI({ name: "isEnabled", value: true });
    createNumericPropertyUI({ name: "style.opacity", value: 1, min: 0, max: 1 });
    createStringPropertyUI({ name: "style.visibility", value: "visible" });

    createStringPropertyUI({ name: "style.horizontalAlignment", value: "stretch" });
    createStringPropertyUI({ name: "style.verticalAlignment", value: "stretch" });
    createStringPropertyUI({ name: "margin", value: "20" });

    createStringPropertyUI({ name: "className", value: "testClass" });

    page.css = ".testClass { background-color: LightGreen }";
    return page;
}

export function createPage() {
    var StackLayout = new sp.StackLayout();
    var grid = new gridModule.GridLayout();
    grid.horizontalAlignment = "left";

    StackLayout.addChild(grid);

    var btn1 = new button.Button();
    btn1.text = "btn1";
    var btn2 = new button.Button();
    btn2.text = "btn2";
    var btn3 = new button.Button();
    btn3.text = "btn3";
    var btn4 = new button.Button();
    btn4.text = "btn4";

    grid.addChild(btn2);
    grid.addChild(btn3);
    grid.addChild(btn4);

    var sp1 = new sp.StackLayout();
    sp1.orientation = "horizontal";
    sp1.height = 200;

    var b1 = new button.Button();
    b1.text = "nested Btn1";
    sp1.addChild(b1);

    var b2 = new button.Button();
    b2.text = "nested Btn2";
    sp1.addChild(b2);

    grid.addChild(sp1);

    gridModule.GridLayout.setColumn(btn4, 1);
    gridModule.GridLayout.setColumn(btn3, 1);
    gridModule.GridLayout.setRow(btn2, 1);
    gridModule.GridLayout.setRow(btn4, 1);

    grid.addRow(new gridModule.ItemSpec());
    grid.addRow(new gridModule.ItemSpec());
    grid.addColumn(new gridModule.ItemSpec());
    grid.addColumn(new gridModule.ItemSpec());

    var page = new Page();
    //page.content = GridLayout;
    page.content = StackLayout;
    var x = 1;
    btn1.on(button.Button.tapEvent, function () {
        x++;
        var gravity;
        //btn1.android.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT));
        if (x === 1) {
            gravity = android.view.Gravity.CENTER;
        }
        else if (x === 2) {
            gravity = android.view.Gravity.RIGHT | android.view.Gravity.BOTTOM;
        }
        else {
            gravity = android.view.Gravity.LEFT | android.view.Gravity.TOP;
            x = 0;
        }

        for (var i = 0; i < grid.getChildrenCount(); i++) {
            grid.getChildAt(i).android.setGravity(gravity);
        }
    });
    return page;
}