栈提升的界面A中点击按钮切换到界面B-Go服务器开发

在开发应用程序时，”栈提升”（Stack Navigation）是一个常用的导航模式，尤其是在移动应用和某些桌面应用中。以下是基于不同平台或框架的实现方式示例：

1. 使用 React Native

如果你使用的是 React Native，可以通过 react-navigation 库实现界面切换。

首先，确保你安装了必要的库：

npm install @react-navigation/native @react-navigation/stack

然后，你可以设置你的组件如下：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Text } from 'react-native';

const Stack = createStackNavigator();

function ScreenA({ navigation }) {
    return (
        <View>
            <Text>这是界面 A</Text>
            <Button 
                title="切换到界面 B"
                onPress={() => navigation.navigate('ScreenB')}
            />
        </View>
    );
}

function ScreenB() {
    return (
        <View>
            <Text>这是界面 B</Text>
        </View>
    );
}

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="ScreenA">
                <Stack.Screen name="ScreenA" component={ScreenA} />
                <Stack.Screen name="ScreenB" component={ScreenB} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

2. 使用 Flutter

在 Flutter 中，可以使用 Navigator 来进行页面间的切换。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScreenA(),
    );
  }
}

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('界面 A')),
      body: Center(
        child: ElevatedButton(
          child: Text('切换到界面 B'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ScreenB()),
            );
          },
        ),
      ),
    );
  }
}

class ScreenB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('界面 B')),
      body: Center(child: Text('欢迎来到界面 B')),
    );
  }
}

3. 使用 HTML/CSS/JavaScript

如果你在开发网页应用，可以使用 JavaScript 控制页面跳转：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栈提升示例</title>
</head>
<body>

<div id="screenA">
    <h1>这是界面 A</h1>
    <button onclick="navigateToB()">切换到界面 B</button>
</div>

<div id="screenB" style="display:none;">
    <h1>这是界面 B</h1>
</div>

<script>
function navigateToB() {
    document.getElementById("screenA").style.display = "none";
    document.getElementById("screenB").style.display = "block";
}
</script>

</body>
</html>