代码之家 › 专栏 › 技术社区 › clzola

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

nativescript

clzola · 技术社区 · 9 年前

我想在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没有底部属性……下面是我想要创建的图片:

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

6 回复 | 直到 9 年前

micster 9 年前

有一天我做了类似的事情,编程的 &带角度 ,也许这会有所帮助。

像这样的 :

1] 在底部元素中添加一个id,以便可以在组件中访问它:

<StackLayout #bottomElt></StackLayout>

// 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>

Mohammad Rafigh MByD 9 年前

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

Seph Reed 7 年前

这是绝对最好的解决方案,来自一个开发人员: https://github.com/NativeScript/NativeScript/issues/5591#issuecomment-482640921

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

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

Ehigie Paul 8 年前

这是最好的解决方案

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

Misha 6 年前

也可以使用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>

Richard Aguirre 4 年前

这是最简单的方法

        <DockLayout backgroundColor="lightgray" stretchLastChild="true">

        <Label text="top" dock="top" height="60" backgroundColor="green">
        </Label>

        <Label text="bottom" dock="bottom" height="60" backgroundColor="yellow"></Label>
        <Label text="center" backgroundColor="red"></Label>
        </DockLayout>

这就是你想要的!

<DockLayout backgroundColor="lightgray" stretchLastChild="false">

        <Label text="top" dock="top" height="60" backgroundColor="green">
        </Label>

        <Label text="bottom" dock="bottom" height="60" backgroundColor="yellow"></Label>
     
    </DockLayout>