TabBar и TabView без скаффолда и с фиксированным виджетом - PullRequest
0 голосов
/ 14 июня 2019

Я создал 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);
  }

1 Ответ

1 голос
/ 15 июня 2019

Первый: Добавить это в 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(),
        ]));
  }
}
...