開始使用Flex開發不久，就遇到了一個不簡單的設計，就是設計師設計了一個把ScrollBar從預設的右邊移到左邊去的TileList，本以為這應該很常見，搜尋了一下竟找不到現成的改法，索性只好自己新手駕駛了。

TileList是繼承自ListBase的，而ListBase裡面可以找到verticalScrollBar和horizontalScrollBar這兩個唯一跟scrollbar有關的class property，改變這兩個物件的位置的時候，發現就可以移動scrollbar的位置了，就這麼簡單阿(?)。下面是修改後的code，簡單說明：新建的自訂元件LeftScrollBarTileList繼承自TileList，在複寫updateDisplayList方法的地方，判斷verticalScrollBar是否有被產生出來，有的話，就把它拉到最左邊，也就是verticalScrollBar.x = 0。

LeftScrollBarTileList.as

/* Copyright (c) 2009 blog.mediakid.org. All Rights Reserved. */
package {
    import mx.controls.TileList;
    public class LeftScrollBarTileList extends TileList {
        public function LeftScrollBarTileList() {
            super();
        }
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                // 確認vertical是否存在
                if (verticalScrollBar && verticalScrollBar.visible){
                    verticalScrollBar.x = 0; // 移動scrollbar
                }
        }
    }
}

使用元件的主程式main.mxml

<?xml version="1.0"?>
<!--
//  Copyright (c) 2009 blog.mediakid.org. All Rights Reserved.
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" 
backgroundColor="#F0F0F0" 
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
width="450"
height="350"
>

<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
private var xml:XMLList = 
<>
<content>1</content> 
<content>2</content>
<content>3</content> 
<content>4</content>
<content>5</content> 
<content>6</content>
<content>7</content> 
<content>8</content>
<content>9</content> 
<content>10</content>
<content>11</content> 
<content>12</content>
<content>13</content>
</>;
[Bindable] private var ac : XMLListCollection = new XMLListCollection(xml);
]]>
</mx:Script>
<mx:Panel 
title="Reposition the scrollbar" 
height="300" 
width="400" >
<local:LeftScrollBarTileList
id="scroll"
dataProvider="{ac}"
xmlns:local="*" 
columnCount="2"
rowHeight="80"
borderStyle="none"
width="100%"
height="100%"
alternatingItemColors="[#FFFFFF,#CCCCCC,#999999]"
/>
</mx:Panel>
</mx:Application>

問題來了，雖然scrollbar是移到左邊了，可是TileList的右側仍然保留了預設的scrollBar的空間，事實上移動到左邊的scrollbar也壓到了一部分的TileList。

繼續trace發現，顯示"被拖曳內容"的是容器listContent，listContent上面還加了一個maskShape遮罩，所以scrollbar被移到左邊以後，這兩個物件的位置也要一併往右移動一些。只有這樣還不夠，listContent在更新位置的時候都會加上位移量leftOffset，所以leftOffset也要加上位移量，否則的話，每次一更新位置，listContent就會又跑回原來的位置。新增修改如下：

/* Copyright (c) 2009 blog.mediakid.org. All Rights Reserved. */
package {
    import mx.controls.TileList;
    public class LeftScrollBarTileList extends TileList {
        public function LeftScrollBarTileList() {
            super();
        }
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                // vertical
                if (verticalScrollBar && verticalScrollBar.visible){
                    verticalScrollBar.x = 0; // 移動scrollbar
                    this.listContent.x =  verticalScrollBar.width; // 移動被拖曳內容
                    this.maskShape.x = this.listContent.x; // 移動被拖曳內容的mask
                    this.listContent.leftOffset = verticalScrollBar.width; // 設定被拖曳內容的位移量，如果是垂直的scrollbar則用topOffset
                }
        }
    }
}

效果Live Demo： 修改後的效果看似是ok的，但沒有完整的trace完全部的code，所以不曉得是否有更好的解法。而這個改法雖是以TileList為例，但我想對於所有繼承自ListBase的元件都是一樣的作法吧。以上方法同理也可以用來把預設位於下方的horizontalScrollBar改成位於上方。