Flutter Ui 实验室（五）Tabbar和其他按钮在同一行

QQ群里有人问如下的效果怎么实现？大体就是Tabbar和其他按钮怎么在同一行显示，而且Tabbar的数量是根据服务器返回来确定的。

image.png

其实实现起来也很简单，又是Row控件发挥作用的时候了。

首先，通过menu按钮来模拟从服务器取得Tabbar的数量，没有取得Tabbar的数量前，使用Container占位。

image.png

取得Tabbar的数量后，再构造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(),
            )
          ],
        ),
      ),
    );
  }
}