JavaScript Nativescript：使 ListView 高度等于行的总高度答案

【问题标题】：JavaScript Nativescript: Make ListView height equal to total height of rowsJavaScript Nativescript：使 ListView 高度等于行的总高度
【发布时间】：2017-03-22 18:39:04
【问题描述】：

上下文

我有一个listView 元素，它通过外部源引入其元素。因此我无法确定会有多少行。

因此，我将listView 属性height 设置为绑定变量，并将rowHeight 属性设置为常量。

但是，如果我将rowHeight 乘以列表项的数量，listView 的高度总是太大而留下空白空间。

代码

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

输出图像

问题

如您所见，listView 元素比内部元素高几个像素，尽管 rowHeight 设置为 35，listView height 属性设置为 35 x listView 元素数组长度。

我试过了：

将乘法设置为一次性（例如 34/36）
将乘法设置为半值（例如 34.5、35.5）
与多个值混合匹配
删除列表项上的所有填充和边距（现在唯一的 CSS 是字体样式和 vertical-align: middle

这可能吗？

【问题讨论】：

标签： javascript android listview nativescript

【解决方案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);

【讨论】：