在 ListView Flutter 中选择另一个元素时更改元素的颜色

Question

告诉。当我 select 列表中的某个项目时，该项目的颜色变为绿色，因此我可以 select 所有项目 - 所有项目的颜色都变为绿色。但是我需要当另一个元素被 selected 时，前一个元素 returns 到它以前的状态。也就是说，只有一种元素可以燃烧绿色，而不是全部。告诉我如何实施？我将不胜感激。

代码

class _ListPoynts extends State<ListPoynts> {

  final List<bool> _selected = [];

  @override
  void initState() {
    for (var i = 0; i < poynts.length; i++) {
      _selected.add(false);
    }
    super.initState();
  }

ListView.builder(
        physics: const BouncingScrollPhysics(),
        itemCount: poynts.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => Stack(
          alignment: Alignment.topRight,
          children: [
            Positioned(
              child: Container(
                width: 176,
                alignment: Alignment.bottomCenter,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      _selected[index] = !_selected.elementAt(index);
                    });
                  },
                  child: Container(
                    height: 72,
                    width: 146,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16),
                      color: _selected[index]
                          ? constants.Colors.greenMiddle
                          : constants.Colors.greyDark.withOpacity(0.7),
                    ),

Answer 1

我不想选择一个列表，而是一个整数。 selectedIndex 例如。这样的事情可能会奏效：

class _ListPoynts extends State<ListPoynts> {

  int? _selectedIndex;

  @override
  void initState() {
    //no need to do anything here now
    super.initState();
  }

ListView.builder(
        physics: const BouncingScrollPhysics(),
        itemCount: poynts.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => Stack(
          alignment: Alignment.topRight,
          children: [
            Positioned(
              child: Container(
                width: 176,
                alignment: Alignment.bottomCenter,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  child: Container(
                    height: 72,
                    width: 146,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16),
                      color: _selectedIndex == index
                          ? constants.Colors.greenMiddle
                          : constants.Colors.greyDark.withOpacity(0.7),
                    ),

Answer 2

使用一个变量保存选中的索引项。如果没有选定的索引，则使用 null。

class _ListPoynts extends State<ListPoynts> {
  int? _selectedIndex; // <-- HERE

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics: const BouncingScrollPhysics(),
      itemCount: poynts.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) => Stack(
        alignment: Alignment.topRight,
        children: [
          Positioned(
            child: Container(
              width: 176,
              alignment: Alignment.bottomCenter,
              child: InkWell(
                onTap: () {
                  setState(() {
                    if (_selectedIndex == index) { // <-- HERE
                      _selectedIndex = null;
                    } else {
                      _selectedIndex = index;
                    }
                  });
                },
                child: Container(
                  height: 72,
                  width: 146,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: _selectedIndex == index 
                        ? constants.Colors.greenMiddle
                        : constants.Colors.greyDark.withOpacity(0.7),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在 ListView Flutter 中选择另一个元素时更改元素的颜色

Change the color of an element when another element is selected in the ListView Flutter

dart

flutter

flutter-layout