溢出框，溢出的部分无法响应按钮？

Question

我需要构建一个带有垂直溢出TabBar项的bottomNavigationBar，所以我尝试使用OverflowBox，它看起来很有用。但还有另一个问题，溢出的部分无法响应按钮。

那么我应该怎样做才能使GestureDetector生效？或者你还有其他方法来构建这样的bottomNavigationBar？非常感谢你！

this is screen capture

这是main.dart：

    import 'package:flutter/material.dart';

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

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

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

      final String title;

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

    List<Color> _colors = [
      Colors.blue,
      Colors.green,
      Colors.yellow,
    ];

    class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
      String _tip = "";
      TabController controller;
      @override
      Widget build(BuildContext context) {

        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new TabBarView(
                controller: controller,
                children: <Widget>[
                  new Center(child: new Text("page 1")),
                  new Center(child: new Text("page 2")),
                  new Center(child: new Text("page 3")),
                ],
              ),
          bottomNavigationBar: new Container(
            height: 72.0,
            alignment: Alignment.bottomCenter,
            color: const Color.fromRGBO(45, 45, 45, 1.0),
            child: new TabBar(
              controller: controller,
              indicatorWeight: 0.01,
              tabs: <Widget>[
                _getBarItem(0),
                _getBarItem(1),
                _getBarItem(2),
              ],
            ),
          ),
        );
      }
      @override
      void initState() {
        super.initState();
        controller = new TabController(length: 3, vsync: this);
      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
      Widget _getBarItem(int idx){
        Widget ret = new Container(
          width: 80.0,
          height: idx==1?120.0:50.0,
          color: _colors[idx],
        );
        if(idx==1){
          ret = new OverflowBox(
            maxHeight: double.infinity,
            alignment: Alignment.bottomCenter,
            child: new Container(
              color: Colors.black,
              child: new GestureDetector(
                onTapDown: (x){
                  controller.animateTo(idx);
                },
                child: ret,
              ),
            ),
          );
        }
        return ret;
      }
    }

Answer 1

尝试让你的GestureDetector包裹你的OverflowBox