【问题标题】:How do I allow gestures to pass through a widget in a stack?如何允许手势通过堆栈中的小部件?
【发布时间】:2020-11-16 10:17:35
【问题描述】:

请看下面的代码示例,或者直接运行here

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Material(
          child: Stack(
            children: [
              Center(
                child: MaterialButton(
                  color: Colors.white,
                  child: Icon(Icons.ac_unit),
                  onPressed: () => print('pressed'),
                ),
              ),
              CustomScrollWidget()
            ],
          ),
        ),  
      );
}

class CustomScrollWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: MediaQuery.of(context).size.height,
            flexibleSpace: FlexibleSpaceBar(
              title: const Center(child: Text('scroll me')),
            ),
          ),
          const SliverFillRemaining(),
        ],
      );
}

如何允许手势通过堆栈中的小部件?

AFAIK 设置 GestureDetectorHitTestBehavior 只会影响孩子, 所以不应该在Stack 中工作,知道吗?

请注意,here 提供的“解决方案”(12)不起作用

【问题讨论】:

标签: flutter stack gesture


【解决方案1】:

这不是一个很好的解决方案,但它确实有效:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Material(
          child: Stack(
            children: [
              Center(
                child: MaterialButton(
                  color: Colors.white,
                  child: Icon(Icons.ac_unit),
                  onPressed: () {},
                ),
              ),
              CustomScrollWidget(),
              Center(
                child: MaterialButton(
                  elevation: 0.0,
                  hoverColor: Colors.transparent,
                  hoverElevation: 0.0,
                  onPressed: () => print('pressed'),
                ),
              ),
            ],
          ),
        ),  
      );
}

class CustomScrollWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: MediaQuery.of(context).size.height,
            flexibleSpace: FlexibleSpaceBar(
              title: const Center(child: Text('scroll me')),
            ),
          ),
          const SliverFillRemaining(),
        ],
      );
}

【讨论】:

  • 除了有一个“不可见”按钮漂浮在标题中间i.stack.imgur.com/lS3zc.png 该按钮纯粹是代表问题是缺少选项(AFAIK)来允许手势通过实体小部件
  • 在我的模拟器中没有可见的按钮,除非用户将鼠标悬停在它上面,如果对您有帮助,请将答案标记为已接受?
  • 我一直在悬停它,这就是重点,这不是解决方案,也许是一种解决方法,但我不推荐
  • 如果这让您感到不安,您可以让 hoverColor 透明,但目前,正如您在此处看到的 (github.com/flutter/flutter/issues/47119),没有其他解决方案
  • 首先你不是一个解决方案,充其量是一种解决方法,其次我不会采用它或花任何时间改进这种方法
猜你喜欢
  • 1970-01-01
  • 2023-04-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-29
  • 2021-12-18
  • 2021-10-11
相关资源
最近更新 更多