如何在切換屏幕時更改底部導航屏幕中的 AppBar Title？

Question

我已經創建了一個底部導航欄屏幕，我想在屏幕從導航屏幕選項卡更改時更改 AppBar 標題。 在這里，我在其中創建了一個切換案例來更改 AppBar 標題的方法。 但它會引發錯誤：發生異常。 _CastError（類型'String'不是類型轉換中類型'RxString'的子類型）。 我還嘗試刪除演員'as RxString'並將appBartitle更改為String。

導航屏幕

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.onTapNavigationBar(index) 替換為
controller.onTabChanged(index) 它將解決您的問題。

Answer 2

您的 HomeView 課程很好。 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

我也遇到過類似的要求。

實現這一點的最佳選擇是在 Flutter 中使用提供程序以及 ChangeNotifierProvider。

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

請參考： https ://docs.flutter.dev/development/data-and-backend/state-mgmt/simple