fix(list-view): Layout list-view items on request (#6159)

* test: list items relayout example

* fix(list-view): Layout list-view items on request

* refactor(tests): refactor list-view tests imports

apps/app/ui-tests-app/list-view/item-re-layout.css

@@ -0,0 +1,20 @@
+Label {
+    margin: 6;
+    padding: 4;
+}
+
+.unselected {
+    border-width: 4;
+    border-color: gray;
+    border-radius: 10;
+    background: white;
+    color: gray
+}
+
+.selected {
+    border-width: 4;
+    border-color: blue;
+    border-radius: 10;
+    background: lightcoral;
+    color: blue;
+}

apps/app/ui-tests-app/list-view/item-re-layout.ts

@@ -0,0 +1,21 @@
+import { fromObject } from "tns-core-modules/data/observable";
+
+export function loaded(args) {
+    var items = [];
+
+    for (let i = 0; i < 100; i++) {
+        items.push(fromObject({
+            text:  "<" + i + ">",
+            selected: !!!(i % 5)
+        }));
+    }
+    args.object.bindingContext = { items: items };
+}
+
+export function toggle(args) {
+    console.log("toggle : ")
+    let context = args.object.bindingContext;
+    console.dir(context);
+    context.set("selected", !context.selected);
+    // args.object.requestLayout();
+}

apps/app/ui-tests-app/list-view/item-re-layout.xml

@@ -0,0 +1,15 @@
+<Page loaded="loaded">
+  <StackLayout>
+    <ListView items="{{ items }}">
+      <ListView.itemTemplate>
+        <StackLayout orientation="horizontal" tap="toggle">
+            <Label text="{{ text }}" />
+            <Label text="marked" visibility="{{ selected ? 'visible' : 'collapse' }}" />
+            <Label text="{{ selected ? 'yep' : 'nope' }}"  />
+            <Label text="test" class="{{ selected ? 'selected' : 'unselected' }}" />
+            <Label text="{{ selected ? 'yep' : 'nope' }}" class="{{ selected ? 'selected' : 'unselected' }}" />
+        </StackLayout>
+      </ListView.itemTemplate>
+    </ListView>
+  </StackLayout>
+</Page>

apps/app/ui-tests-app/list-view/main-page.ts

@@ -19,6 +19,7 @@ export function loadExamples() {
     examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
     examples.set("row-height", "list-view/row-height");
     examples.set("width-percent", "list-view/width-percent");
+    examples.set("item-re-layout", "list-view/item-re-layout");
 
     return examples;
 }