Flutter - 图标小部件

Question

我正在使用一个图标小部件，我希望当我按下图标时可以跳转到另一个地方（如通话图标），以及当我按下图标时打开另一个小部件的选项（如三个点）图标），我的问题是在颤振图标小部件中没有onlongpress ... 任何可能有助于这样做的示例代码？

这是我现在的代码：

child: ListTile(
      leading: CircleAvatar(
        radius: 25.0,
        backgroundColor: Colors.brown,
      ),
      title: Text(helpRequest.category),
      subtitle: Text(helpRequest.description),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          IconButton(
            icon: Icon(
              Icons.call,
              size: 20.0,
              color: Colors.brown[900],
            ),
            onPressed: () {

            },

          ),
          IconButton(
            icon: Icon(
              Icons.more_vert,
              size: 20.0,
              color: Colors.brown[900],
            ),
            onPressed: () {
              
            },
          ),
        ],
      ),
    ),

Answer 1

不要使用 IconButton，而是使用 GestureDetector 包装图标，这将为您提供 onLongPress 和 onTap (onPressed)。请看下面的代码 -

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Demo")),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Offset _tapPosition;

    void _storePosition(TapDownDetails details) {
      _tapPosition = details.globalPosition;
    }

    return ListTile(
      leading: const CircleAvatar(
        radius: 25.0,
        backgroundColor: Colors.brown,
      ),
      title: const Text("helpRequest.category"),
      subtitle: const Text("helpRequest.description"),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          GestureDetector(
            onTap: () => print("Tap: call"),
            onLongPress: () => print("Long Press: Call"),
            child: Icon(
              Icons.call,
              size: 20.0,
              color: Colors.brown[900],
            ),
          ),
          GestureDetector(
            onTap: () => print("Tap: more_vert"),
            onTapDown: _storePosition,
            onLongPress: () async {
              final RenderBox overlay =
                  Overlay.of(context).context.findRenderObject();
              final int _selected = await showMenu(
                items: [
                  PopupMenuItem(
                    value: 1,
                    child: Row(
                      children: <Widget>[
                        const Icon(Icons.delete),
                        const Text("Delete"),
                      ],
                    ),
                  ),
                  PopupMenuItem(
                    value: 2,
                    child: Row(
                      children: <Widget>[
                        const Icon(Icons.edit),
                        const Text("Edit"),
                      ],
                    ),
                  )
                ],
                context: context,
                position: RelativeRect.fromRect(
                    _tapPosition &
                        const Size(40, 40), // smaller rect, the touch area
                    Offset.zero & overlay.size // Bigger rect, the entire screen
                    ),
              );
              switch (_selected) {
                case 1:
                  print("delete seleted");
                  break;
                case 2:
                  print("edit seleted");
                  break;
              }
            },
            child: Icon(
              Icons.more_vert,
              size: 20.0,
              color: Colors.brown[900],
            ),
          ),
        ],
      ),
    );
  }
}