Как показать 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 ничего не показывает.

Примечание

Я не знаю, может ли это быть связано с проблемой, но я получаю предметы из службы отдыха.

Любая помощь приветствуется!


nativescript angular2-nativescript nativescript-telerik-ui
person JuanF    schedule 26.09.2018    source источник
comment
Площадка приведенного выше кода работает должным образом play.nativescript.org/?template=play -ng&id=Es3fBf   -  person Nick Iliev    schedule 27.09.2018
comment
Проверьте, есть ли у вас 8 строк в родительском GridLayout (row="7" col="0")   -  person Nick Iliev    schedule 27.09.2018
comment
@NickIliev Я проверил пример с детской площадкой, и он работает. Я не знаю, происходит ли это, потому что я получаю товары из службы отдыха. И да, у меня в родительской сетке 8 строк, на андроиде работает корректно   -  person JuanF    schedule 27.09.2018
comment
it happens because I get the items from a rest service — вот и все.. на iOS, когда элементы приходят асинхронно, вам нужно установить высоту шаблона элемента (используя itemHeight — см. здесь docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/)   -  person Nick Iliev    schedule 27.09.2018
comment
Или напрямую назначьте высоту для родительского макета вашего шаблона элемента (в вашем случае StackLayout)   -  person Nick Iliev    schedule 27.09.2018
comment
@NickIliev Вы подсказали мне, как это исправить, проблема была в высоте родительского макета RadListView (The GridLayout). Я опубликовал ответ с кодом, который устранил мою проблему. Большое спасибо за твою помощь!   -  person JuanF    schedule 27.09.2018

Ответы (3)


arrow_upward
1
arrow_downward

Проблема была с высотой, когда элементы асинхронны, в этом случае мне нужно было вручную установить высоту для родительского макета компонента 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>
person JuanF    schedule 27.09.2018
comment
Как вы это решили? - person Wuilmer Medrano; 20.12.2020

arrow_upward
0
arrow_downward

Попробуйте задать значение высоты для компонента RLV, например height="100%", чтобы оно заполнило родителя. iOS не делает автоматических макетов, как это делает Android, поэтому вы сталкиваетесь с этим :)

person Brad Martin    schedule 26.09.2018

arrow_upward
0
arrow_downward

Вы не предоставили определение rows или columns для своего GridLayout. RadListView скорее всего появится, если вы сделаете:

<GridLayout row="7" col="0" colSpan="3" rows="*" columns="*">
person Ian MacDonald    schedule 26.09.2018
comment
Расширяя это, на основе разметки Qs вы даже можете использовать здесь StackLayout и удалить сетку. - person Brad Martin; 26.09.2018
comment
Ян и @Brad Я отредактировал вопросы с изменениями, которые вы мне предложили, но по-прежнему ничего не показывает. Я попробовал предложение StackLayout Брэда с тем же результатом. - person JuanF; 26.09.2018
comment
Не совсем то, что я сказал, хотя ???? - поместите высоту на RLV, а не на родителя. Таким образом, iOS скажет: «О, сделайте это представление списка на 100% родителем, которым является эта сетка» ???? - person Brad Martin; 28.09.2018