flutter - 无法在 TabBar 中显示 Tabview，并链接内容

Question

我需要一些帮助在我的代码中实现 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"),
        ])

    );
  }
}

应用栏.dart

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);
}

标签： flutter

Answer 1

您只需要包装Scaffoldwith DefaultTabController，因此 theTabBar和 theTabBarView都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"),
    ]));
  }
}

应用栏.dart

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);
}