#Flutter手势中的 Behavior

Flutter手势中的behavior

前言:本杂文的阅读者需要掌握Flutter界面布局基本技巧,会使用Widget组合界面,否则无法理解下文。

Flutter中的手势事件Widget包括:Listener(监听触摸,鼠标事件),MouseRegion(监听鼠标部分事件) 两大基本类。

我们今天所说的behaivor属性是HitTestBehavior,控制手势点击测试行为。它是一个枚举。

/// How to behave during hit tests.
enum HitTestBehavior {
  /// Targets that defer to their children receive events within their bounds
  /// only if one of their children is hit by the hit test.
  deferToChild,

  /// Opaque targets can be hit by hit tests, causing them to both receive
  /// events within their bounds and prevent targets visually behind them from
  /// also receiving events.
  opaque,

  /// Translucent targets both receive events within their bounds and permit
  /// targets visually behind them to also receive events.
  translucent,
}
  • deferToChild:在子widget中点击测试,有且只有一个子widget测试成功后,表明当前Listener widget点击测试成功,这是默认行为。

  • opaque :Listener 无条件点击测试成功。子Widget 依然会先参与点击测试,所以有整个区域都点击测试成功的现象,点击子Widget没有占据的空白位置时,也会促发Listener手势回调。

  • translucent:

    1. Listener无条件添加到响应链中。
    2. Listener的子Widget 依然会参与点击测试。
    3. 假设
      a . Listener点击测试失败.
      b. Listener还有兄弟Widget.
      c. 且点击位置刚好也在Listener兄弟Widget大小范围内.
      则依次寻找兄弟Widget是否能点击测试成功,此场景也就是Stack 布局了多个Listener 子widget,产生一种点击穿透的现象。上层的Listener设置behaivor为HitTestBehavior. translucent,底层的Listener设置behaivor为HitTestBehavior. deferToChild或者HitTestBehavior.opaque,当点击上层Listener时,有两种情况:
      a.上层Listener的子Widget点击测试成功,则直接返回,只有上层Listener响应。
      b.如果上层Listener的子Widget点击测试失败,比如:点击到了子widget没有占有的“空白位置”,则上层Listener无法点击测试成功,根据Stack的点击测试规则:依次点击测试子widget,直到有子widget点击测试成功。那么下层Listener就有机会参与点击测试,依此类推,那就形成了点击穿透现象。

说明:此处的“空白位置”也就是FlutterChina中第八章中提到的“透明区域”,“透明区域”有些概念模糊。我已提出建议改成 hitTest测试失败的组件,有人说按照“空白位置”的说法,这不是也不对吗,其实不然,hitTest测试失败的组件其实就是指的上层Listener组件,点击测试失败。“空白位置”是在Listener内部范围说的概念,指Listener的子Widget没有占据的范围,解释范围不一样。如果你在Listener内部添加了等大小的透明mask 组件,比如透明的DecoratedBox,但是DecoratedBox点击测试成功,这就无法实现translucent的点击穿透的效果。

附上Listener 点击测试相关源码可以理解更透测:

  @override
  bool hitTest(BoxHitTestResult result, { Offset position }) {
    bool hitTarget = false;
    if (size.contains(position)) {
      hitTarget = hitTestChildren(result, position: position) || hitTestSelf(position);
      if (hitTarget || behavior == HitTestBehavior.translucent)
        result.add(BoxHitTestEntry(this, position));
    }
    return hitTarget;
  }

  @override
  bool hitTestSelf(Offset position) => behavior == HitTestBehavior.opaque;

说明:hitTarget,就是表明是否测试成功。首先得点击Position 在Size范围内。然后优先看子Widget是否点击测试成功,不成功再看hitTestSelf 是否成功,此处就是 behavior == HitTestBehavior.opaque 就返回成功,对应我们所说无条件点击测试成功。
再就是根据hitTarget测试结果判断是否把当前Listener添加到相应链result中,如果hitTarget == false,则判断behavior 是否为 HitTestBehavior.translucent,若是则也添加到响应链中,但是却返回点击测试失败,这就和上面介绍的translucent相符。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容