QQ群里有人問如下的效果怎么實現(xiàn)？大體就是Tabbar和其他按鈕怎么在同一行顯示，而且Tabbar的數(shù)量是根據(jù)服務器返回來確定的。

image.png

其實實現(xiàn)起來也很簡單，又是Row控件發(fā)揮作用的時候了。

首先，通過menu按鈕來模擬從服務器取得Tabbar的數(shù)量，沒有取得Tabbar的數(shù)量前，使用Container占位。

image.png

取得Tabbar的數(shù)量后，再構造Tabbar。

完整的代碼如下：

import 'package:flutter/material.dart';

class CustomTabbar extends StatefulWidget {
  @override
  _CustomTabbarState createState() => _CustomTabbarState();
}

class _CustomTabbarState extends State<CustomTabbar>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  bool _getDataFromServer = false;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
  }

  Widget _getTabbar() {
    if (_getDataFromServer) {
      if (_tabController == null) {
        _tabController = TabController(length: 6, vsync: this);
      }
      return Expanded(
        child: TabBar(
          controller: _tabController,
          indicatorColor: Colors.blueAccent,
          labelColor: Colors.blueAccent,
          isScrollable: true,
          tabs: <Widget>[
            Tab(
              text: 'tab 1',
              icon: Icon(Icons.directions_bike),
            ),
            Tab(
              text: 'tab 2',
              icon: Icon(Icons.directions_boat),
            ),
            Tab(
              text: 'tab 3',
              icon: Icon(Icons.directions_bus),
            ),
            Tab(
              text: 'tab 4',
              icon: Icon(Icons.directions_bus),
            ),
            Tab(
              text: 'tab 5',
              icon: Icon(Icons.directions_bus),
            ),
            Tab(
              text: 'tab 6',
              icon: Icon(Icons.directions_bus),
            ),
          ],
        ),
      );
    } else {
      return Expanded(
        child: Container(),
      );
    }
  }

  Widget _getTabview() {
    if (_getDataFromServer) {
      return TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(child: Text('自行車')),
          Center(child: Text('船')),
          Center(child: Text('巴士')),
          Center(child: Text('巴士2')),
          Center(child: Text('巴士3')),
          Center(child: Text('巴士4')),
        ],
      );
    } else {
      return Container();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Tabbar'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Container(
              alignment: Alignment.topLeft,
              child: Row(
                children: <Widget>[
                  _getTabbar(),
                  IconButton(
                    icon: Icon(Icons.menu),
                    onPressed: () {
                      setState(() {
                        _getDataFromServer = !_getDataFromServer;
                      });
                    },
                  )
                ],
              ),
            ),
            Container(
              height: 300.0,
              child: _getTabview(),
            )
          ],
        ),
      ),
    );
  }
}