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。请告诉我怎么做是的。

screenshot

Answer 1

问题是在build方法中返回的窗口小部件未排列到布局中。您可以只返回TabBar和TabBarView。它们应布置在Column或Row之类的布局中。或者只是您可以使用脚手架。您可以将TabBar作为Bottom的{{1}}小部件，而将Appbar作为支架的主体。

看看这个完整的示例及其排列方式。

TabBarView

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

Flutter：TabBar和其他小部件

2 个答案: