Как показать RadListView на iOS
У меня такой код:
<GridLayout row = "7" col = "0" colSpan = "3" rows = "*" cols = "*">
<RadListView [items] = "sourcesOptions" height = "100%">
<ng-template tkListItemTemplate let-item = "item">
<StackLayout orientation = "horizontal">
<Switch [checked] = "true" class = "switch"></Switch>
<Label [text] = "item.label" textWrap = "true" marginTop = "15"></Label>
</StackLayout>
</ng-template>
<ListViewGridLayout tkListViewLayout itemHeight = "200" scrollDirection = "Vertical" spanCount = "2"></ListViewGridLayout>
</RadListView>
</GridLayout>
Он работает на Android, но на iOS ничего не показывает.
Примечание
Я не знаю, может ли это быть связано с проблемой, но я получаю предметы из службы отдыха.
Любая помощь приветствуется !!
Проверьте, есть ли у вас 8 строк в родительском GridLayout (row = "7" col = "0")
@NickIliev Я проверил пример игровой площадки, и он работает. Не знаю, происходит ли это из-за того, что я получаю вещи из службы отдыха. И да, у меня в родительской сетке 8 строк, на Android работает корректно
it happens because I get the items from a rest service - вот и все .. на iOS, когда элементы поступают асинхронно, вам нужно установить высоту шаблона элемента (используя itemHeight - см. Здесь docs.telerik.com/devtools/nativescript-ui/Controls/NativeScr ipt /…)
Или напрямую назначьте высоту для родительского макета вашего шаблона элемента (в вашем случае StackLayout)
@NickIliev Вы дали мне идею, как это исправить, проблема была в высоте родительского макета RadListView (GridLayout). Я опубликовал ответ с кодом, исправляющим мою проблему. Спасибо большое за вашу помощь!
Ответы 3
Попробуйте установить значение высоты для компонента RLV, например height = "100%", чтобы он заполнил родительский элемент. iOS не выполняет автоматические макеты, как это делает Android, поэтому вы сталкиваетесь с этим :)
Вы не предоставили определение rows или columns для вашего GridLayout. RadListView, скорее всего, появится, если вы это сделаете:
<GridLayout row = "7" col = "0" colSpan = "3" rows = "*" columns = "*">
Расширяя это, на основе разметки Qs вы даже можете использовать StackLayout здесь и отбросить Grid.
Ян и @Brad Я отредактировал вопросы с учетом предложенных вами изменений, но он по-прежнему ничего не показывает. Я попробовал предложение StackLayout Брэда с тем же результатом
Не совсем то, что я сказал, хотя - ставьте высоту на RLV, а не на родительский. Таким образом, iOS скажет: «О, сделайте этот список 100% родительским, которым является эта сетка» ?
Проблема заключалась в высоте, когда элементы являются асинхронными, в этом случае мне нужно было вручную установить высоту для родительского макета компонента RadListView (в моем случае GridLayout).
Это не сработало, если я установил высоту в процентах (100%), это должно было быть фиксированное число, это было очень неудобно, потому что количество элементов не всегда одинаково, поэтому я создал функцию для установки высоты в соответствии с с количеством полученных предметов.
Это код, который исправил проблему:
<GridLayout row = "7" col = "0" colSpan = "3" rows = "*" cols = "*" [height] = "setHeight()">
<RadListView [items] = "sourcesOptions">
<ng-template tkListItemTemplate let-item = "item">
<StackLayout orientation = "horizontal">
<Switch [checked] = "true" class = "switch"></Switch>
<Label [text] = "item.label" textWrap = "true" marginTop = "15"></Label>
</StackLayout>
</ng-template>
<ListViewGridLayout tkListViewLayout itemHeight = "70" scrollDirection = "Vertical" spanCount = "2"></ListViewGridLayout>
</RadListView>
</GridLayout>
Как вы ее решили?
Площадка для вышеприведенного кода работает как ожидалось play.nativescript.org/?template=play-ng&id=Es3fBf