我需要构建一个带有垂直溢出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;
}
}
4条答案
按热度按时间iih3973s1#
试着让你的
GestureDetector
包裹你的OverflowBox
31moq8wy2#
在手势检测器上使用此行为,然后用它 Package 溢出。
3bygqnnd3#
您应该将Stack与Positioned小工具一起使用,而不是使用OverflowBox。
PS:应避免使用functions that return widget。
4dbbbstv4#
我可以告诉你原因。OverflowBox部件布局是sizedByParent,所以大小是72。当点击测试时,指针会忽略大小。所以子部件溢出部分无法响应按钮。