第一步 添加數(shù)據(jù)

List<TabTitle> tabList = [
    new TabTitle('推薦', 10),
    new TabTitle('熱點', 0),
    new TabTitle('社會', 1),
    new TabTitle('娛樂', 2),
    new TabTitle('體育', 3),
    new TabTitle('美文', 4),
    new TabTitle('科技', 5),
    new TabTitle('財經(jīng)', 6),
    new TabTitle('時尚', 7)
];

第二步 完成布局

class HomeState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController mController;
  List<TabTitle> tabList;
  @override
  void initState() {
    super.initState();
    initTabData();
    mController = TabController(
      length: tabList.length,
      vsync: this,
    );
  }
  
  @override
  void dispose() {
    super.dispose();
    mController.dispose();
  }
  
  initTabData() {
    tabList = [
      new TabTitle('推薦', 10),
      new TabTitle('熱點', 0),
      new TabTitle('社會', 1),
      new TabTitle('娛樂', 2),
      new TabTitle('體育', 3),
      new TabTitle('美文', 4),
      new TabTitle('科技', 5),
      new TabTitle('財經(jīng)', 6),
      new TabTitle('時尚', 7)
    ];
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("首頁"),
        backgroundColor: Color(0xffd43d3d),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.all_inclusive),
        backgroundColor: Color(0xffd43d3d),
        elevation: 2.0,
        highlightElevation: 2.0,
        onPressed: () {},
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: new Color(0xfff4f5f6),
            height: 38.0,
            child: TabBar(
              isScrollable: true,
              //是否可以滾動
              controller: mController,
              labelColor: Colors.red,
              unselectedLabelColor: Color(0xff666666),
              labelStyle: TextStyle(fontSize: 16.0),
              tabs: tabList.map((item) {
                return Tab(
                  text: item.title,
                );
              }).toList(),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: mController,
              children: tabList.map((item) {
                return Stack(children: <Widget>[
                  Align(alignment:Alignment.topCenter,child: Text(item.title),),
                ],);
              }).toList(),
            ),
          )
        ],
      ),
    );
  }
}