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

crcmnpdw  于 2022-11-17  发布在  Flutter
关注(0)|答案(4)|浏览(502)

我需要构建一个带有垂直溢出TabBar项的bottomNavigationBar,所以我尝试使用OverflowBox,它看起来很有用。但还有另一个问题,溢出的部分无法响应按钮。
那么我该怎么做才能让GestureDetector有效呢?或者你有其他的方法来构建一个像这样的bottomNavigationBar?非常感谢!
this is screen capture
这里是总部。达特:

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;
      }
    }
iih3973s

iih3973s1#

试着让你的GestureDetector包裹你的OverflowBox

31moq8wy

31moq8wy2#

在手势检测器上使用此行为,然后用它 Package 溢出。

GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap(){..

)
3bygqnnd

3bygqnnd3#

您应该将StackPositioned小工具一起使用,而不是使用OverflowBox
PS:应避免使用functions that return widget

4dbbbstv

4dbbbstv4#

我可以告诉你原因。OverflowBox部件布局是sizedByParent,所以大小是72。当点击测试时,指针会忽略大小。所以子部件溢出部分无法响应按钮。

相关问题