Flutter设置顶部tabs

顶部tabs切换：

DefaultTabController 配置tabs 的控制器， length 是代表有几个子页面。

注意： DefaultTabController 必须配合 Scaffold 使用， 它应该包裹 Scaffold 组件， 否则报错。

import 'package:flutter/material.dart';
class DetailPage extends StatelessWidget {
    DetailPage({this.arguments});
    final arguments;
    @override
    Widget build(BuildContext context) {
        // 最外层 DefaultTabController
        return DefaultTabController(
            length: 2,
            child: Scaffold(
                appBar: AppBar(
                    title: Text('详情页面'),
                    // TabBar 指定多少项
                    bottom: TabBar(
                        tabs: [
                            Tab(text: '热门'),
                            Tab(text: '推荐'),
                        ],
                    ),
                ),
                // TabBarView 用于展示 tabbar 的内容， 需要配置相等的length 子组件
                body: TabBarView(
                    children: [
                        Center(
                            child: Column(
                                children: [
                                    Text("详情页面${arguments != null ? arguments['id'] : '567'}"),
                                    ElevatedButton(
                                        onPressed: () {
                                            Navigator.pushNamed(context, '/me',
                                                                arguments: {"id": 456});
                                        },
                                        child: Text('跳转到me页面'))
                                ],
                            ),
                        ),
                        Center(
                            child: Column(
                                children: [
                                    Text("详情页面第二个${arguments != null ? arguments['id'] : '567'}"),
                                    ElevatedButton(
                                        onPressed: () {
                                            Navigator.pushNamed(context, '/me',
                                                                arguments: {"id": 456});
                                        },
                                        child: Text('跳转到me页面'))
                                ],
                            ),
                        ),
                    ],
                ),
            ));
    }
}

如果你不想要原生的 appbar ， 只需要把tabbar 放在 appbar 的title 中：

appBar: AppBar(
    automaticallyImplyLeading: false, //设置没有返回按钮
    // title: Text('详情页面'),
    title: TabBar(
        tabs: [
            Tab(text: '热门'),
            Tab(text: '推荐'),
        ],
    ),
),

tabbar 的另外一种实现方式：

import 'package:flutter/material.dart';
// 必须继承 StatefulWidget
class DetailPage extends StatefulWidget {
    final int arguments;
    DetailPage({Key key , this.arguments}) : super(key: key);
    @override
    _DetailPageState createState() => _DetailPageState();
}
// 首先要混入 这个 mixins SingleTickerProviderStateMixin
class _DetailPageState extends State<DetailPage> with SingleTickerProviderStateMixin {
    TabController _tabController;
    // 重写 initState 生命周期
    @override
    void initState() {
        super.initState(); // 调用父类的方法
        _tabController = TabController(vsync: this, length: 2); // 实例化 TabController， 第一个固定参数，第二个是 tabs的长度
        _tabController.addListener(() {
            print(_tabController.index);    // 如果没有重写 dispose ，这里会打印两次   
        });
    }
    // 重写 dispose 生命周期（销毁）
    @override
    void dispose() {
        _tabController.dispose();
        super.dispose();
    }
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                bottom: TabBar(
                    controller: _tabController,
                    tabs: [
                        Tab(text: '热销'),
                        Tab(text: '推荐'),
                    ],
                ),
            ),
            body: TabBarView(
                controller: _tabController,
                children: [
                    Center(
                        child: Text('热销'),
                    ),
                    Center(
                        child: Text('推荐'),
                    ),
                ],
            ),
        );
    }
}