Getx 不更新 UI 属性颤动答案

【问题标题】：Getx not updating the UI attributes flutterGetx 不更新 UI 属性颤动
【发布时间】：2021-08-18 13:04:12
【问题描述】：

我正在尝试在 ontap 事件中更改容器的颜色（在 gridview 构建器中）。当我使用 setState 时它工作正常。但是当我将其更改为 Getx 时，打印语句工作正常，但容器的颜色没有改变。这是代码。

这是我试图显示我的网格视图的屏幕

class _SelectRoleScreenState extends State<SelectRoleScreen> {
  MyController myController = Get.put(MyController());
  var colorFromController;

  int selctedValue;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: double.infinity,
                height: 250.0,
                child: upperPortion(),
              ),
              Padding(
                padding: EdgeInsets.all(8.0),
                child: GridView.builder(
                    shrinkWrap: true,
                    primary: false,
                    itemCount: myController.roles.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing: 16,
                      crossAxisSpacing: 20,
                    ),
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          colorFromController =
                              myController.selectedColor.value;
                          colorFromController = index;
                          print(colorFromController);
                          // setState(() {
                          //   _selectedColor = index;
                          // });
                        },
                        child: Padding(
                          padding: EdgeInsets.only(bottom: 8),
                          child: Obx(
                            () => Container(
                              width: sizeWidth(context) / 2.5,
                              decoration: BoxDecoration(
                                color: colorFromController == index
                                    ? primaryColor
                                    : Colors.white,
                                borderRadius: BorderRadius.circular(10),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.grey[200],
                                    blurRadius: 2,
                                    offset: Offset(0, 5),
                                  ),
                                ],
                              ),
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  SizedBox(
                                    height: 5,
                                  ),
                                  Image.asset(
                                    myController.roles[index]['roleImage'],
                                    color: colorFromController == index
                                        ? Colors.white
                                        : primaryColor,
                                    height: 50,
                                    width: 50,
                                  ),
                                  Text(
                                    myController.roles[index]['roleName']
                                        .toUpperCase(),
                                    style: TextStyle(
                                      fontSize: 16,
                                      color: colorFromController == index
                                          ? Colors.white
                                          : Colors.black,
                                    ),
                                  ),
                                  Container(
                                    width: 150,
                                    child: Text(
                                      myController.roles[index]
                                          ['roleDescription'],
                                      style: TextStyle(
                                        color: colorFromController == index
                                            ? Colors.white
                                            : Colors.black,
                                        fontSize: 12,
                                      ),
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 5,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      );
                    }),
              ),
              SizedBox(
                height: 15,
              ),
              CustomButton(
                buttonText: "Get Started",
                buttonColor: primaryColor,
                textColor: Colors.white,
                onPress: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => CreateAccountPartnerScreen()),
                  );
                },
              ),
              SizedBox(
                height: 15,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这是控制器类

import 'package:get/get.dart';

class MyController extends GetxController {
  final RxInt selectHomeScreen = 0.obs;
  RxInt selectedColor = 1.obs;

  List<Map> roles = [
    {
      'roleImage': 'assets/icons/select_partner/Pet Shop.png',
      'roleName': "pet shop",
      'roleDescription': 'Sell Your Products to Pet Lovers',
      'homeIndex': 0,
    },
    {
      'roleImage': 'assets/icons/select_partner/Sitter.png',
      'roleName': "Sitter",
      'roleDescription': 'Provide Pet Sitter Services',
      'homeIndex': 1,
    },
    {
      'roleImage': 'assets/icons/select_partner/Vets Clinic.png',
      'roleName': "Vets Clinic",
      'roleDescription': 'Do Appointments with Pet Lovers',
      'homeIndex': 2,
    },
    {
      'roleImage': 'assets/icons/select_partner/Groomer.png',
      'roleName': "Groomer",
      'roleDescription': 'Do Grooming Appointments with Pet Lovers',
      'homeIndex': 3,
    },
    {
      'roleImage': 'assets/icons/select_partner/Aglity Trainer.png',
      'roleName': "Aglity Trainer",
      'roleDescription': 'Train Pets Different Skills',
      'homeIndex': 4,
    },
    {
      'roleImage': 'assets/icons/select_partner/Govertment.png',
      'roleName': "Govertment",
      'roleDescription': 'Renew Pets Licences and Apply For Pets Passport',
      'homeIndex': 5,
    },
  ].obs;
}

任何帮助将不胜感激

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-getx

【解决方案1】：

它没有重建的原因是因为您的onTap 没有更改 GetX 类中的任何变量。这是为了尽量减少不必要的重建。

您需要做的就是更改手势检测器的 onTap 中的实际 GetX 变量。

 onTap: () {
      myController.selectedColor.value = index;
      print(colorFromController);
   },

然后在您的 BoxDecoration 中使逻辑依赖于 GetX 变量而不是本地变量。

Obx(
  () => Container(
    width: sizeWidth(context) / 2.5,
    decoration: BoxDecoration(
      color: myController.selectedColor.value == index
           ? primaryColor
           : Colors.white,
.....

基本上你不需要本地的colorFromController 变量。只需在整个页面中将其替换为myController.selectedColor.value。

我还建议将 primaryColor 变量也放在 GetX 类中，并使整个页面无状态，因为您没有做任何需要有状态小部件的事情。

【讨论】：