dart - OverflowBox,溢出的部分无法响应按钮?

标签 dart flutter

我需要建一个bottomNavigationBar,带有一个垂直溢出的TabBar item, 所以我尝试使用 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;
      }
    }

最佳答案

尝试让你的GestureDetector包裹你的OverflowBox

关于dart - OverflowBox,溢出的部分无法响应按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52135387/

相关文章:

android - 如何使用 Flutter 更改应用显示名称构建?

dart - 如何使用angular2_material Dart

flutter - 如何将 Future<List> 返回类型分配给变量?

android - 是否可以在 flutter 应用程序关闭时通过平台 channel 从 android 后台服务向 flutter 端发送消息

dart - 为什么不触发 keydown 事件?

flutter - 如何使容器可点击,以及如何在单击时导致其他页面 flutter

android - 如何在抖动中更新屏幕

error-handling - 禁用 Flutter 的 "red screen of death"

flutter - Flutter:外部小部件的setState

flutter - 如何防止用户在 Flutter 中共享下载的文件