首页 文章

Nativescript RadListView在iOS上不可见

提问于
浏览 次
0

我用RadListView创建了一个组件，并放在我的应用程序的几个页面上 . RadListView位于Panel内部，RadListView的可见性使用Panel标头控制 . 该功能在Android上运行正常，但是，在iOS（iPhone 5s iOS 11.1）上，RadListView不可见 .

我尝试用GridLayout包装RadListView，但是，这不起作用 .

Version information: nativescript-ui-listview：^ 3.5.1，tns-core-modules：^ 3.4.1

Component code:

<StackLayout xmlns:lv="nativescript-ui-listview">
    <GridLayout rows="*" columns="auto, *, auto" verticalAlignment="top" onTap="EntityHeaderTap" class="entity-header">
        <Image row="0" col="0" width="23" src="res://detail_Employee" verticalAlignment="center"/>
        <StackLayout row="0" col="1" orientation="horizontal" verticalAlignment="center" marginLeft="10">
            <Label id="entityLabel" text="Employee" fontSize="15" verticalAlignment="center" color="#706e77"/>
        </StackLayout>
        <Image id="entityArrow" row="0" col="2" width="14" src="res://arrow_u" verticalAlignment="center" />
    </GridLayout>
    <StackLayout id="entityContent" visibility="collapse" class="entity-content">
        <lv:RadListView id="employeeListView"  items="{{ Employees }}" itemTap="EmployeeItemTap"  visibility="{{ Employees ? 'visible' : 'collapsed' }}" selectionBehavior="None" separatorColor="transparent" height="100%">
            <lv:RadListView.itemTemplate>
                <GridLayout columns="*, 17" rows="50" class="{{ IsLast ? 'entity-item-last' : 'entity-item' }}">
                    <StackLayout col="0" verticalAlignment="center" marginLeft="5">
                        <Label text="{{ FullName ? FullName : '' }}" textWrap="true" fontSize="14" color="#4B4F63"/>
                        <Label text="{{ OrganisationName ? OrganisationName : '' }}" visibility="{{ OrganisationName ? 'visible' : 'collapsed' }}" textWrap="true" fontSize="12" color="#706e77"/>
                    </StackLayout>
                    <Image col="1" src="res://arrow_r" width="6" verticalAlignment="center"></Image>
                </GridLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
        <StackLayout visibility="{{ Employees ? 'collapsed' : 'visible' }}">
            <Label text="No record found" fontSize="14" padding="5" margin="0 5" color="#aeafb7" />
        </StackLayout>
    </StackLayout>
</StackLayout>

Implementation

<GridLayout rows="auto, auto, *, auto"> 
    <ScrollView row="3" visibility="{{ selectedTabIndex == 2 ? 'visible' : 'collapsed' }}">
        <GridLayout rows="auto, auto, auto, auto, auto, auto, *" columns="*, *" class="tab-container" paddingBottom="15">
            ....
            <SearchComponent:EmployeePanel row="3" colSpan="2" marginTop="15" />
        </GridLayout>
    </ScrollView>
</GridLayout>
nativescript nativescript-telerik-ui

1 回答

  • 0

    问题是 StackLayout 没有预定义的大小，并将占用其子组件所需的空间 . 在这种情况下， RadListView 也缺少预定义的大小（ height="100%" ，但父堆栈布局是用无穷大来衡量的 . ）在iOS上，列表视图后面的本机控件需要一个大小来测量和占用 .

    因此，作为一种可能的解决方案，尝试提供大小（对于容器或直接提供给 RadListView ）或使用GridLayout和 rows="*" 获取所有可用空间，然后将 row="0" 设置为 RadListView

    例如这样的事情：

    <GridLayout rows="auto, 500" xmlns:lv="nativescript-ui-listview">
    <GridLayout row="0" rows="*" columns="auto, *, auto" verticalAlignment="top" onTap="EntityHeaderTap" class="entity-header">
        <Image row="0" col="0" width="23" src="res://detail_Employee" verticalAlignment="center"/>
        <StackLayout row="0" col="1" orientation="horizontal" verticalAlignment="center" marginLeft="10">
            <Label id="entityLabel" text="Employee" fontSize="15" verticalAlignment="center" color="#706e77"/>
        </StackLayout>
        <Image id="entityArrow" row="0" col="2" width="14" src="res://arrow_u" verticalAlignment="center" />
    </GridLayout>
    <lv:RadListView row="1"  id="employeeListView"  items="{{ Employees }}" itemTap="EmployeeItemTap"  visibility="{{ Employees ? 'visible' : 'collapsed' }}" selectionBehavior="None" separatorColor="transparent" height="100%">
            <lv:RadListView.itemTemplate>
                <GridLayout columns="*, 17" rows="50" class="{{ IsLast ? 'entity-item-last' : 'entity-item' }}">
                    <StackLayout col="0" verticalAlignment="center" marginLeft="5">
                        <Label text="{{ FullName ? FullName : '' }}" textWrap="true" fontSize="14" color="#4B4F63"/>
                        <Label text="{{ OrganisationName ? OrganisationName : '' }}" visibility="{{ OrganisationName ? 'visible' : 'collapsed' }}" textWrap="true" fontSize="12" color="#706e77"/>
                    </StackLayout>
                    <Image col="1" src="res://arrow_r" width="6" verticalAlignment="center"></Image>
                </GridLayout>
            </lv:RadListView.itemTemplate>
    </lv:RadListView>
</GridLayout >

    或者，不是显式设置DP，而是使用 star 符号来占用所有可用空间

    rows="auto, *"
    回复于

相关问题