如何修复多个小部件使用相同的 GlobalKey？

Question

我正在使用底部导航栏，而在里面我正在使用标签栏。但是标签栏有交换行为。我想禁用交换行为。所以，我使用了NeverScrollableScrollPhysics但这显示了一个错误。错误是Multiple widgets used the same GlobalKey。我为每个标签栏视图项提供了不同的键，但同样的问题出现了。 这是我的代码：

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),
        ),
      ],
    ),
  ),

);
}

这里是错误：

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.

Answer 1

我尝试运行您提供的代码 sn-p。但是，我没有遇到您发布的任何错误。这似乎已根据 GitHub thread 共享解决。

这是我的 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

代码运行没有问题。正如您所提到的，页面的滑动被禁用，当页面转换到不同的页面时，仍然有一个“交换”动画。

至于页面动画。我认为没有办法在TabBarView 上禁用过渡动画。作为一种解决方法，您可以使用Container，它会根据所选的选项卡返回不同的页面。我已经替换了您在此示例中使用并在页面上即兴创作的 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"),
        ),
      );
}

演示