如何在searchField中添加onHover

Question

我是 flutter 新手，有一个问题。 我有一个搜索字段，我希望能够用鼠标浏览列表以获取我当前所在的值，而无需实际选择它。 searchField 中有类似 onHover 的功能吗？？

如何做到这一点？......

Answer 1

要实现此目的，您需要利用 Flutter 的手势检测器机制，特别是 onHover 事件。

以下是如何执行此操作的简化版本：

// A list of strings for demonstration. 

    final items = ['Item 1', 'Item 2', 'Item 3'];
    
    ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return MouseRegion(
          onHover: (event) {
            print('Hovering over: ${items[index]}');
            // You can use setState() to change the value of a variable that reflects the current hovered item. 
          },
          child: ListTile(
            title: Text(items[index]),
          ),
        );
      },
    );

Answer 2

为了实现您在 Flutter 中描述的行为，您可以将鼠标悬停在列表中的项目上以获取其值而不选择它们，您可以使用 ListView 的组合来显示列表和鼠标区域小部件（如 MouseRegion）来检测悬停事件。以下是如何实现这一点的简单示例：

创建项目列表：这将是 ListView 的数据源。 使用ListView.builder：这个小部件将帮助您根据列表数据动态构建列表项。 将每个项目包裹在MouseRegion中：此小部件将允许您检测鼠标何时悬停在项目上。 显示悬停值：使用有状态小部件来更新和显示当前悬停项目的值。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hover Demo',
      home: HoverList(),
    );
  }
}

class HoverList extends StatefulWidget {
  @override
  _HoverListState createState() => _HoverListState();
}

class _HoverListState extends State<HoverList> {
  String hoveredItem = '';

  @override
  Widget build(BuildContext context) {
    List<String> items = List.generate(10, (index) => 'Item ${index + 1}');
    return Scaffold(
      appBar: AppBar(
        title: Text('Hover to Preview Item'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return MouseRegion(
                  onEnter: (event) => setState(() {
                    hoveredItem = items[index];
                  }),
                  onExit: (event) => setState(() {
                    hoveredItem = '';
                  }),
                  child: ListTile(
                    title: Text(items[index]),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('Hovered Item: $hoveredItem'),
          ),
        ],
      ),
    );
  }
}

MouseRegion Widget： 当鼠标指针进入该 widget 时会触发 onEnter，当鼠标离开该 widget 时会触发 onExit。这些回调使用悬停在其上的项目的值来更新状态。

ListTile：这是一个简单的小部件，代表列表中的每个项目。

悬停项目显示：悬停项目的值显示在屏幕底部。