点击时底部应用栏图标颜色不改变

Question

我创建了一个 BottomAppBar，我想要一种情况，当单击 BottomAppBar 上的图标时，图标的颜色会发生变化，并且当单击另一个图标时，第一个图标将返回到默认颜色设置和当前的图标被点击的颜色现在会改变。但到目前为止，它不起作用，图标颜色唯一改变的是当我单击图标后进行热重新加载时。

这是我的代码。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get_state_manager/src/simple/get_state.dart';
import 'package:unicons/unicons.dart';

import '../../common/constants/colors/colors.dart';
import '../../pages/homepage/controller.dart';

enum BottomBarIcon {
  Home,
  Equalizer,
  Exchange,
  Wallet,
  Ellipsis,
}

class RexBottomBar extends StatelessWidget {
  const RexBottomBar({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeScreenController>(
      builder: (controller) {
        return BottomAppBar(
          color: Color(0xFF121212),
          child: SizedBox(
            height: 80.h, // Increased height to accommodate the text
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                buildBottomBarItem(
                  icon: Icons.home_outlined,
                  text: 'Home',
                  isSelected: controller.selectedIconIndex.value == 0,
                  onTap: () => controller.setSelectedIcon(0),
                ),
                buildBottomBarItem(
                  icon: Icons.equalizer_sharp,
                  text: 'Markets',
                  isSelected: controller.selectedIconIndex.value == 1,
                  onTap: () => controller.setSelectedIcon(1),
                ),
                buildBottomBarItem(
                  icon: UniconsLine.exchange_alt,
                  text: 'Trade',
                  isSelected: controller.selectedIconIndex.value == 2,
                  onTap: () => controller.setSelectedIcon(2),
                ),
                buildBottomBarItem(
                  icon: UniconsLine.wallet,
                  text: 'Assets',
                  isSelected: controller.selectedIconIndex.value == 3,
                  onTap: () => controller.setSelectedIcon(3),
                ),
                buildBottomBarItem(
                  icon: FontAwesomeIcons.ellipsis,
                  text: 'More',
                  isSelected: controller.selectedIconIndex.value == 4,
                  onTap: () => controller.setSelectedIcon(4),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget buildBottomBarItem({
    required IconData icon,
    required String text,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            color:
                isSelected ? AppColor.highlightColor : AppColor.offTextColor2,
            size: 25.sp,
          ),
          SizedBox(height: 5.h),
          Text(
            text,
            style: TextStyle(
              color:
                  isSelected ? AppColor.highlightColor : AppColor.offTextColor2,
              fontSize: 11.sp,
              letterSpacing: -0.6
            ),
          ),
        ],
      ),
    );
  }
}

这是小部件的控制器。

import 'package:get/get.dart';
import 'package:get/get_state_manager/src/simple/get_controllers.dart';

class HomeScreenController extends GetxController{
  // Bottom Bar
  RxInt selectedIconIndex = 0.obs;

  void setSelectedIcon(int index) {
    selectedIconIndex.value = index;
  }

我解决了问题，以防万一有人遇到这种错误。

在 buildBottomBarItem 方法中添加了索引参数。该参数用于标识底部应用栏中图标的位置。

使用 Get.find() 获取 HomeScreenController 实例。

用 Obx 小部件包装 buildBottomBarItem 的内容。 Obx 小部件监听控制器中的 selectedIconIndex 可观察对象，每当它发生变化时，Obx 内的内容就会重建。这确保了当 selectedIconIndex 改变时图标颜色会立即更新。

在Obx内部，我们根据当前索引和控制器中的selectedIconIndex来确定图标是否被选中。如果它们匹配，则 isSelected 变量设置为 true。

Answer 1

您也可以使用这种方法，用 Obx 包装您的 BottomAppBar 并在视图文件中初始化控制器类。

 Obx(() { Return .... }

HomeScreenController controller = Get.put(HomeScreenController());