zhiying_base_widget/lib/pages/team_page/team_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tab_indicator_styler/tab_indicator_styler.dart';
import 'package:zhiying_base_widget/widgets/team/data/team_data_widet.dart';
import 'package:zhiying_base_widget/widgets/team/recommend/team_recommend_widget.dart';
import 'package:zhiying_comm/util/custom_sliver_persistent_header_delegate.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'dart:ui';

///
/// 我的团队
///
class TeamPage extends StatefulWidget {
  @override
  _TeamPageState createState() => _TeamPageState();
}

class _TeamPageState extends State<TeamPage> {
  @override
  Widget build(BuildContext context) {
    return _getMainWidget();
  }

  var tabTitle = [
    '全部会员',
    '青铜会员',
    '白银会员',
    '黄金会员',
  ];
  TabController _controller;

  @override
  void initState() {
    _controller = TabController(length: tabTitle.length, vsync: ScrollableState());
    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  /// 主体视图
  Widget _getMainWidget() {
    return Scaffold(
      backgroundColor: HexColor.fromHex('#F9F9F9'),
      body: NestedScrollView(
        headerSliverBuilder: (context, bool) {
          return [
            /// 头部Bar
            SliverAppBar(
              // expandedHeight: 200.0,
              leading: IconButton(
                icon: Icon(
                  Icons.arrow_back_ios,
                  size: 22,
                  color: HexColor.fromHex('#333333'),
                ),
                onPressed: () => Navigator.maybePop(context),
              ),
              backgroundColor: Colors.white,
              floating: true,
              pinned: true,
              title: Text(
                '我的团队',
                style: TextStyle(color: HexColor.fromHex('#333333'), fontWeight: FontWeight.bold, fontSize: 18),
              ),
              centerTitle: true,
              elevation: 0,
            ),

            /// 我的推荐人
            SliverToBoxAdapter(
              child: TeamRecommendWidget(),
            ),

            /// 数据
            SliverToBoxAdapter(
              child: TeamDataWidget(),
            ),

            SliverToBoxAdapter(child: SizedBox(height: 8)),

            /// 输入框
            SliverPersistentHeader(
              delegate: CustomSliverPersistentHeaderDelegate(
                min: 34,
                max: 34,
                child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  padding: const EdgeInsets.only(top: 10, left: 12.5, right: 12.5),
                  color: Colors.white,
                  child: Row(
                    children: <Widget>[
                      /// 输入框
                      Expanded(
                        child: Container(
                          height: 24,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(30),
                            color: HexColor.fromHex('#F7F7F7'),
                          ),
                          padding: const EdgeInsets.only(top: 5, bottom: 4.5, left: 7.5, right: 7.5),
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Container(width: 11.5, height: 11.5, color: Colors.red,),
                              Expanded(child: Container(
                                color: Colors.transparent,
                                child: TextField(
                                  style: TextStyle(fontSize: 11 , color: HexColor.fromHex('#000000'), textBaseline: TextBaseline.alphabetic),
                                  decoration: InputDecoration(
                                    focusedBorder: InputBorder.none,
                                    border: InputBorder.none,
                                    focusedErrorBorder: InputBorder.none,
                                    errorBorder: InputBorder.none,
                                    disabledBorder: InputBorder.none,
                                    enabledBorder: InputBorder.none,
                                    filled: true,
                                    isDense: true,
                                    contentPadding: const EdgeInsets.only(left: 6, bottom: 0, top: 0, right: 0),
                                    fillColor: Colors.transparent,
                                    hintStyle: TextStyle(fontSize: 11 , color: HexColor.fromHex('#999999'), textBaseline: TextBaseline.alphabetic),
                                    hintText: '输入需搜索的手机号/昵称',
                                  ),
                                ),
                              ),),
                              Container(width: 15, height: 15, color: Colors.red,)
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(width: 8),
                      ///  确定按钮
                      Container(
                        decoration: BoxDecoration(borderRadius: BorderRadius.circular(30), color: HexColor.fromHex('#FF4242')),
                        padding: const EdgeInsets.only(left: 15, right: 15, bottom: 6.5, top: 6.5),
                        child: Text('搜索', style: TextStyle(color: HexColor.fromHex('#FFFFFF'), fontSize: 11),),
                      )
                    ],
                  ),
                ),
              ),
              pinned: true,
            ),

            /// 悬停TabBar
            SliverPersistentHeader(
              delegate: new _SliverTabBarDelegate(
                TabBar(
                  isScrollable: false,
                  labelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
                  unselectedLabelStyle: TextStyle(fontSize: 13),
                  indicator: MaterialIndicator(
                    height: 2,
                    topLeftRadius: 8,
                    topRightRadius: 8,
                    bottomLeftRadius: 8,
                    bottomRightRadius: 8,
                    color: HexColor.fromHex('#F94B47'),
                    horizontalPadding: 30,
                  ),
                  controller: _controller,
                  tabs: tabTitle.map((f) => Tab(text: f)).toList(),
                  indicatorColor: Colors.red,
                  unselectedLabelColor: HexColor.fromHex('#999999'),
                  labelColor: HexColor.fromHex('#000000'),
                ),
              ),
              pinned: true,
            ),

            /// 筛选条件
            SliverPersistentHeader(
              delegate: CustomSliverPersistentHeaderDelegate(
                  max: 32.5,
                  min: 32.5,
                  child: Container(
                    height: double.infinity,
                    width: double.infinity,
                    color: HexColor.fromHex('#FFFFFF'),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[

                        Text('邀请人数', style: TextStyle(fontSize: 12, color: HexColor.fromHex('#999999')),),
                        Text('邀请人数', style: TextStyle(fontSize: 12, color: HexColor.fromHex('#999999')),),
                        Text('邀请人数', style: TextStyle(fontSize: 12, color: HexColor.fromHex('#999999')),),
                        Text('邀请人数', style: TextStyle(fontSize: 12, color: HexColor.fromHex('#999999')),),

                      ],
                    ),
                  )),
              pinned: true,
            ),
          ];
        },
        body: MediaQuery.removePadding(
          removeTop: true,
          context: context,
          child: TabBarView(
            controller: _controller,
            children: tabTitle
                .map((s) => ListView.builder(
                      itemBuilder: (context, int) => Text("123"),
                      itemCount: 100,
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }
}

class _SliverTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar widget;

  const _SliverTabBarDelegate(this.widget) : assert(widget != null);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          const SizedBox(width: 30),
          Expanded(
            child: this.widget,
          ),
          const SizedBox(width: 30),
        ],
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverTabBarDelegate oldDelegate) {
    return false;
  }

  @override
  double get maxExtent => widget.preferredSize.height;

  @override
  double get minExtent => widget.preferredSize.height;
}