Flutter：带有其他小部件的 TabBar

Question

如何将 TabBar 与其他小部件一起插入？

我有一个带有 NavigationBar 的“菜单页面”和一个带有其他小部件的页面，用于我尝试制作 TabBar 的“菜单页面”。 当我尝试返回 TabBarView 时，我有死代码。

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
Tab(text: 'Наборы'),
Tab(text: 'Роллы'),
Tab(text: 'Суши'),
Tab(text: 'Сашими'),
Tab(text: 'Онигири'),
Tab(text: 'Ланчи'),
Tab(text: 'WOK'),
Tab(text: 'Напитки'),
Tab(text: 'Другое'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return
    TabBar(
          isScrollable: true,
          unselectedLabelColor: Colors.grey,
          labelColor: Colors.black,
          indicatorColor: Colors.black,
          controller: _tabController,
          tabs: myTabs,
      );
    TabBarView(
      controller: _tabController,
      children: myTabs.map((Tab tab) {
        final String label = tab.text.toLowerCase();
        return Center(
          child: Text(
            'This is the $label tab',
            style: const TextStyle(fontSize: 36),
          ),
        );
      }).toList(),
    );
  }
}

我看到 TabBar 但我没有看到 TabBarView。 请告诉我如何正确地做。

截屏

Answer 1

问题是 build 方法中返回的小部件没有排列到布局中。 您可以只返回TabBar和TabBarView 。 它们应该排列在像Column或Row这样的布局内。 或者干脆你可以使用脚手架。 您可以将TabBar作为TabBarView的Bottom小部件， Appbar作为脚手架的主体。

看看这个完整的例子以及它们是如何排列的。

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

试试这个方法

 @override
  Widget build(BuildContext context) {
    return Column(
         children: <Widget> [
           TabBar(
               isScrollable: true,
               unselectedLabelColor: Colors.grey,
               labelColor: Colors.black,
               indicatorColor: Colors.black,
               controller: _tabController,
               tabs: myTabs,
           ),
           TabBarView(
               controller: _tabController,
               children: myTabs.map((Tab tab) {
                    final String label = tab.text.toLowerCase();
                    return Center(
                         child: Text('This is the $label tab',
                                style: const TextStyle(fontSize: 36),),
                               );
                         }).toList(),
            )
         ]
    )