首页 文章

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

提问于
浏览 次
0

上下文

我有一个 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 回答

  • 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);
    回复于

相关问题