在Flex4.6中创建一个棋盘

Question

我在Flash Builder 4.6中开始了一个新项目，需要一些建议，然后才能走一个方向，而不是正确的方向。

基本上，我在Flash Builder中的应用程序是用于移动设备和平板电脑的，所以我需要知道如何创建一个恰好适合任何设备宽度的棋盘。我不知道如何在Flex中做到这一点。

有没有人能给出一个想法，或者提供一个我可以使用的例子？

谢谢。

Answer 1

为什么不使用高度和宽度均为100%的TileGroup/TileLayout？然后将行数设置为{this.height / rowHeight }(行数等于棋盘上的行数)，并对columnWidth执行相同的操作。您甚至可以使用horizontalGap和verticalGap属性来显示一个黑色背景，该背景可以用作每个框之间的分隔符(显然，您必须在rowHeight和columnWidth计算中考虑到这一点)。

我会通过AS3来填充屏幕，而不是Flex.像这样的东西就是我的想法。

var columnCount:int = 0;
var rowCount:int = 0;
var boxes:int = 64; //however many boxes on a chess board goes here
for ( var i:Number = 0; i < boxes; i+ ){
    var rect:Rect = new Rect();
    var color:SolidColor;
    rect.percentHeight = 100;
    rect.percentWidth = 100;
    rect.name = i.toString(); //this will make it easier to keep track of which box is which later on
    if ( rowCount % 2 == 1 ) {
        if ( i % 2 == 1 ) color = 0x000000;
        else color = 0xffffff;
    }
    else {
        if ( i % 2 == 1 ) color = 0xffffff;
        else color = 0x000000;
    }
    this.rect.fill = color;
    this.tileGroup.addElement(rect);

    if ( columnCount == 7 ) {
        columnCount = 0;
        rowCount++;
    }
    else {
        columnCount++;
    }
}

这完全出乎我的意料，也没有经过测试，所以我确信有一两个错误，但你知道它是如何工作的。

编辑：顺便说一句，你可以在不使用rowCount/columnCount变量的情况下100%数学地处理颜色，尽管这样做可能要容易得多。