手势检测：ElevatedButton 内的 SelectableText

Question

我在 Flutter Web 中遇到问题，组件是 Clickable（ElevatedButton、GestureDetector 等），同时在内部包含一个 SelectableText 小部件.

主要问题是单击 SelectableText 顶部不会触发 onPressed 按钮回调。相反，它看起来像 'initiates' 文本选择。

从我的角度来看，只有在文本上发生双击、开始拖动或长按时才应初始化文本选择，而不是单击。

我的问题的一个非常简化的版本：


import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Center(
        child: ElevatedButton(
          onPressed: () {
            print('onTap');
          },
          child: Container(
            padding: const EdgeInsets.all(36),
            child: const SelectableText(
              'Select me, but I also want to be clickable!',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

注意 ElevatedButton 和 SelectableText

之间的 padding

有什么建议吗？想法？提前致谢

Answer 1

我知道您正在尽力模仿所有文本都 select 可用的“原生网络体验”，正如您所说，“点击和拖动开始是不同的”，但它们的差异可能是低至 1 个像素。

如果你看这个网页（stack overflow），我的用户名是可以点击的，尝试拖动并 select 它，你不能。现在向上滚动，在你的问题下方，标签是可点击的，尝试拖动并 select 在“flutter”这个词上，你不能...

老实说，对于按钮上的那些文字，也许只是不要让它们 selectable :D

但如果您坚持，SelectableText 小部件上也有 onTap 事件，因此您可以触发与按钮相同的回调，因此用户点击的位置无关紧要。

手势检测：ElevatedButton 内的 SelectableText

Gesture detection: SelectableText inside ElevatedButton

flutter

flutter-web

flutter-widget