[英]How to fix Multiple widgets used the same GlobalKey?
I am using bottom navigation bar and inside I am using tab bar.我使用底部导航栏,里面我使用标签栏。 But the tab bar have swapping behavior.但是标签栏有交换行为。 I want to disable swapping behavior.我想禁用交换行为。 So, I used NeverScrollableScrollPhysics
But this showing an error.所以,我使用了NeverScrollableScrollPhysics
但这显示了一个错误。 The error is Multiple widgets used the same GlobalKey
.错误是Multiple widgets used the same GlobalKey
。 I gave different keys for each tab bar view item but the same problem comes.我为每个标签栏视图项提供了不同的键,但出现了同样的问题。 Here is my code:这是我的代码:
Widget build(BuildContext context) {
return new Scaffold(
key: _homeScaffoldKey,
body: new TabBarView(
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
new page1(),
new page2(),
new page3(),
new page4(),
],
controller: tabController,
),
bottomNavigationBar: new Material(
color: Colors.blue,
child: new TabBar(
isScrollable: true,
indicatorColor: Color.fromRGBO(255, 25, 255, 0.0),
controller: tabController,
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.accessibility),
),
new Tab(
icon: new Icon(Icons.accessibility),
),
new Tab(
icon: new Icon(Icons.accessibility),
),
new Tab(
new Icon(Icons.accessibility),
),
],
),
),
);
}
Here is error:这是错误:
I/flutter (26947): Another exception was thrown: NoSuchMethodError: The method 'dispose' was called on null.
I/flutter (26947): Another exception was thrown: Multiple widgets used the same GlobalKey.
I/flutter (26947): Another exception was thrown: Multiple widgets used the same GlobalKey.
I/flutter (26947): Another exception was thrown: NoSuchMethodError: The method 'dispose' was called on null.
I tried running the code snippet you've provided.我尝试运行您提供的代码片段。 However, I didn't encounter any errors from the one you've posted.但是,我没有遇到您发布的错误中的任何错误。 This seems to have been resolved per the GitHub thread shared.这似乎已根据共享的GitHub 线程解决。
Here's my flutter doctor
logs这是我的flutter doctor
日志
[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.7 19H2, locale en-PH)
• Flutter version 1.22.2
• Framework revision 84f3d28555 (8 days ago), 2020-10-15 16:26:19 -0700
• Engine revision b8752bbfff
• Dart version 2.10.2
The code runs without issues.代码运行没有问题。 Swiping of pages is disabled as you've mentioned, and there's still a "swapping" animation when the pages transitions to a different page.正如您所提到的,页面的滑动被禁用,当页面转换到不同的页面时,仍然有一个“交换”动画。
As for the page animations.至于页面动画。 I don't think there's a way to disable the transition animation on TabBarView
.我认为没有办法禁用TabBarView
上的过渡动画。 As a workaround, you can use a Container
that'll return different pages depending on the tab selected.作为一种解决方法,您可以使用一个Container
,它会根据所选的选项卡返回不同的页面。 I've replaced the TabBarView
that you've used in this sample and improvised on the pages.我已经替换了您在本示例中使用的TabBarView
,并在页面上即兴创作。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
tabController = TabController(length: 4, vsync: this);
}
var _homeScaffoldKey = Key("Scaffold Key");
var tabController;
var currentPage = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _homeScaffoldKey,
body: _getCustomContainer(),
bottomNavigationBar: new Material(
color: Colors.blue,
child: new TabBar(
isScrollable: true,
indicatorColor: Color.fromRGBO(255, 25, 255, 0.0),
controller: tabController,
onTap: (value) {
setState(() {
currentPage = value;
});
},
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.accessibility),
),
new Tab(
icon: new Icon(Icons.accessibility),
),
new Tab(
icon: new Icon(Icons.accessibility),
),
new Tab(
icon: new Icon(Icons.accessibility),
),
],
),
),
);
}
_getCustomContainer() {
switch (currentPage) {
case 0:
return page1();
case 1:
return page2();
case 2:
return page3();
case 3:
return page4();
}
}
page1() => Container(
color: Colors.redAccent,
child: Center(
child: Text("Page 1"),
),
);
page2() => Container(
color: Colors.greenAccent,
child: Center(
child: Text("Page 2"),
),
);
page3() => Container(
color: Colors.blueAccent,
child: Center(
child: Text("Page 3"),
),
);
page4() => Container(
color: Colors.yellowAccent,
child: Center(
child: Text("Page 4"),
),
);
}
Demo演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.