flutter TabBarList 自定义样式实现, AutomaticKeepAliveClientMixin每次切换页面不需要重新加载

TabBarList

import 'package:ZyFlutter/theme/font.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 顶部tabBar
class TabBarList extends StatefulWidget {
  // 标题
  final Widget title;
  // 右侧功能区域
  final List<Widget> actions;
  // 左侧区域
  final Widget leading;
  // 内容区域
  final List<Widget> child;
  // tab列表
  final List<Tab> tabs;
  TabBarList(
      {Key key, this.title, this.actions, this.leading, this.child, this.tabs})
      : super(key: key);

  @override
  _TabBarListState createState() => _TabBarListState();
}

class _TabBarListState extends State<TabBarList>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  // Tab控制器
  TabController _tabController;
  int _tabIndex = 0;
  List<Tab> myTabs = [];

  // 初始化
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: widget.tabs.length, vsync: this);
    setState(() {
      myTabs = widget.tabs;
    });
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: widget.leading,
        title: widget.title,
        actions: widget.actions,
        shadowColor: Colors.white,
        bottom: TabBar(
          indicator: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                  color: Theme.of(context).toggleableActiveColor,
                  width: 3.sp,
                  style: BorderStyle.solid),
            ),
          ),
          tabs: myTabs,
          indicatorSize: TabBarIndicatorSize.label,
          labelStyle: TextStyle(
              color: Theme.of(context).colorScheme.primary,
              fontSize: Font.firstLevelTitle,
              fontWeight: FontWeight.bold),
          unselectedLabelStyle: TextStyle(
              color: Theme.of(context).colorScheme.primaryVariant,
              fontSize: Font.secondaryTitle),
          controller: _tabController,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: widget.child,
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

使用

import 'package:ZyFlutter/components/TabBarList.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:tapped/tapped.dart';

class Village extends StatefulWidget {
  @override
  _VillageState createState() => _VillageState();
}

class _VillageState extends State<Village> {
  List<Tab> list = [
    Tab(
      text: "精选",
    ),
    Tab(
      text: "本村",
    ),
    Tab(
      text: "关注",
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return TabBarList(
      tabs: list,
      title: Center(
        child: Text("村里"),
      ),
      child: [Text("123"), Text("999"), Text("123")],
      actions: [
        Padding(
          child: Tapped(
            child: Icon(
              Icons.camera_alt,
              color: Theme.of(context).colorScheme.primaryVariant,
            ),
          ),
          padding: EdgeInsets.only(right: 16.sp),
        )
      ],
    );
  }
}