Question

我创建了TabBar，但没有Appbar和Scaffold，并且固定了主题上方的小部件。现在，当我添加TabBarView时，tabs中什么也没有显示，所以我创建了从Index获取TabController并应显示标签的方法。但是我什么也看不到：

 @override
  Widget build(BuildContext context) {
    return Material(
        color: Theme.of(context).backgroundColor,
        child: ListView(children: <Widget>[
          Container(
            height: 320,
            child: new Carousel(
              boxFit: BoxFit.cover,
              images: [
                photoUrl != null
                    ? NetworkImage(photoUrl)
                    : NetworkImage(photoUrl),
              ],
              autoplay: true,
              dotSize: 6,
              indicatorBgPadding: 10,
              dotColor: Theme.of(context).backgroundColor,
              dotBgColor: Theme.of(context).scaffoldBackgroundColor,
              animationCurve: Curves.fastOutSlowIn,
              animationDuration: Duration(microseconds: 1000),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child:
                      Text(name, style: Theme.of(context).textTheme.headline),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(8, 4, 0, 6),
                  child:
                      Text(subtitle, style: Theme.of(context).textTheme.body2),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(3, 8, 3, 4),
            child: Divider(),
          ),
          TabBar(
            indicatorColor: Theme.of(context).primaryColor,
            labelColor: Theme.of(context).buttonColor,
            labelStyle: Theme.of(context).textTheme.headline,
            unselectedLabelColor: Theme.of(context).splashColor,
            controller: _tabController,
            tabs: tabs.map((e) => Tab(text: e)).toList(),
          ),
          _tabsContent(),
        ]));
  }

方法_tabsContent（）：

  _tabsContent() {
    if (_tabController.index == 0) {
      return MenuTab();
    } else if (_tabController.index == 1) {
      return AboutTab(cuisines, dayOfWeek, start, end, desc);
    } else if (_tabController.index == 2) {
      return ContactTab(
          website,
          email,
          workPhone,
          cellPhone,
          info,
          address1,
          address2,
          address3,
          city,
          country,
          state,
          zipCode,
          latitude,
          longitude,
          socialId,
          socialName,
          url,
          thumbnailsImage);
    }
  }

TABCONTROLLER：

TabController _tabController;
  List tabs;

  @override
  void dispose() {
    SystemChrome.restoreSystemUIOverlays();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIOverlays([]);
    tabs = ['Menu', 'About', 'Contact'];
    _tabController = TabController(length: tabs.length, vsync: this);
  }

Answer 1

首先：将其添加到initState（）

_tabController.addListener(_handleTabControllerTick);

第二：创建方法

void _handleTabControllerTick() {
    setState(() {
      _currentIndex = _tabController.index;
    });
  }

第三：将其更改为：

_tabsContent() {
    if (_currentIndex == 0) {
      return Container( child: Text("Menu Tab"));
    } else if (_currentIndex == 1) {
      return Container( child: Text("About Tab"));
    } else if (_currentIndex == 2) {
      return Container( child: Text("Contact Tab"));
    }
  }

还请确保您的_tabsContent（）返回了正确的内容。

尝试下面的代码

import 'package:flutter/material.dart';

class testing extends StatefulWidget {
  @override
  _testingState createState() {
    return _testingState();
  }
}

class _testingState extends State<testing> with SingleTickerProviderStateMixin {

  TabController _tabController;
  List tabs;
  int _currentIndex = 0;

  @override
  void dispose() {

    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();

    tabs = ['Menu', 'About', 'Contact'];
    _tabController = TabController(length: tabs.length, vsync: this);
    _tabController.addListener(_handleTabControllerTick);
  }


  void _handleTabControllerTick() {
    setState(() {
      _currentIndex = _tabController.index;
    });
  }


  _tabsContent() {
    if (_currentIndex == 0) {
      return Container( child: Text("Menu Tab"));
    } else if (_currentIndex == 1) {
      return Container( child: Text("About Tab"));
    } else if (_currentIndex == 2) {
      return Container( child: Text("Contact Tab"));
    }
  }


  @override
  Widget build(BuildContext context) {
    return Material(
        color: Theme.of(context).backgroundColor,
        child: ListView(children: <Widget>[
          Container( child: Text("Header")),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child:
                  Text("Name", style: Theme.of(context).textTheme.headline),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(8, 4, 0, 6),
                  child:
                  Text("Subtitle", style: Theme.of(context).textTheme.body2),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(3, 8, 3, 4),
            child: Divider(),
          ),
          TabBar(
            indicatorColor: Theme.of(context).primaryColor,
            labelColor: Theme.of(context).buttonColor,
            labelStyle: Theme.of(context).textTheme.headline,
            unselectedLabelColor: Theme.of(context).splashColor,
            controller: _tabController,
            tabs: tabs.map((e) => Tab(text: e)).toList(),
          ),
          _tabsContent(),
        ]));
  }
}

不带脚手架和固定小部件的TabBar和TabView

1 个答案: