Flutter：TabBar 没有 TabController

Question

我正在撰写我的移动页面。这样做，我将一个 TabBar 传递给一个名为“FeatureBar”的类。在此功能栏（位于移动页面顶部）内，当页面位于下方的移动页面中时，应显示选项卡面板。

admin_view_mobile.dart：

import 'package:myPckg/generated/i18n.dart';
import 'package:myPckg/widgets/feature_bar/feature_bar.dart';
import 'package:myPckg/widgets/user_list/user_list.dart';
import 'package:myPckg/models/user.dart';
import 'package:myPckg/widgets/app_bar/app_bar.dart';
import 'package:myPckg/widgets/app_drawer/app_drawer.dart';

/// Contains the widgets that will be used for mobile layout of home,
/// portrait and landscape

import 'package:flutter/material.dart';

class AdminMobilePortrait extends StatefulWidget {
  final String title;
  final User appUser;
  final List<Widget> pages;

  AdminMobilePortrait(
      {Key? key,
      required this.title,
      required this.appUser,
      required this.pages})
      : super(key: key);

  @override
  _AdminMobilePortraitState createState() => _AdminMobilePortraitState();
}

class _AdminMobilePortraitState extends State<AdminMobilePortrait>
    with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  late TabController tabController;
  late TabBar tabBar;
  late FeatureBar _featureBar;
  late TextEditingController editorEmailController;

  @override
  void initState() {
    print("uid: " + this.widget.appUser.id);
    tabController = TabController(
        length: this.widget.pages.length, vsync: this, initialIndex: 0);
    print("_tabController set up!!");
    print("_tabController.length: " + tabController.length.toString());
    editorEmailController = TextEditingController();
    super.initState();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    tabBar = TabBar(
      automaticIndicatorColorAdjustment: true,
      controller: tabController,
      tabs: <Widget>[
        Tab(
            text: I18n.of(context)!.admin_section_users_label,
            icon: Icon(Icons.supervised_user_circle)),
        Tab(
          text: I18n.of(context)!.admin_section_organizations_label,
          icon: Icon(Icons.business),
        ),
      ],
    );
    _featureBar = new FeatureBar(
      title: this.widget.title,
      tabBar: tabBar,
    );
    print("_tabBar and _featureBar set up!!");
  }

  @override
  void dispose() {
    print("dispose() of admin_view_mobile called!!!!");
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print("Title in mobile-admin: " + this.widget.title);
    return Scaffold(
      key: _scaffoldKey,
      appBar: PreferredSize(
          preferredSize: const Size.fromHeight(50),
          child: CustomAppBar(
            title: this.widget.title,
          )),
      drawer: AppDrawer(),
      body: Column(
        children: [
          _featureBar,
          TabBarView(
            controller: tabController,
            children: <Widget>[
              Center(child: Text("TabPage 1")),
              Center(child: Text("TabPage 2"))
              //this.widget.pages[0],
              //this.widget.pages[1],
            ],
          ),
        ],
      ),
    );
  }
}

feature_bar.dart：

import 'package:flutter/material.dart';
import 'package:responsive_builder/responsive_builder.dart';

import 'feature_bar_mobile.dart';
import 'feature_bar_tablet.dart';

class FeatureBar extends StatelessWidget {
  final String title;
  final TabBar tabBar = const TabBar(
    tabs: <Widget>[],
  );

  const FeatureBar({Key? key, required this.title, TabBar? tabBar})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScreenTypeLayout(
      mobile: FeatureBarMobile(title: this.title, tabBar: this.tabBar),
      tablet: OrientationLayoutBuilder(
        portrait: (context) => FeatureBarTabletPortrait(title: this.title),
        landscape: (context) => AppBarTabletLandscape(title: this.title),
      ),
    );
  }
}

feature_bar_mobile.dart：

import 'package:flutter/material.dart';

class FeatureBarMobile extends StatelessWidget {
  final String title;
  final TabBar tabBar;
  const FeatureBarMobile({Key? key, required this.title, required this.tabBar})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    try {
      print("tabBar.tabs length in " +
          this.title +
          ": " +
          this.tabBar.controller!.length.toString());
    } catch (e) {
      print(e);
    }
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [Text(this.title), this.tabBar],
    );
  }
}

但它仍然说缺少 TabBar 的 TabController :(

_tabController set up!!
_tabController.length: 2
_tabBar and _featureBar set up!!
Title in mobile-admin: Admin
UserLogin in login-widget: true
Appbar title: Admin
Unexpected null value.
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building FeatureBarMobile:
No TabController for TabBar.
When creating a TabBar, you must either provide an explicit TabController using the "controller"
property, or you must ensure that there is a DefaultTabController above the TabBar.
In this case, there was neither an explicit controller nor a default controller.

The relevant error-causing widget was:
  FeatureBarMobile
  file:///C:/projects/vs%20code/myPckg/lib/widgets/feature_bar/feature_bar.dart:19:15

当我将所有内容放入 admin_view_mobile 时，它​​可以工作，但我想将 TabHeaders 放入 FeatureBar。这是错误的方法还是我只是错过了什么？

Answer 1

您通过构造函数将tabBar 传递给FeatureBar 小部件，但没有使用它。相反，您正在创建一个新的 TabBar 实例：

final TabBar tabBar = const TabBar(
  tabs: <Widget>[],
);

像这样调整feature_bar.dart中的代码：

class FeatureBar extends StatelessWidget {
  final String title;
  final TabBar tabBar;

  const FeatureBar({Key? key, required this.title, required this.tabBar})
      : super(key: key);
  ...
}