使用container的嵌套实现下面布局_# flutter使用Sliver实现折叠布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>   <android.support.design.widget.CollapsingToolbarLayout>
        <android.support.v7.widget.Toolbar/>   </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView>    
    <TextView/>     
</android.support.v4.widget.NestedScrollView>
 
<android.support.design.widget.FloatingActionButton/>
 
</android.support.design.widget.CoordinatorLayout>

body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              child: SliverAppBar(
                automaticallyImplyLeading: false,
                forceElevated: innerBoxIsScrolled,
                bottom: PreferredSize(
                    child: Container(),
                    preferredSize: Size.fromHeight(_allHeight)),
                flexibleSpace: Column(
                  children: <Widget>[
                    _initPersonInfo(),
                    _initDetailInfo(),
                  ],
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: SliverAppBarDelegate(_initTabBar()),
              pinned: true,
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            IncomeChildPage(),
            IncomeChildPage(),
          ],
        ),
      ),

import 'package:flutter/material.dart';
import 'package:flutter_module_for_balance/delegate/SliverAppBarDelegate.dart';
import 'package:flutter_module_for_balance/page/dialog/ExplainDialog.dart';
import 'package:flutter_module_for_balance/utils/ColorConf.dart';
import 'package:flutter_module_for_balance/utils/PlatformUtils.dart';
import 'package:flutter_module_for_balance/utils/StyleConf.dart';
import 'package:flutter_module_for_balance/utils/ToastUtils.dart';
 
import 'incomeChild/IncomeChildPage.dart';
 
/// 现金收益页面
/// 下属 [IncomeChildPage]
///
///
/// 页面代理[SliverAppBarDelegate]
class IncomePage extends StatefulWidget {
  @override
  _IncomePageState createState() => _IncomePageState();
}
 
class _IncomePageState extends State<IncomePage>
    with SingleTickerProviderStateMixin {
  // 滑动控制器
  TabController _tabController;
 
  // tabMenu分类数据
  List<String> _classType;
 
  // 账户信息 也就是cardView高度
  double _cardHeight;
 
  // 个人信息  也就是顶部头像高度
  double _infoHeight;
 
  // 整个appbar 展开高度
  double _allHeight;
 
  @override
  void initState() {
    _classType = ['总收益明细', '提现记录'];
    _tabController = new TabController(length: _classType.length, vsync: this);
    super.initState();
  }
 
  /// 显示dialog
  void _showDialog(BuildContext context) {
    showDialog(context: context, builder: (context) => ExplainDialog());
  }
 
  @override
  Widget build(BuildContext context) {
    _cardHeight = PlatformUtils.getWindowHeight(context) * 0.24;
    _infoHeight = PlatformUtils.getWindowHeight(context) * 0.10;
    _allHeight = _cardHeight + _infoHeight - kToolbarHeight;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: Text(
          '现金收益',
          style: StyleConf.style1748586DBold,
        ),
//        leading: GestureDetector(
//          child: Icon(
//            Icons.arrow_back_ios,
//            color: ColorConf.color48586D,
//          ),
//          onTap: () {
//            Navigator.pop(context);
//          },
//        ),
      ),
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              child: SliverAppBar(
                automaticallyImplyLeading: false,
                forceElevated: innerBoxIsScrolled,
                bottom: PreferredSize(
                    child: Container(),
                    preferredSize: Size.fromHeight(_allHeight)),
                flexibleSpace: Column(
                  children: <Widget>[
                    _initPersonInfo(),
                    _initDetailInfo(),
                  ],
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: SliverAppBarDelegate(_initTabBar()),
              pinned: true,
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            IncomeChildPage(),
            IncomeChildPage(),
          ],
        ),
      ),
    );
  }
 
  /// 初始化tab Menu
  /// 这个Widget 可用于bottom以及center中部菜单
  /// 可用于 [appBar]的[bottom]
  /// 可用于[body]的item
  Widget _initTabBar() {
    TabBar tabBar = _initTabItem();
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          color: ColorConf.colorFFFFFF,
        ),
        tabBar,
      ],
    );
  }
 
  /// 初始化每一个tabBar的每一个item ,主要用于[_initTabBar]
  Widget _initTabItem() {
    return TabBar(
      onTap: ((index) {
        debugPrint('click item is $index');
      }),
      labelStyle: StyleConf.style1448586D,
      unselectedLabelStyle: StyleConf.style14A1A9B4,
      indicatorSize: TabBarIndicatorSize.tab,
      indicatorColor: ColorConf.color18C8A1,
      labelColor: ColorConf.color48586D,
      unselectedLabelColor: ColorConf.color929292,
      tabs: _classType
          .map((e) => Tab(
                child: Container(
                  child: Text(e),
                  padding: const EdgeInsets.only(
                    bottom: 0,
                  ),
                ),
              ))
          .toList(),
      controller: _tabController,
    );
  }
 
  /// 初始化个人信息
  Widget _initPersonInfo() {
    return GestureDetector(
      child: Container(
        height: _infoHeight,
        child: Row(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(left: 22, right: 15),
              decoration:
                  BoxDecoration(borderRadius: BorderRadius.circular(50)),
              child: Image.asset(
                'images/tempCirclePic.png',
                height: 40,
                width: 40,
              ),
            ),
            Text(
              'Colour.Lun',
              style: StyleConf.style1448586DBold,
            ),
            Expanded(
                child: Container(
              margin: const EdgeInsets.only(right: 22),
              alignment: Alignment.centerRight,
              child: Text(
                '伦彩仪',
                style: StyleConf.style1248586D,
              ),
            ))
          ],
        ),
      ),
      onTap: () {
        ToastUtils.showTs('个人信息');
      },
    );
  }
 
  /// 详细信息
  Widget _initDetailInfo() {
    return Container(
      height: _cardHeight - 5,
      margin: const EdgeInsets.only(left: 22, right: 22, bottom: 5),
      child: Container(
        padding: const EdgeInsets.only(
          left: 28,
          right: 28,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  child: Text(
                    '可提现现金/元',
                    style: StyleConf.style13FCFCFC,
                  ),
                  margin: const EdgeInsets.only(top: 16),
                ),
                Expanded(
                    child: Container(
                  alignment: Alignment.centerRight,
                  child: GestureDetector(
                    child: Container(
                      padding: const EdgeInsets.only(left: 10, top: 16),
                      child: Image.asset(
                        'images/icon_question.png',
                        width: 14,
                        height: 14,
                        color: ColorConf.colorFFFFFF,
                      ),
                    ),
                    onTap: () {
                      _showDialog(context);
                    },
                  ),
                ))
              ],
            ),
            Container(
              margin: const EdgeInsets.only(top: 14, bottom: 20),
              child: Row(
                children: <Widget>[
                  Text(
                    '25,992',
                    style: StyleConf.style30FFFFFF,
                  ),
                  Expanded(
                    child: Container(
                      alignment: Alignment.centerRight,
                      child: GestureDetector(
                        child: Container(
                          padding: const EdgeInsets.only(
                              left: 22, right: 22, top: 6, bottom: 6),
                          decoration: BoxDecoration(
                              color: ColorConf.colorFFFFFF,
                              borderRadius: BorderRadius.circular(20)),
                          child: Text('提现', style: StyleConf.style1418C8A1Bold),
                        ),
                        onTap: () {
                          ToastUtils.showTs('提现按钮');
                        },
                      ),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: Container(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: _itemInfo(alignment: Alignment.centerLeft),
                    ),
                    Container(
                      width: 1,
                      height: 30,
                      color: ColorConf.colorFFFFFF,
                    ),
                    Expanded(
                      child: _itemInfo(),
                    ),
                    Container(
                      width: 1,
                      height: 30,
                      color: ColorConf.colorFFFFFF,
                    ),
                    Expanded(
                      child: _itemInfo(alignment: Alignment.centerRight),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Color(0x333ADDC5), offset: Offset(0, 10), blurRadius: 20)
          ],
          borderRadius: BorderRadius.circular(8),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage('images/bg_cash.png'),
          )),
    );
  }
 
  /// 分类item信息
  Widget _itemInfo({alignment}) {
    return Container(
      alignment: alignment ?? Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Text('总收益/元', style: StyleConf.style12FFFFFF),
            margin: const EdgeInsets.only(bottom: 2),
          ),
          Text('3,176.00', style: StyleConf.style12FFFFFF),
        ],
      ),
    );
  }
}