Question

玩Flutter，我试图用多个元素进行一次触摸交互。但是我的手势只在第一个Container中触发。

有没有办法使用GestureDetector或Listener类来做到这一点？

我的意思是，有没有比在父元素上设置Listener更好的解决方案，并计算当前触摸指针位置是否在我想识别触摸事件的子元素的坐标之间？

这是一个代码示例，用于说明我正在处理的问题。水平滑动，我想在Row中选择所有TapBox元素。

import 'package:flutter/material.dart';

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

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

class TapBox extends StatefulWidget {
  TapBox({Key key, this.bgColor}) : super(key: key);
  Color bgColor;

  @override
  _TapBoxState createState() => new _TapBoxState();
}

class _TapBoxState extends State<TapBox> {
  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: new EdgeInsets.only(left: 10.0, right: 10.0),
      child: new GestureDetector(
        onPanUpdate: ((e) {
          this.setState(() {
            widget.bgColor = Colors.blueAccent;
          });
        }),
        onPanStart: ((e) {
          this.setState(() {
            widget.bgColor = Colors.blueAccent;
          });
        }),
        child: new Container(
          width: 50.0,
          height: 200.0,
          color: widget.bgColor,
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TapBox(bgColor: Colors.grey),
            new TapBox(bgColor: Colors.grey),
            new TapBox(bgColor: Colors.grey),
            new TapBox(bgColor: Colors.grey),
            new TapBox(bgColor: Colors.grey),
          ],
        ),
      ),
    );
  }
}

单点触摸移动中的多个容器交互

0 个答案: