html - 为什么我的按钮上方有这 block 空白？

Question

在我使用 Angular 的 NativeScript 元素中，我制作了一个带有滑出侧边导航栏的页面。我能够使导航栏正常工作，但由于某种原因，我现在在我真正想要的内容上方有一 block 白色的空间，但不知道如何摆脱它。 Here's a playground demo of what I'm doing这是代码和 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>

供引用，这是目前的样子:

这就是我想要的样子:

Answer 1

当您使用 ScrollView 时，您需要禁用 iosOverflowSafeArea。

只需更改代码即可取消它。

<StackLayout tkMainContent iosOverflowSafeArea="false">

我已经更新了 playground here .

附言随着 iPhone X 和 iOS 11 的发布，Apple 为他们的用户带来了全新的超身临其境的用户体验，应用程序可以明显地延伸到手机的整个表面。对于所有可以有子组件的组件，iosOverflowSafeArea 属性默认为 true。我们可以称它们为容器。这就是六种布局，ScrollView、ListView 和 Repeater。有关更多信息，您可以引用 here .