如何在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

替代方式

而不是使用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> 

Answer 2

另一种选择是在你的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>