如何在 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也可以做到：

<GridLayout rows="16,*,16" columns="16,*,16" width="100%" backgroundColor="red">
    <GridLayout row="1" col="1" rows="auto, auto, auto" columns="auto" horizontalAlignment="right" verticalAlignment="bottom" backgroundColor="blue">
        <!-- Your content at bottom right corner -->
        <Label row="0" text="Your content" textAlignment="center" textWrap="true"></Label>
        <Label row="1" text="at" textAlignment="center" textWrap="true"></Label>
        <Label row="2" text="bottom right corner" textAlignment="center"></Label>
    </GridLayout>
</GridLayout>

Answer 2

这是绝对最佳的解决方案，从其中一位开发者处获得：https://github.com/NativeScript/NativeScript/issues/5591#issuecomment-482640921

<GridLayout rows="*,auto">
   <ItemTakingFullScreen rowSpan="2"/>
   <ItemShownUnder row="1"/>
   <ItemShownAbove row="1">
</GridLayout>

基本上，您可以使用网格布局，让一个项目占据多个网格空间，并与其他项目共享。

Answer 3

这是最好的解决方案 将所有元素包装在一个绝对布局中，宽度和高度为 100%，并可能添加一个网格布局来保存主要内容。

        <AbsoluteLayout width='100%' height='100%'>
           <StackLayout width='100%' hieght='100%' left='0' top='0'>
                 //add you structure here

           </StackLayout>
           add your fixed element here

           <image src='add the float item'/>
       </AbsoluteLayout>

Answer 4

另一种选择是在您的 AbsoluteLayout 容器中使用 FlexboxLayout，如下所示：

<FlexboxLayout flexDirection="column" justifyContent="space-between" height="100%">
    <ScrollView
        width="100%"
        orientation="horizontal">
        <!-- More XML -->
    </ScrollView>

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

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

    </StackLayout>
</FlexboxLayout>

Answer 5

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

如果您不想使用 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>