Zebra入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

RasterLayout


   栅格布局 zebra 默认的布局方式,它模拟 canvas 原生的布局方法,使用_setSize(w,h)、setLocation(x,y)、_setSize(w,h)、setBounds(x,y,w,h)等方法精准的将组件绘制到画布中。

var r = new zebra.ui.zCanvas(200,200).root;
r.setBorder(zebra.ui.borders.plain);
//设置布局方式为栅格布局
r.setLayout(new zebra.layout.RasterLayout());

var b = new zebra.ui.Button("(10,10,140,40)");
b.setBounds(10,10,140,40);
r.add(b);

  我们并不推荐使用这种布局方式,因为精准的定位势必会耗费大量的精力,更重要的是这样一来就无法自适应不同分辨率的屏幕。

  当然,栅格布局也并非一无是处,它比较适合布局需求比较简单的情况下使用。

使用栅格布局,将按钮绘制到画布的右下角。