橙光代码模式

Appearance

泳道（ListView） ​

列表，多个相同组件排列。通常与橱窗（ShopWin）一起使用。

1、橱窗组件 ​

typescript
// 先定义橱窗类
class TestShopWin extends LM.ShopWin {
    private _itemText: LM.TextView;
    
    init() {
        // 创建文本
        this._itemText = new LM.TextView();
        this.addChild(this._itemText);
        this._itemText.text = this.params.value.toString(); // 显示传入的数字
        this._itemText.fontSize = 30;
        this._itemText.fontColor = "#ffffff";
        this._itemText.x = 0;
        this._itemText.y = 0;
        this._itemText.width = 200;
        this._itemText.height = 100;
        this._itemText.alignHorizontal = 1;
        this._itemText.alignVertical = 1;
        
        // 点击泳道项时调用场景的add方法，传递索引
        this._itemText.onClick(() => {
            this.sceneManager.add(this.params.index); // 传递索引
        });
    }    
    reDraw() {
        this._itemText.text = this.params.value.toString(); // 显示传入的数字
    }
} 


//泳道
@LM.Class("TestScene")

export default class TestScene extends LM.Scene {
    private _listViewData: {value: number, index: number}[] = [
        {value: 1, index: 0},
        {value: 2, index: 1}, 
        {value: 3, index: 2},
        {value: 4, index: 3}
    ]; // 泳道数据
    private _listView: LM.ListView; // 泳道引用
    
    // 场景初始化方法
    init() {       
        // 创建泳道
        this._listView = new LM.ListView(TestShopWin, this._listViewData);
        this.addChild(this._listView);
        this._listView.orientation = "vertical"; 
        this._listView.x = 100;
        this._listView.y = 100;
        this._listView.width = 600;
        this._listView.height = 600;
        this._listView.gridNum = 2;
    }
    
    // 增加指定索引的计数器的方法
    add(index: number) {
        // 修改对应索引的数据
        this._listViewData[index].value = this._listViewData[index].value + 1;
        // 重新赋值listViewData，会自动调用每个橱窗的reDraw
        this._listView.listViewData = this._listViewData;

    }

}

2、常用属性 ​

属性解释值默认值
xx数值0
yy数值0
z图层高度，越高越靠上层数值0
width宽，图片超出范围会显示不完整数值，不填为自适应200
height高，图片超出范围会显示不完整数值，不填为自适应200
backgroundColor背景色字符串，填色号如红色“#FF0000”
visible是否可见布尔值，true可见，false不可见true
alpha不透明度数值，0~255，255表示完全不透明255
touchEnabled是否可点击布尔值，true可点击，false不可点击true
alphaHitUnable透明区域是否可点击布尔值，true可点击，false不可点击true
isPenetrable是否可以穿透（点击到下层组件）布尔值，true可穿透，false不可穿透true
scaleX宽缩放率数值，1为原始的宽1
scaleY高缩放率数值，1为原始的高1
zoomCenterX缩放中心x（相对于自身）数值，0.5为自身X轴中点0
zoomCenterY缩放中心y（相对于自身）数值，0.5为自身Y轴中点0
sceneManager获取父级对象(创建橱窗的scene 或者 shopwin)对象
itemIndex获取当前橱窗在泳道列表中的索引数值
listViewData修改泳道列表数据。
重新设置此数据后，会自动对比数据：
新增的橱窗会自动创建；
删除的橱窗会自动销毁；
如果有修改数据的橱窗会自动调用橱窗的reDraw方法。		数组
orientation泳道滑动方向，竖或横向字符串："vertical"|“horizontal”"vertical"
checkModel复选模式开启布尔值，true复选，false单选false
checkLimit多选个数限制数值1
itemCount子项的个数，只会显示前itemCount个子项数值，0为全部0
gridNum垂直滑动表示每行个数；横向滑动表示每列个数数值1
rowSpace行间距数值20
columnSpace列间距数值20

其他属性见文档

3、常用方法 ​

（1）onClick ​

点击行为

（2）onTouchDown ​

按下行为

（3）onTouchUp ​

抬起行为

（4）onTouchMove ​

鼠标在组件区域内移动（可用作悬浮）

（5）onTouchCancel ​

鼠标移出组件区域（可用作离开悬浮）

typescript
let list = new LM.ListView(ShopWinTest,data)
// 注册了点击事件
list.onClick(()=>{console.log("点击了控件")})
// 注册了按下事件
list.onTouchDown(()=>{console.log("按下")})
// 注册了抬起事件
list.onTouchUp(()=>{console.log("抬起")})
// 注册了移动事件
list.onTouchMove(()=>{console.log("移动了")})
// 注册了移出事件
list.onTouchCancel(()=>{console.log("移出")})

（6）setSelectIndex ​

滑动到指定索引的橱窗位置

typescript
list.setSelectIndex(2)

4、滚动条样式设置 ​

可以通过设置滚动条的样式来改变滚动条的外观。 可以使用scrollView属性来设置滚动条的样式。具体可以设置的属性可以参考ScrollView滚动条样式设置

typescript

let list = new LM.ListView(ShopWinTest,data)
// 设置滚动条可见
list.scrollView.scrollBarVisible = true
// 设置滚动条宽度
list.scrollView.scrollBarWidth = 10
// 设置滚动条颜色
list.scrollView.scrollBarColor = "#FF0000"
// 设置滚动条圆角
list.scrollView.scrollBarCornerRadius = 5
// 更多属性可以参考滚动条样式设置 ScrollView