Flutter 无法在选项卡栏中显示选项卡视图并链接内容

我需要一些帮助在我的代码中实现TabView。我已经创建了两个独立的类，一个使用defaultTabController和TabBar，另一个使用TabView。在我的Scaffold中，我只能让它显示我的TabBar，但我无法找出如何将内容链接到选项卡。任何帮助都将不胜感激

import 'package:anestesi_v1/shared/drawer.dart';
import "package:flutter/material.dart";
import 'package:anestesi_v1/shared/appbar.dart';


class BarneAnestesi extends StatelessWidget {
  static const String routeName ='/BarneAnestesi';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ApplicationToolbar(),

      backgroundColor: Colors.white,
      drawer: MyDrawer(),

      body: barnTab(),
      extendBody: barnTabView(),

    );
  }
}
class barnTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: DefaultTabController(
        length: 2,

        child: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.child_care, color: Colors.white,)),
            Tab(icon: Icon(Icons.article, color: Colors.white,)),
          ],

        ),),

    );

  }
}

class barnTabView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: TabBarView(children: <Widget>[
          Text("Test1"),
          Text("Test2"),
        ])

    );
  }
}

import'包：anestesi_v1/shared/drawer.dart'；
进口“包装：颤振/材料.省道”；
导入“package:anestesi_v1/shared/appbar.dart”；
类BarneAnestsi扩展了无状态小部件{
静态常量字符串routeName='/BarneAnestesi'；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:ApplicationToolbar（），
背景颜色：Colors.white，
抽屉：MyDrawer（），
正文：barnTab（），
extendBody:barnTabView（），
);
}
}
类barnTab扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
颜色：颜色，红色，
子级：DefaultTabController(
长度：2，
孩子：TabBar(
选项卡：[
选项卡（图标：图标（Icons.child\u care，颜色：Colors.white，），
选项卡（图标：图标（Icons.article，颜色：Colors.white，），
],
),),
);
}
}
类barnTabView扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
子项：选项卡视图（子项：[
文本（“测试1”），
文本（“测试2”），
])
);
}
}

飞镖

import 'package:flutter/material.dart';


class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('Ane'),
      backgroundColor: Colors.red[600],
      centerTitle: false,

      actions: <Widget> [
        FlatButton.icon(
          icon: Icon(Icons.person, color:Colors.white,),
          label: Text('Logg ut',),
          textColor: Colors.white,


        ),
        FlatButton.icon(
          icon: Icon(Icons.settings, color:Colors.white,),
          label: Text("Innstillinger"),
          textColor: Colors.white,

        )
      ],);
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

import 'package:flutter/material.dart';


class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('Ane'),
      backgroundColor: Colors.red[600],
      centerTitle: false,
      // add here the TabBar widget
      bottom: TabBar(
        tabs: [
          Tab(
              icon: Icon(
            Icons.child_care,
            color: Colors.white,
          )),
          Tab(
              icon: Icon(
            Icons.article,
            color: Colors.white,
          )),
        ],
      ),
      actions: <Widget> [
        FlatButton.icon(
          icon: Icon(Icons.person, color:Colors.white,),
          label: Text('Logg ut',),
          textColor: Colors.white,


        ),
        FlatButton.icon(
          icon: Icon(Icons.settings, color:Colors.white,),
          label: Text("Innstillinger"),
          textColor: Colors.white,

        )
      ],);
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

导入“包装：颤振/材料.省道”；
类ApplicationToolbar使用PreferredSizeWidget扩展无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回AppBar(
标题：文本（“Ane”），
背景颜色：颜色。红色[600]，
标题：错误，
行动：[
FlatButton.icon(
图标：图标（Icons.person，颜色：Colors.white，），
标签：文本（'Logg ut'，），
textColor:Colors.white，
),
FlatButton.icon(
图标：图标（Icons.settings，颜色：Colors.white，），
标签：文本（“Innstillinger”），
textColor:Colors.white，
)
],);
}
@凌驾
Size get preferredSize=>Size.fromHeight（kToolbarHeight）；
}

您只需使用

DefaultTabController

包装

Scaffold

，这样

TabBar

和

TabBarView

都位于小部件树中的

DefaultTabController

下方

import 'package:anestesi_v1/shared/drawer.dart';
import "package:flutter/material.dart";
import 'package:anestesi_v1/shared/appbar.dart';

class BarneAnestesi extends StatelessWidget {
  static const String routeName = '/BarneAnestesi';
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: ApplicationToolbar(),
        backgroundColor: Colors.white,
        drawer: MyDrawer(),
        body: barnTabView(),
      ),
    );
  }
}


class barnTabView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: TabBarView(
      children: <Widget>[
      Text("Test1"),
      Text("Test2"),
    ]));
  }
}

import'包：anestesi_v1/shared/drawer.dart'；
进口“包装：颤振/材料.省道”；
导入“package:anestesi_v1/shared/appbar.dart”；
类BarneAnestsi扩展了无状态小部件{
静态常量字符串routeName='/BarneAnestesi'；
@凌驾
小部件构建（构建上下文）{
返回DefaultTabController(
长度：2，
孩子：脚手架(
appBar:ApplicationToolbar（），
背景颜色：Colors.white，
抽屉：MyDrawer（），
正文：barnTabView（），
),
);
}
}
类barnTabView扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
子项：选项卡视图(
儿童：[
文本（“测试1”），
文本（“测试2”），
]));
}
}

飞镖

import 'package:flutter/material.dart';


class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('Ane'),
      backgroundColor: Colors.red[600],
      centerTitle: false,

      actions: <Widget> [
        FlatButton.icon(
          icon: Icon(Icons.person, color:Colors.white,),
          label: Text('Logg ut',),
          textColor: Colors.white,


        ),
        FlatButton.icon(
          icon: Icon(Icons.settings, color:Colors.white,),
          label: Text("Innstillinger"),
          textColor: Colors.white,

        )
      ],);
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

import 'package:flutter/material.dart';


class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('Ane'),
      backgroundColor: Colors.red[600],
      centerTitle: false,
      // add here the TabBar widget
      bottom: TabBar(
        tabs: [
          Tab(
              icon: Icon(
            Icons.child_care,
            color: Colors.white,
          )),
          Tab(
              icon: Icon(
            Icons.article,
            color: Colors.white,
          )),
        ],
      ),
      actions: <Widget> [
        FlatButton.icon(
          icon: Icon(Icons.person, color:Colors.white,),
          label: Text('Logg ut',),
          textColor: Colors.white,


        ),
        FlatButton.icon(
          icon: Icon(Icons.settings, color:Colors.white,),
          label: Text("Innstillinger"),
          textColor: Colors.white,

        )
      ],);
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

导入“包装：颤振/材料.省道”；
类ApplicationToolbar使用PreferredSizeWidget扩展无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回AppBar(
标题：文本（“Ane”），
背景颜色：颜色。红色[600]，
标题：错误，
//在这里添加TabBar小部件
底部：选项卡栏(
选项卡：[
标签(
图标：图标(
3.儿童保育，
颜色：颜色，白色，
)),
标签(
图标：图标(
图标.article，
颜色：颜色，白色，
)),
],
),
行动：[
FlatButton.icon(
图标：图标（Icons.person，颜色：Colors.white，），
标签：文本（'Logg ut'，），
textColor:Colors.white，
),
FlatButton.icon(
图标：图标（Icons.settings，颜色：Colors.white，），
标签：文本（“Innstillinger”），
textColor:Colors.white，
)
],);
}
@凌驾
Size get preferredSize=>Size.fromHeight（kToolbarHeight）；
}

我已经尝试过这个解决方案。但是我在extendBody参数上出错了。这是错误的论点吗？我会在一分钟内更新我的答案。TabBar视图分配给body参数，TabBar需要在AppBar小部件“bottom”属性内分配。这应该适用于您。我使用的是自定义AppBar，“bottom”参数在我将TabBar指定给body参数之前给了我错误。我将在mainpost中添加我的appbar代码。它不会给你一个错误，因为现在“DefaultTabController”位于小部件树的顶部。我已经将它添加到了第一篇文章中。它在柱子的底部。