如何在NativeScript中实现Stack Layout的显示与隐藏（类Android的view.setVisibility(View.GONE)）

Hey there! I’ve dealt with this exact requirement plenty of times in NativeScript projects, so let’s break down how to make your StackLayout disappear and free up its layout space—just like Android’s View.GONE does.

Core Concept: NativeScript’s visibility Property #

NativeScript views (including StackLayout) have a built-in visibility property with three key values:

• visible: The view is fully visible (default behavior)
• hidden: The view is invisible but still takes up layout space (matches Android’s View.INVISIBLE)
• collapsed: The view is invisible and does not take up any layout space—this is exactly what you want for View.GONE behavior

Method 1: Data Binding (Recommended for MVVM Patterns) #

If you’re using a view model (common in NativeScript Core, Angular, Vue, etc.), bind the visibility property to a boolean flag in your model.

Example (NativeScript Core with TypeScript):

1. XML Layout:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Button text="Toggle Stack Visibility" tap="onToggleTap" />
        
        <!-- Target StackLayout with visibility binding -->
        <StackLayout id="myStack" visibility="{{ isStackVisible ? 'visible' : 'collapsed' }}">
            <Label text="This is the stack content that will disappear completely!" />
            <Button text="Another button inside the stack" />
        </StackLayout>
    </StackLayout>
</Page>

2. ViewModel/Code-Behind:

import { Observable } from "@nativescript/core";
import { Page } from "@nativescript/core";

export function pageLoaded(args) {
    const page = args.object as Page;
    const viewModel = new Observable({
        isStackVisible: true
    });
    page.bindingContext = viewModel;
}

export function onToggleTap(args) {
    const page = args.object.page;
    const viewModel = page.bindingContext as Observable;
    viewModel.set("isStackVisible", !viewModel.get("isStackVisible"));
}

Example (NativeScript Angular):

<StackLayout>
    <Button text="Toggle Stack" (tap)="toggleStack()" />
    
    <StackLayout [visibility]="isStackVisible ? 'visible' : 'collapsed'">
        <p>Angular stack content here!</p>
    </StackLayout>
</StackLayout>

import { Component } from "@angular/core";

@Component({
    selector: "my-component",
    templateUrl: "./my-component.component.html"
})
export class MyComponent {
    isStackVisible = true;

    toggleStack() {
        this.isStackVisible = !this.isStackVisible;
    }
}

Method 2: Direct Code Manipulation #

If you need to control visibility directly (e.g., from a button tap event without MVVM), grab a reference to your StackLayout and set the visibility property directly.

import { StackLayout, Page } from "@nativescript/core";

export function onHideStackTap(args) {
    const page = args.object.page as Page;
    const targetStack = page.getViewById<StackLayout>("myStack");
    
    // Hide like View.GONE
    targetStack.visibility = "collapsed";
    
    // To show it again later:
    // targetStack.visibility = "visible";
}

Key Notes #

• Always use collapsed instead of hidden if you want the layout to reflow (just like View.GONE). Using hidden will leave an empty space where the StackLayout was.
• If you want to add a smooth transition when hiding/showing, you can combine the visibility change with NativeScript’s animation module (e.g., fade out before setting collapsed).

Hope that helps you get the exact behavior you’re looking for! Feel free to ask if you need clarification on any part.

内容的提问来源于stack exchange，提问作者Mahabub baig