Flutter：如何使用 getX 更改文本颜色？答案

【问题标题】：Flutter: How to change text color using getX?Flutter：如何使用 getX 更改文本颜色？
【发布时间】：2021-09-18 11:04:33
【问题描述】：

我想在单击磁贴时更改 ListTile 文本的颜色，我该怎么做呢？颜色也应该只针对特定选定的磁贴更改。我的做法如下：

ListView.builder(
        itemCount: _antigen.plantAntigens.length,
        itemBuilder: (BuildContext cntxt, int index) {
          return ListTile(
              title: Text(
                _antigen.plantAntigens[index],
                style: TextStyle(
                    color: controller.isSelected ? Colors.red : Colors.black87),
              ),
              onTap: () {
                controller.toogle();
              });
        },
      ),

控制器代码如下：

bool isSelected = false.obs;

  toogle() {
    isSelected = !isSelected;
  }

【问题讨论】：

我在使 isSelected 变量可观察时收到错误消息。即 bool isSelected = false.obs;
您需要使用RxBool isSelected = false.obs。当您使用.obs 时，您的返回类型现在是“可观察”类型。 RxBool 是 Get 的布尔值的“可观察”子类。 int、String 等也存在类似的其他类型。

标签： flutter dart flutter-getx

【解决方案1】：

只需在控制器中创建一个存储所选索引的列表

  var plantAntigensSelected = [].obs;

  toogle(int index) {
    if (plantAntigensSelected.contains(index)) {
      plantAntigensSelected.remove(index);
    } else {
      plantAntigensSelected.add(index);
    }
  }

你的 ListView 像这样

     ListView.builder(
        itemCount: plantAntigens.length,
        itemBuilder: (BuildContext cntxt, int index) {
          return ListTile(
              title: Obx(
                () => Text(
                  plantAntigens[index],
                  style: TextStyle(
                      color:
                      controller.plantAntigensSelected.contains(index)
                              ? Colors.red
                              : Colors.black87),
                ),
              ),
              onTap: () {
                controller.toogle(index);
              });
        },
      )

【讨论】：

【解决方案2】：

控制器TileColorX 将保存已选择的图块（通过使用ListView.builder 提供的索引）。

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

class ListViewBoxConstraintsPage extends StatelessWidget {
  final List<String> _items = ['first', 'second', 'third'];

  @override
  Widget build(BuildContext context) {
    TileColorX tcx = Get.put(TileColorX());

    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Constraints'),
      ),
      body: ListView.builder(itemCount: _items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Obx(
                      () => Text('${_items[index]} item',
                      style: TextStyle(
                          color: tcx.selectedIndex.value == index ? Colors.green : Colors.red)
                  )),
              onTap: () => tcx.toggle(index),
            );
          }),
    );
  }
}

class TileColorX extends GetxController {
  RxInt selectedIndex = 0.obs;

  void toggle(int index) => selectedIndex.value = index;
}

【讨论】：

【解决方案3】：

请尝试在onTap中使用setState，如下图

onTap: () {
            setState(() {
            controller.toogle();
            });
  });

【讨论】：