Flutter - 堆栈内的 TabBarView 内的不可点击按钮

Question

我正在尝试创建一个粘贴在TabBar 下方和屏幕右侧的按钮。我把它放在TabBarView 里面Stack，因为这是我需要的。但无论我做什么，Flutter 都会优先考虑滚动动作而不是按钮点击，这使得按钮无法点击。即使在按钮上，您仍然可以拖动屏幕。我们如何解决这个问题？我需要TabBarView 和粘在那个特定位置的按钮。

使用GestureDetector 或ElevatedButton 代替InkWell 或用AbsorbPointer 包裹其中任何一个都不起作用。

我使用的是 Flutter 版本sdk: ">=2.10.0 <3.0.0"

这是上面 gif 的完整代码：

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: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Test(),
    );
  }
}

class Test extends StatefulWidget {
  const Test({Key key,}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> with SingleTickerProviderStateMixin{
  TabController _tabController;

  @override
  void initState()
  {
    super.initState();
    _tabController = TabController(
      initialIndex: 0,
      length: 2,
      vsync: this,
    );
    _tabController.addListener(_handleTabIndex);
  }
  @override
  void dispose() {
    _tabController.removeListener(_handleTabIndex);
    _tabController.dispose();
    super.dispose();
  }
  void _handleTabIndex() {
    setState(() {});
  }


  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
            preferredSize: const Size(250,40),
            child: Stack(
              children: [
                TabBar(
                  controller: _tabController,
                  onTap: (page) {},
                  tabs: const [
                    Text("tab1"),
                    Text("tab2")
                  ],
                ),
              ],
            ),
          ),
      ),
      body: Stack(
        children: [
          Align(
            alignment: Alignment.topRight,
            child: InkWell(
              onTap: ()
              {
                print("boo");
              },
              child: Container(
                alignment: Alignment.center,
                width: 55,
                height: 31,
                decoration: const BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.only(bottomLeft: Radius.circular(8)),
                ),
                child: const Padding(
                  padding: EdgeInsets.only(bottom: 4),
                  child: Text(
                    "Button",
                    style: TextStyle(
                      fontSize: 11.5,
                    ),
                  ),
                ),
              ),
            ),
          ),
          TabBarView(
            controller: _tabController,
            children: const [
              Center(child: Text("asdf")),
              Center(child: Text("ghjk"))
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

这可能是因为该按钮位于堆栈中 TabBarView 的后面，因此它不会收到点击手势，TabBarView 会收到。

尝试将InkWell 替换为GestureDetector 并将GestureDetector 的behavior 属性设置为HitTestBehavior.translucent

这将使按钮接收点击以及TabBarView 这是translucent的文档

半透明目标都在其范围内接收事件并允许 视觉上的目标在他们身后也接收事件。

现在，两者都应该收到点击手势。