为什么我的按钮上方有这块空白? [英] Why is there this block of white space above my button?

问题描述

在我的Angular NativeScript项目中，我正在制作一个带有滑出侧边导航栏的页面.我能够使导航栏正常工作，但是由于某种原因，我现在在内容中实际想要的位置上方留有白色空格，无法找到摆脱方法. 这是我正在做的运动场演示，下面是代码和html:

In my NativeScript project with Angular, I'm making a page with a slide out side navigation bar. I was able to get the nav bar working but for some reason, I now have a white block of space above the content that I actually want there and can't find out how to get rid of it. Here's a playground demo of what I'm doing and here's the code and html:

.ts文件:

import { Component, OnInit, AfterViewInit, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import { RadSideDrawerComponent } from "nativescript-ui-sidedrawer/angular";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})

export class HomeComponent implements AfterViewInit, OnInit {

    public isDrawerOpen: boolean;

    constructor(private _changeDetectionRef: ChangeDetectorRef) { }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: RadSideDrawer;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

    ngOnInit() {
        this.isDrawerOpen = false;
    }

    public openDrawer() {
        if (!this.isDrawerOpen) {
            this.drawer.showDrawer();
            this.isDrawerOpen = true;
        }
        else {
            this.drawer.closeDrawer();
            this.isDrawerOpen = false;
        }
    }
}

.html文件:

<ActionBar title="Leagues" class="action-bar">
    <ActionItem>
        <StackLayout>
            <Button class="fa" text="&#xf0c9;" fontSize="20" (tap)="openDrawer()"></Button>
        </StackLayout>
    </ActionItem>
</ActionBar>

<RadSideDrawer tkExampleTitle tkToggleNavButton drawerContentSize="200">
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Commissioner Tools"></Label>
        </StackLayout>
        <ScrollView>
            <GridLayout columns="45, 150" rows="25, 25, 25, 25, 25" class="sideStackLayout">
                <Label text="&#xf091;" class="sideLabel fa" row="0" col="0"></Label>
                <Label text="Create a League" row="0" col="1"></Label>
                <Label text="&#xf500;" class="sideLabel fa" row="1" col="0"></Label>
                <Label text="Create a Team" row="1" col="1"></Label>
                <Label text="&#xf133;" class="sideLabel fa" row="2" col="0"></Label>
                <Label text="Create Schedule" row="2" col="1"></Label>
                <Label text="&#xf303;" class="sideLabel fa" row="3" col="0"></Label>
                <Label text="Record Results" row="3" col="1"></Label>
            </GridLayout>
        </ScrollView>
    </StackLayout>
    <StackLayout tkMainContent>
        <ScrollView orientation="vertical" class="pageBackground">
            <StackLayout class="pageBackground" height="100%" orientation="vertical">
                <StackLayout class="m-5"></StackLayout>
                <Button text="Basketball" class="basketballClass" style="width: 95%; height: 50; margin-top: 1%; border-width: 2px; border-color: black;"
                    (tap)=chooseLeague()></Button>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</RadSideDrawer>

供参考，当前外观如下:

for reference, this is what it currently looks like:

这就是我想要的样子:

and this is what I want it to look like:

推荐答案

在使用ScrollView时，需要禁用 iosOverflowSafeArea .

You need to disable the iosOverflowSafeArea when you are using the ScrollView.

只需更改您的代码即可取消更改.

Just the change you code to disbale it.

<StackLayout tkMainContent iosOverflowSafeArea="false">

我在此处更新了游乐场

P.S.随着iPhone X和iOS 11的发布，Apple为用户带来了全新的超身临其境的用户体验，这些应用程序明显地延伸了整个手机表面.对于可以有子级的所有组件，iosOverflowSafeArea属性默认为true.我们可以称它们为容器.这是六个布局，即ScrollView，ListView和Repeater.有关此内容的更多信息，请参见此处.

P.S. With the release of the iPhone X and iOS 11 Apple has brought their users a new ultra-immersive user experience where the apps visibly stretch the entire surface of the phone. The iosOverflowSafeArea property defaults to true for all components that can have children. We can call them containers. These are the six layouts, ScrollView, ListView and Repeater. For more reading on this you can refer here.

这篇关于为什么我的按钮上方有这块空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！