如何在切换屏幕时在底部导航屏幕中更改Appbar标题？

Question

我创建了一个底部的导航栏屏幕，并且想在屏幕从导航屏幕选项卡上更改时更改Appbar标题。在这里，我在其中创建了一个开关案例，以更改Appbar标题。但这会引发错误：发生了异常。 _casterror（类型'String'不是类型铸件中类型'rxString'的子类型）。我还尝试将“作为rxstring”删除，然后将Appbartitle更改为字符串。

导航屏幕

import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:onyx/app/modules/location/views/location_view.dart';

import 'package:onyx/app/modules/offers/views/offers_view.dart';
import 'package:onyx/app/modules/setting/views/setting_view.dart';

import 'package:onyx/custom_widgets/drawer.dart';
import 'package:onyx/style/style.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  
  final screens = [
    const OffersView(
      isAppBar: false,
    ),
    const OffersView(
      isAppBar: false,
    ),
    LocationView(),
    SettingView()
  ];
  HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Obx(() => Text(
                controller.appBartitle.value,
                style: const TextStyle(color: Colors.black),
              ))),
      body: Obx(
        () => IndexedStack(
            index: controller.selectedtIndex.value, children: screens),
      ),
      bottomNavigationBar: Obx(
        () => BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          showSelectedLabels: true,
          backgroundColor: colorPrimary,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.white54,
          currentIndex: controller.selectedtIndex.value,
          onTap: (index) => controller.onTapNavigationBar(index),
          items: const [
            BottomNavigationBarItem(
                icon: Icon(Icons.home_outlined), label: "Home"),
            BottomNavigationBarItem(
                icon: Icon(Icons.local_offer_outlined), label: "Offers"),
            BottomNavigationBarItem(
                icon: Icon(Icons.location_on_outlined), label: "Location"),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings_outlined), label: "Settings"),
          ],
        ),
      ),
      drawer: const CDrawer(),
    );
  }
}

控制器

import 'package:get/get.dart';
import 'package:onyx/app/modules/home/views/home_view.dart';

class HomeController extends GetxController {
  var selectedtIndex = 0.obs;
  var appBartitle = "1t".obs;

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();
  }

  onTapNavigationBar(index) {
    selectedtIndex.value = index;
    switch (index) {
      case 0:
        {
          appBartitle = '1t' as RxString;
        }
        break;
      case 1:
        {
          appBartitle = '2t' as RxString;
        }
        break;
      case 2:
        {
          appBartitle = '3t' as RxString;
        }
        break;
      case 3:
        {
          appBartitle = '4t' as RxString;
        }
        break;
    }
  }
}

Answer 1

在OnTapNavigationbar方法中，您仅更改了页面索引，而不更新该方法上的标题
Controller.OntabChanged（索引）将解决您的问题。

Answer 2

您的主页课很好。 Homecontroller类需要一些更改。
我已经纠正了，并且按预期工作正常。代码在下面给出。

class HomeController extends GetxController {
  var selectedtIndex = 0.obs;
  var appBartitle = "".obs;

  @override
  void onInit() {
    super.onInit();
  }

  onTapNavigationBar(int index) {
    selectedtIndex.value = index;
    switch (index) {
      case 0:
        appBartitle.value = '1t';
        break;
      case 1:
        appBartitle.value = '2t';
        break;
      case 2:
        appBartitle.value = '3t';
        break;
      case 3:
        appBartitle.value = '4t';
        break;
    }
  }

  void onTabChanged(int index) {
    selectedtIndex.value = index;
  }
}

Answer 3

我也遇到了类似的要求。

实现这一目标的最佳选择是将提供商与ChangeNotifierProvider一起使用。

您可以使用 https://pub.dev/packages/provider

请参考： https://docs.flutter.dev/deveverment/data-andeferment/data-anda-anda-anda-anda-anda-backend/state/state -MGMT/Simple