Question

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

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

版本信息： nativescript-ui-listview：^ 3.5.1，tns-core-modules：^ 3.4.1

组件代码：

<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>

实施

<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>

Answer 1

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

因此，作为一种可能的解决方案，尝试提供大小（对于容器或直接提供给RadListView）或使用带有rows="*"的GridLayout来获取所有可用空间，然后设置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 >

或者，您可以使用star符号获取所有可用空间

，而不是明确设置DP

rows="auto, *"

Nativescript RadListView在iOS上不可见

1 个答案: