flutter · AppBar-tabbar

入口文件 main.dart 如下

import 'package:flutter/material.dart';
void main() {
    runApp(new MyApp());
}
class MyApp extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
      return Material(
      tilte: 'Flutter Demo',
      theme: new ThemeData(),
      home: Text('这里是demo'),
      debugShowCheckedModeBanner: false,
    );
  }
}

lib 文件夹下新建 appbar.dart 文件

按照惯例 引入 material

import 'package:flutter/material.dart';
class AppBarTabHome extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
      return Text('这里是 AppBarTab页');
  }
}

当基础文件写好后，我们首先先通过UI图查看数据结构，拥有一个 tilte 和 icon
所以我们定义 tab 的选项 Choice

//...
class Choice {
    final String title;
  final IconData icon;
  const Choice({ this.title, this.icon });
}
const List<Choice> choices = [
  Choice(title: 'Car', icon: Icons.directions_car),
  Choice(title: 'Bick', icon: Icons.directions_bike),
  Choice(title: 'Boat', icon: Icons.directions_boat),
  Choice(title: 'Bus', icon: Icons.directions_bus),
  Choice(title: 'Train', icon: Icons.directions_train),
  Choice(title: 'Walk', icon: Icons.directions_walk),
  Choice(title: 'Ferry', icon: Icons.directions_ferry),
  Choice(title: 'Railway', icon: Icons.directions_railway),
  Choice(title: 'Subway', icon: Icons.directions_subway),
];

接下来我们要构造 Tab 控制的页面了，用到 Material 中的 DefaultTabController
修改 我们的 AppBarTabHome 类，实现基本结构

import 'package:flutter/material.dart';
class AppBarTabHome extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
      return DefaultTabController(
      length: choices.length,
        child: Scaffold(
          appBar: AppBar(
          title: Text('Tab AppBar'),
          bottom: TabBar(
            tabs: []
          ),
        ),
        body: TabBarView(
          children: [],
        ),
      ),
    );
  }
}

我们根据 choices 生成我们需要的 ChoiceCard 组件和 Tab 组件

class ChoiceCard extends StatelessWidget {
    final Choice choice;
  const ChoiceCard({ Key key, this.choice }):super(key: key);
  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
      return Card(
      child: Center(
          child: Column(
          mainAxisAligment: MainAxisAligment.center,
          crossAxisAligment: CrossAxisAligment.center,
          mainAxisSize: MainAxisSize.min,
            children: <Widget>[
                Icon(choice.icon, size: 128.0, color: textStyle.color),
            Text(choice.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}
//...
tabs: choices.map((Choice choice) {
    return Tab(text: choice.title, icon: Icon(choice.icon));
}).toList(),
//...
body: TabBarView(
    children: choices.map((Choice choice) {
      return ChoiceCard(choice)
  }).toList(),
),

保存后一看， 诶？这个 tabbar 怎么都挤成一团了？

原来的是可以滑动的，那么我们直接查看 Tabbar 类，可以看到有一个 isScrollable 属性，默认为 false ，我们将其设置为 true 即可。