nativescript - 如何在 NativeScript 中将元素定位在绝对布局的底部？

Question

我想在 NativeScript 的绝对布局中在屏幕底部放置一个元素。

我有这个代码:

<AbsoluteLayout>
    <maps:mapView 
        left="0"
        top="0"
        width="100%"
        height="100%"
        latitude="{{ map.latitude }}" 
        longitude="{{ map.longitude }}" 
        zoom="{{ map.zoom }}"
        padding="{{ map.padding }}"  
        mapReady="onMapReady"
        coordinateTapped="onCoordinateTapped"
        markerSelect="onMarkerSelect"
        shapeSelect="onShapeSelect"
        cameraChanged="onMapCameraChanged"/>

    <ScrollView
        left="0"
        top="0"
        width="100%"
        orientation="horizontal">
        <!-- More XML -->
    </ScrollView>

    <StackLayout
        left="0"
        bottom="0"
        width="100%"
        visibility="visible"
        orientation="horizontal"
        style="background-color: red;">

        <Label text="TITLE"></Label>

    </StackLayout>
</AbsoluteLayout>

我发现 AbsoluteLayout 没有底部属性......这是我想要创建的图片:



那么如何排列图片中的项目，尤其是底部的项目？

编辑:我应该注意到这个底部矩形的尺寸可能并不总是相同....

Answer 1

有一天，我以编程方式做了类似的事情 与角 ，也许这会有所帮助。

如果您不想使用 GridLayout，您可以尝试获取底部元素和屏幕的高度，然后使用简单的计算从顶部放置您的元素:屏幕的高度 - 底部元素的高度( - 如果你想要更多填充)。您可以使用两种类型的值:DIP 和像素。如果您使用像素，则需要使用屏幕比例将您的值转换为 DIP。

像这样(我没有测试我给你的代码，这只是一个例子):

1] 向底部元素添加一个 id，以便您可以在组件内访问它:

<StackLayout #bottomElt></StackLayout>

2] 更新您的组件以在绝对布局中设置元素位置

// you need ElementRef, OnInit and ViewChild
import { Component, ElementRef, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { AbsoluteLayout } from "ui/layouts/absolute-layout";
import { StackLayout } from "ui/layouts/stack-layout";
// you need access to screen properties
import { screen } from "tns-core-modules/platform";
[...]

export class YourComponent implements OnInit {
    // add access to element inside your component
    @ViewChild("bottomElt") bottomElt: ElementRef;

    // create variable to access bottom element properties
    bottomContainer: StackLayout;

    // set bottom element position after view init
    // example : inside ngOnInit function (for Angular version)
    ngOnInit(): void {
        this.bottomContainer = <StackLayout>this.bottomElt.nativeElement;

        // using DIPs values only
        AbsoluteLayout.setTop(this.bottomContainer, (screen.mainScreen.heightDIPs - Number(this.bottomContainer.height)));

        // using pixels and screen scale
        // this way you can get height without knowing it
        AbsoluteLayout.setTop(this.bottomContainer, (screen.mainScreen.heightDIPs - (Number(this.bottomContainer.getMeasuredHeight()) / screen.mainScreen.scale)));

    }

有关屏幕值的更多信息: https://docs.nativescript.org/api-reference/interfaces/platform.screenmetrics.html

替代方式

您可以使用 GridLayout 来设置底部栏，而不是使用 AbsoluteLayout，它有两行:一行具有通配符大小，另一行具有自动大小，以便每次更改时都能适合您的底部栏高度。我在移动应用程序中这样做是为了在 Android 和 IOS 的底部获得一个菜单:

<GridLayout rows="*, auto" width="100%">
    <AbsoluteLayout row="0" orientation="vertical">
        <!-- YOUR CONTENT (maps & ScrollView) -->
    </AbsoluteLayout>

    <!-- YOUR BOTTOM BAR (StackLayout). Don't forget to add row="1" -->
    <StackLayout #bottomElt row="1">[...]</StackLayout>
</GridLayout>