Flutter劫富濟貧計劃（四）——flutter佈局實戰

不會置頂的Tab標籤頁切換

參考地址：傳送門

正常的tab標籤頁都是置頂的，放到Scaffold當中的，但是我們有的項目需求是需要在中間有個標籤頁切換欄的

import 'package:flutter/material.dart';
import './fix_tabbar_view.dart';


class TestTab extends StatefulWidget {
  @override
  _TestTabState createState() => _TestTabState();
}

class _TestTabState extends State<TestTab>  with SingleTickerProviderStateMixin {

  PageController _pageController;
  TabController _tabController;
  List<String> _tabList = ["A", "B", "C"];
 
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabList.length, vsync: this);
    _pageController = PageController();
  }
 
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('測試')),
      body:Column(
      children: <Widget>[
        Container(
          child: Image.network('http://b.hiphotos.baidu.com/image/h%3D300/sign=05b297ad39fa828bce239be3cd1e41cd/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',fit:BoxFit.cover),
        ),
        TabBar(
          labelColor: Colors.blue,
          controller: _tabController,
          tabs: _tabList.map((text) {
            return Tab(
              text: text,
            );
          }).toList(),
          onTap: (index) {
            _pageController.jumpToPage(index);
          },
        ),
        Expanded(
          child: FixTabBarView(
            pageController: _pageController,
            tabController: _tabController,
            children: _tabList.map((text) {
              return Page(tab: text);
            }).toList(),
          ),
        ),
      ],
    )
    );
  }
}

class Page extends StatefulWidget {
  final String tab;
 
  Page({Key key, this.tab}) : super(key: key);
 
  @override
  _PageState createState() => _PageState(tab: tab);
}
 
class _PageState extends State<Page> with AutomaticKeepAliveClientMixin {
  String tab;
  _PageState({@required this.tab});
 
  int _count = 0;
 
  void add() {
    setState(() {
      ++_count;
    });
  }
 
  @override
  void didUpdateWidget(Page oldWidget) {
    super.didUpdateWidget(oldWidget);
  }
 
  @override
  void initState() {
    super.initState();
    print("initState $tab $hashCode count=$_count");
  }
 
  @override
  Widget build(BuildContext context) {
    super.build(context);
    print("build $tab $hashCode count=$_count");
    return Scaffold(
      body: Center(
        child: Text("$tab $_count"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: add,
        child: Icon(Icons.add),
      ),
    );
  }
 
  @override
  bool get wantKeepAlive => true;
}

fix_tabbar_view.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
 
class FixTabBarView extends StatefulWidget {
  const FixTabBarView({
    Key key,
    @required this.children,
    @required this.tabController,
    @required this.pageController,
    this.physics,
    this.dragStartBehavior = DragStartBehavior.start,
  })  : assert(children != null),
        assert(dragStartBehavior != null),
        super(key: key);
 
  final TabController tabController;
  final PageController pageController;
  final List<Widget> children;
  final ScrollPhysics physics;
  final DragStartBehavior dragStartBehavior;
 
  @override
  _FixTabBarViewState createState() => _FixTabBarViewState();
}
 
class _FixTabBarViewState extends State<FixTabBarView> {
  @override
  void dispose() {
    super.dispose();
    widget.tabController.dispose();
    widget.pageController.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return PageView(
      dragStartBehavior: widget.dragStartBehavior,
      physics: widget.physics,
      controller: widget.pageController,
      children: widget.children,
      onPageChanged: (index) {
        widget.tabController.animateTo(index);
      },
    );
  }
}