Flutter：如何让手指在屏幕侧边框处停止算作触摸？

Question

我有一个儿童应用程序，可以显示他们需要触摸才能播放声音的图片。图像居中，占据大约 85% 的宽度。对我 3 岁儿子的测试表明，他握持手机的方式最终会在屏幕边缘产生触摸，从而使图像上的真正触摸不起作用。 我正在使用 inkwell 组件来获取触摸事件。 我认为解决这个问题的一种方法是在进行多点触摸时仅计算最后一次触摸的次数。我实际上不确定。如果有办法仍然使用墨水池来解决这个问题那就太好了。

Answer 1

多点触控期间最后一次触摸的想法是可行的，但它也需要处理一些极端情况。

相反，

Image

小部件可以占据宽度的85％，并且在这个

Image

小部件内部，您可以放置一个透明的

InkWell

小部件，它将响应触摸。请看下面的图片以便更好地理解：

这是一个简单的示例，您可以修改它来调整活动区域和非活动区域之间的间隙：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    final imageWidth = screenWidth * 0.85;
    final imageHeight = screenHeight * 0.85;

    return Scaffold(
      appBar: AppBar(
        title: Text('Image InkWell Demo'),
      ),
      body: Center(
        child: Container(
          width: imageWidth,
          height: imageHeight,
          decoration: const BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'), // Replace with your image asset
            ),
          ),
          child: Center(
            child: Container(
              width: imageWidth * 0.60,
              height: imageHeight * 0.60,
              decoration: const BoxDecoration(
                color: Colors.transparent,
              ),
              child: InkWell(
                onTap: () {
                  print('InkWell tapped!');
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}