Egret社区

求教关于list多选问题

2021-4-27 16:12
4865

回帖奖励 30 银子回复本帖可获得 10 银子奖励! 每人限 1 次

一个需求,list多选,可程序定义自动多选那种类型。就像 游戏中分解道具的时候 选择 分解品质后自动全选某品质所有物品。
目前问题:
点击事件可响应,同时更新 selectedIndeces内容。
但是程序定义选择不完全响应,视觉改变,selectedIndeces不改变。


例如 外部定义一个品质是SR
然后手动刷新list,
itemrender里判断 this.selected=(type==sr) 时 ,视图可显示是否选择了道具,但是 selectedIndeces没变化,也米有任何事件抛出
求教,如何 在外部某条件改变时,可以刷新list的 selectedIndeces并有事件改变
分享到 :
0 人收藏

5 个回复

倒序浏览
趙蝸牛  圆转纯熟 | 2021-4-29 13:59:07
我寫了個demo 你看是不是你要的效果
https://github.com/ks960037/Egret-ListMultiChoose
趙蝸牛  圆转纯熟 | 2021-4-29 14:12:23
我直接寫了個demo
你看看是不是你要的
  1. class Main extends eui.UILayer {
  2.     protected createChildren(): void {
  3.         super.createChildren();
  4.         egret.lifecycle.onPause = () => egret.ticker.pause();
  5.         egret.lifecycle.onResume = () => egret.ticker.resume();
  6.         egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
  7.         egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
  8.         this.runGame();
  9.     }
  10.     private async loadResource() {
  11.         let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
  12.         await RES.loadConfig('resource/default.res.json', 'resource/');
  13.         await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
  14.         await RES.loadGroup('preload', 0, loadingView);
  15.         this.stage.removeChild(loadingView);
  16.     }
  17.     private async runGame() {
  18.         await this.loadResource();

  19.         let mainView = new MainView();
  20.         this.addChild(mainView);
  21.     }
  22. }

  23. class MainView extends eui.Component {

  24.     private scr_demo: eui.Scroller;
  25.     private lst_demo: eui.List;
  26.     private arc_demo: eui.ArrayCollection;

  27.     private btn_showRare: eui.Button;
  28.     private btn_showUnrare: eui.Button;
  29.     private btn_showAll: eui.Button;
  30.     private btn_selecteAll: eui.Button;
  31.     private btn_selecteBad: eui.Button;
  32.     private btn_cancelSelected: eui.Button;

  33.     constructor() {
  34.         super();
  35.         this.skinName = `<?xml version="1.0" encoding="utf-8"?>
  36.                         <e:Skin class="MainViewSkin" xmlns:e="http://ns.egret.com/eui">
  37.                             <e:Rect width="100%" height="100%" verticalCenter="0" horizontalCenter="0" fillColor="0x777777" />
  38.                             <e:Image source="bg_jpg" verticalCenter="0" horizontalCenter="0" />
  39.                             <e:Rect width="1020" height="800" verticalCenter="0" horizontalCenter="0" fillAlpha="0.6"/>
  40.                             <e:Scroller id="scr_demo" width="960" height="540" verticalCenter="0" horizontalCenter="0">
  41.                                 <e:List id="lst_demo" itemRendererSkinName="ItemRenderer_demoSkin" allowMultipleSelection="true">
  42.                                     <e:layout>
  43.                                         <e:TileLayout horizontalGap="10" verticalGap="10" requestedColumnCount="4"
  44.                                                     horizontalAlign="center" verticalAlign="top" rowAlign="top"
  45.                                                     columnAlign="left" orientation="rows"  paddingLeft="65" paddingRight="65"/>
  46.                                     </e:layout>
  47.                                     <e:ArrayCollection id="arc_demo">
  48.                                         <e:Array>
  49.                                         </e:Array>
  50.                                     </e:ArrayCollection>
  51.                                 </e:List>
  52.                             </e:Scroller>
  53.                             <e:Button id="btn_showRare" label="只顯示稀有" horizontalCenter="-400" verticalCenter="-340"/>
  54.                             <e:Button id="btn_showUnrare" label="只顯示低階" horizontalCenter="0" verticalCenter="-340"/>
  55.                             <e:Button id="btn_showAll" label="顯示全部" verticalCenter="-340" horizontalCenter="400"/>
  56.                             <e:Button id="btn_selecteAll" label="全選" horizontalCenter="-400" verticalCenter="340"/>
  57.                             <e:Button id="btn_selecteBad" label="全選低階" horizontalCenter="0" verticalCenter="340" x="10" y="10"/>
  58.                             <e:Button id="btn_cancelSelected" label="取消選擇" verticalCenter="340" horizontalCenter="400" x="10" y="10"/>
  59.                         </e:Skin>`;
  60.         this.percentWidth = 100;
  61.         this.percentHeight = 100;
  62.     }

  63.     private demoData: ItemData[] = [
  64.         { itemId: 0, itemName: "軒轅劍", quality: 95, rare: "S", color: "0xFF50FF", type: "weapon", },
  65.         { itemId: 1, itemName: "鐵劍", quality: 5, rare: "E", color: "0x0050CC", type: "weapon", },
  66.         { itemId: 2, itemName: "木劍", quality: 3, rare: "E", color: "0x0050CC", type: "weapon", },
  67.         { itemId: 3, itemName: "無極戰甲", quality: 85, rare: "S", color: "0xFF50FF", type: "arms", },
  68.         { itemId: 4, itemName: "鐵甲", quality: 5, rare: "E", color: "0x0050CC", type: "arms", },
  69.         { itemId: 5, itemName: "布甲", quality: 3, rare: "E", color: "0x0050CC", type: "arms", },
  70.         { itemId: 6, itemName: "金創藥", quality: 5, rare: "A", color: "0xAAAA44", type: "drug", },
  71.         { itemId: 6, itemName: "金創藥", quality: 5, rare: "A", color: "0xAAAA44", type: "drug", },
  72.         { itemId: 7, itemName: "草藥", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  73.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  74.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  75.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  76.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  77.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  78.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  79.         { itemId: 8, itemName: "回家卷軸", quality: 1, rare: "E", color: "0x888888", type: "drug", },
  80.     ]

  81.     protected childrenCreated() {
  82.         super.childrenCreated();
  83.         this.lst_demo.itemRenderer = ItemRenderer_demo;
  84.         this.arc_demo.source = this.demoData;
  85.         this.addEventListeners();
  86.     }

  87.     private addEventListeners() {
  88.         this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickHandler, this);
  89.     }

  90.     private removeEventListeners() {
  91.         this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickHandler, this);
  92.     }

  93.     private onClickHandler(evt: egret.TouchEvent) {
  94.         switch (evt.target) {
  95.             case this.btn_showRare:
  96.                 this.filterArc("S");
  97.                 break;
  98.             case this.btn_showUnrare:
  99.                 this.filterArc("E");
  100.                 break;
  101.             case this.btn_showAll:
  102.                 this.cancelFilter();
  103.                 break;
  104.             case this.btn_selecteAll:
  105.                 this.selecteAll();
  106.                 break;
  107.             case this.btn_selecteBad:
  108.                 this.selecteBad();
  109.                 break;
  110.             case this.btn_cancelSelected:
  111.                 this.cancelSelected();
  112.                 break;
  113.         }
  114.     }

  115.     private filterArc(rare: string) {
  116.         this.cancelSelected();
  117.         let result = this.demoData.filter((item) => { return item.rare == rare })
  118.         this.arc_demo.source = result;
  119.     }

  120.     private cancelFilter() {
  121.         this.cancelSelected();
  122.         this.arc_demo.source = this.demoData;
  123.     }

  124.     private selecteAll() {
  125.         this.cancelSelected();
  126.         for (let i = 0; i < this.arc_demo.source.length; i++) {
  127.             this.lst_demo.selectedIndices.push(i);
  128.         }
  129.     }

  130.     private selecteBad() {
  131.         this.cancelSelected();
  132.         let shouldSelectedIndices = [];
  133.         for (let i = 0; i < this.arc_demo.source.length; i++) {
  134.             let itemData: ItemData = this.arc_demo.source[i];
  135.             if (itemData.rare == "E")
  136.                 shouldSelectedIndices.push(i);
  137.         }
  138.         this.lst_demo.selectedIndices = shouldSelectedIndices;
  139.     }

  140.     private cancelSelected() {
  141.         this.lst_demo.selectedIndices = [];
  142.     }

  143. }

  144. interface ItemData {
  145.     itemId: number,
  146.     itemName: string,
  147.     quality: number,
  148.     rare: string,
  149.     color: string,
  150.     type: string
  151. }

  152. class ItemRenderer_demo extends eui.ItemRenderer implements eui.IItemRenderer {

  153.     private rec_bg: eui.Rect;

  154.     constructor() {
  155.         super();
  156.         this.skinName = `<?xml version="1.0" encoding="utf-8"?>
  157.             <e:Skin class="ItemRenderer_demoSkin" states="up,down,disabled" minHeight="50" minWidth="100"
  158.                     xmlns:e="http://ns.egret.com/eui" width="200" height="150">
  159.                 <e:Rect id="rec_selected" width="110%" height="110%" verticalCenter="0" horizontalCenter="0" fillColor="0xFFFF00"
  160.                         visible="{selected}" />
  161.                 <e:Rect id="rec_bg" width="95%" height="95%" verticalCenter="0" horizontalCenter="0" fillColor="{data.color}"  ellipseWidth="15" ellipseHeight="15"/>
  162.                 <e:Group verticalCenter="0" horizontalCenter="0">
  163.                     <e:Group>
  164.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="名稱" verticalAlign="middle"
  165.                                 textAlign="center" />
  166.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text=":" verticalAlign="middle"
  167.                                 textAlign="center" />
  168.                         <e:Label id="lbl_name" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="{data.itemName}"
  169.                                 verticalAlign="middle" textAlign="center" />
  170.                         <e:layout>
  171.                             <e:HorizontalLayout/>
  172.                         </e:layout>
  173.                     </e:Group>
  174.                     <e:Group>
  175.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="稀有度" verticalAlign="middle"
  176.                                 textAlign="center" />
  177.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text=":" verticalAlign="middle"
  178.                                 textAlign="center" />
  179.                         <e:Label id="lbl_rare" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="{data.rare}"
  180.                                 verticalAlign="middle" textAlign="center" />
  181.                         <e:layout>
  182.                             <e:HorizontalLayout/>
  183.                         </e:layout>
  184.                     </e:Group>
  185.                     <e:Group>
  186.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="類別" verticalAlign="middle"
  187.                                 textAlign="center" />
  188.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text=":" verticalAlign="middle"
  189.                                 textAlign="center" />
  190.                         <e:Label id="lbl_type" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="{data.type}"
  191.                                 verticalAlign="middle" textAlign="center" />
  192.                         <e:layout>
  193.                             <e:HorizontalLayout/>
  194.                         </e:layout>
  195.                     </e:Group>
  196.                     <e:Group>
  197.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="品質" verticalAlign="middle"
  198.                                 textAlign="center" />
  199.                         <e:Label id="" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text=":" verticalAlign="middle"
  200.                                 textAlign="center" />
  201.                         <e:Label id="lbl_quality" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="{data.quality}"
  202.                                 verticalAlign="middle" textAlign="center" />
  203.                         <e:layout>
  204.                             <e:HorizontalLayout/>
  205.                         </e:layout>
  206.                     </e:Group>
  207.                     <e:layout>
  208.                         <e:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
  209.                     </e:layout>
  210.                 </e:Group>
  211.             </e:Skin>`;
  212.     }

  213. }
复制代码

点评

那選我為最佳解答唄  发表于 2021-5-4 11:08
明白了,这需要自己把选择的东西列出来,赋值给selectedIndices才行  发表于 2021-5-2 19:38
趙蝸牛  圆转纯熟 | 2021-5-3 13:14:20
趙蝸牛 发表于 2021-4-29 14:12
我直接寫了個demo
你看看是不是你要的

那選我為最佳解答吧~~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部