时间戳

首页 > 解决方案 > Flutter：带有其他小部件的 TabBar

flutter - Flutter：带有其他小部件的 TabBar

问题描述

如何将 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。请告诉我如何正确地做。

截屏

标签： flutter

解决方案

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

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

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

推荐阅读