Flutter 的 Reorderable ListView 只有一个 ListTile 的悬停效果

Question

在这里您可以看到我的 Reorderable ListView 的屏幕截图，所有尾随图标都是绿色的，因为我悬停其中一个：

我希望当我将鼠标悬停在 ListTile 的尾随图标上时，只有这个图标会改变颜色，而不是列表的所有尾随图标，

我可能需要实现一个索引，但不知道如何使它工作，这是我的代码：

List<Tache> listeTaches = [
    new Tache("Tache1", "Projet1"),
    new Tache("Tache2", "Projet2"),
    new Tache("Tache3", "Projet3")
  ];

  _onReorder(oldIndex, newIndex) {
    setState((){
      if(newIndex > oldIndex){
        newIndex -= 1;
      }
      var item = listeTaches.removeAt(oldIndex);
      listeTaches.insert(newIndex, item);
    });
  }
  
  var my_color = Colors.grey;
  var onEntered = false;

  _updateIcon(_){
    setState(() {
      if (onEntered == false){
        onEntered = true;
        my_color = Colors.green;
      } else {
        onEntered = false;
        my_color = Colors.grey;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: LightColors.kLightYellow,
      appBar: AppBar(
        leading: Container(
          child: MyBackButton(),
          padding: EdgeInsets.only( left: 30),
        ),
        title: Text('Terminé', style: TextStyle(color: Colors.black),),
        centerTitle: true,
        backgroundColor: LightColors.kBlue,
      ),
      body: ReorderableListView(
        buildDefaultDragHandles: false,
        header: Center(
          child: Container(
            child: Text(
              'Listes des tâches',
              style: Theme.of(context).textTheme.headline5,
            ),
            padding: EdgeInsets.symmetric(vertical: 20)
          )
        ),
        children: listeTaches.map((e) => ListTile(
          key: UniqueKey(),
          leading: Icon(BeoticIcons.disc),
          title: Text(e.nom),
          subtitle: Text(e.nomProjet),
          trailing: MouseRegion(onHover: _updateIcon,
            child: Icon(BeoticIcons.circle_check, color: my_color)
          )
        )).toList(),  
        onReorder: _onReorder
      )
    );
  }

感谢您的帮助！

Answer 1

有不同的方法来解决这个问题。例如，您可以将您的图标包装在另一个有状态的小部件中，并处理独立于索引的悬停效果。

class IconWithHover extends StatefulWidget {
  final IconData iconData;
  const IconWithHover({Key? key, required this.iconData}) : super(key: key);

  @override
  State<IconWithHover> createState() => _IconWithHover();
}

class _IconWithHover extends State<IconWithHover> {
  bool _highlight = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (e) => setState(() {
        _highlight = true;
      }),
      onExit: (e) => setState(() {
        _highlight = false;
      }),
      child: Icon(widget.iconData,
          color: _highlight ? Colors.red : Colors.black),
    );
  }
}

完整示例：Code snipped

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<int> _items = List<int>.generate(20, (int index) => index);

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
    final Color evenItemColor = colorScheme.primary.withOpacity(0.15);

    return ReorderableListView(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      buildDefaultDragHandles: false,
      children: <Widget>[
        for (int index = 0; index < _items.length; index += 1)
          ListTile(
              key: Key('$index'),
              leading: SizedBox(
                width: 50,
                child: ReorderableDragStartListener(
                  index: index,
                  child: const Icon(Icons.drag_handle),
                ),
              ),
              tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
              title: Text('Item ${_items[index]}'),
              trailing: const IconWithHover(iconData: Icons.favorite)),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
    );
  }
}

class IconWithHover extends StatefulWidget {
  final IconData iconData;
  const IconWithHover({Key? key, required this.iconData}) : super(key: key);

  @override
  State<IconWithHover> createState() => _IconWithHover();
}

class _IconWithHover extends State<IconWithHover> {
  bool _highlight = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (e) => setState(() {
        _highlight = true;
      }),
      onExit: (e) => setState(() {
        _highlight = false;
      }),
      child:
          Icon(widget.iconData, color: _highlight ? Colors.red : Colors.black),
    );
  }
}