如何在使用flutter getx中使用嵌套导航而不刷新顶杆和抽屉？

Question

我正在开发一个我有一个抽屉和顶级Appbar的Flutter应用程序。 身体内容根据导航而变化，但是我希望当我在页面之间导航时（例如 /home， /settings）在浏览时，我希望URL相应地更改。 我正在使用GetX进行国家管理和导航。

我目前正在努力在不刷新抽屉或Appbar的情况下显示适当的页面内容。但是，当我在页面之间切换时，URL不会更改。 到目前为止，我已经拥有的代码是：

import 'package:get/get.dart';

void main() {
  Get.put(ShellController());
  runApp(MyApp());
}

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

class ShellController extends GetxController {
  final _currentPage = Rx<Widget>(HomeView());
  Widget get currentPage => _currentPage.value;

  void changePage(Widget page) {
    _currentPage.value = page;
  }
}

class ShellScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ShellController controller = Get.find();
    return Scaffold(
      appBar: AppBar(title: Text('App')),
      drawer: MyDrawer(),
      body: Obx(() => controller.currentPage),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ShellController controller = Get.find();
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: Text('Home'),
            onTap: () {
              controller.changePage(HomeView());
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Settings'),
            onTap: () {
              controller.changePage(SettingsView());
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SettingsView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Page'));
  }
}

如何修改它，以便当我导航到新页面（例如家庭或设置）时，URL会相应地更改（例如， /home， /settings）？我想在不刷新顶级或抽屉的情况下实现这一目标。谁能帮我吗？

我找不到GetMaterialApp。因此，使用getMaterialApp代替材料应用。除此之外，您还需要利用GETX路由管理来处理URL更改。

指定下面的更新代码。

    import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/home', // Initial route
      getPages: [
        // Define your routes here
        GetPage(name: '/home', page: () => HomeView()),
        GetPage(name: '/settings', page: () => SettingsView()),
      ],
      home: ShellScreen(),
    );
  }
}

class ShellController extends GetxController {
  // This is to keep track of the current page. It's not really necessary for routing
  // since GetX does it for us, but it's here if you want to control the page yourself.
  final _currentPage = Rx<Widget>(HomeView());
  Widget get currentPage => _currentPage.value;

  void changePage(Widget page) {
    _currentPage.value = page;
  }
}

class ShellScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('App')),
      drawer: MyDrawer(),
      body: GetBuilder<ShellController>(
        builder: (controller) {
          return Container(
            child: Obx(() => controller.currentPage), // This will display the current page
          );
        },
      ),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: Text('Home'),
            onTap: () {
              Get.toNamed('/home'); // Navigate to the home route
              Navigator.pop(context); // Close the drawer
            },
          ),
          ListTile(
            title: Text('Settings'),
            onTap: () {
              Get.toNamed('/settings'); // Navigate to the settings route
              Navigator.pop(context); // Close the drawer
            },
          ),
        ],
      ),
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SettingsView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Page'));
  }
}

Answer 1