代码之家 › 专栏 › 技术社区 › Sana Ebadi

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

tabview tabbar flutter

Sana Ebadi · 技术社区 · 6 年前

我创造了 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;
  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);
  }

0 回复 | 直到 6 年前

Jay 6 年前

第一: 将其添加到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(),
        ]));
  }
}