Question

Context

I have a listView element that pulls in its elements via external source. As such I can't be sure how many rows there will be.

I therefore set the listView attribute height to a bound variable, and the attribute rowHeight to a constant.

However, if I multiply multiply the rowHeight by the number of list items, the height of the listView is always too much and leaves empty space.

Code

page.xml

<StackLayout class="group-meta-active" visibility="{{ userCanSelect ? 'visible' : 'collapsed' }}" ontap="teamSelect">
    <Label text="Selection" class="group-meta-active-team-label" />
    <Label text="{{ selectionName || '' }}" id="{{ selectionId || 0 }}" visibility="{{ selectionId ? 'visible' : 'collapsed'}}" class="group-meta-active-team-name" />
    <Label text="Tap To Decide" visibility="{{ selectionId ? 'collapsed' : 'visible'}}" class="group-meta-active-team-decide" />
    <ListView items="{{ userAllowedSelections }}" height="{{ userSelectionHeight }}" class="list-clubs" itemTap="selectTeam" rowHeight="35" visibility="{{ selectionSelect ? 'visible' : 'collapsed' }}">
        <ListView.itemTemplate>
            <StackLayout orientation="horizontal" class="list-clubs-cont">
                <Label text="{{ clubName || 'Loading...' }}" textWrap="false" class="list-clubs-label" />
                <Label text="vs" textWrap="false" class="list-clubs-vs" />
                <Label text="{{ clubOpponent || 'Loading...' }}" textWrap="false" class="list-clubs-opp" />
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</StackLayout>

page.js

//When setting page variables; e is the retrieved object;
//e.allowedSelections is an array
pageData.set("userAllowedSelections", (e.allowedSelections));
pageData.set("userSelectionHeight", (e.allowedSelections.length * 35));

Output Images

Question

As you can see, the listView element is a few pixels taller than the elements inside, despite the rowHeight being set to 35, and the listView height attribute set to 35 x listView element array length.

I have tried:

Setting the multiplication to one-off (e.g. 34/36)
Setting the multiplication to a half-value (e.g. 34.5, 35.5)
Mixing and matching with multiple values
Removing all padding and margins on the list items (the only CSS now is font styling and vertical-align: middle

Is this possible?

Answer 1

我在考虑两种可能的原因。

通过计算当前设备的实际像素和实际设备密度来实现在NativeScript中使用DP（也称为设备无关像素）。当使用硬编码值作为不同密度时，这可能会导致不同的结果设备各不相同，这些计算可能需要进行一些舍入。
分隔符宽度（约1dp或更小）

使用您的代码库，这个解决方案在API19上是完美的，在API23中大约有一半像素关闭（对于每个）

var size = (e.allowedSelections.length * 35) + (e.allowedSelections.length * 0.9);
pageData.set("userSelectionHeight", size);

但是，您仍然可以检查当前设备的屏幕比例和尺寸，并使用平台模块为每个设备进行更好的计算

import { screen, ScreenMetrics } from "platform";
var mainScreen = screen.mainScreen;
console.log(mainScreen.heightDIPs);
console.log(mainScreen.heightPixels);
console.log(mainScreen.scale);
console.log(mainScreen.widthDIPs);
console.log(mainScreen.widthPixels);

JavaScript Nativescript: Make ListView height equal to total height of rows

Context

Code

Output Images

Question

1 个答案: