Flutter 嵌套滚动布局

图片[1]-Flutter 嵌套滚动布局-IT网络技术分享
效果图

用到的组件:

NestedScrollView() //嵌套组件
SliverPersistentHeader()//Sliver 顶部持久组件
SliverAppBar() //类似AppBar组件
TabBar()   TabBarView()

代码:

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  ///tab栏组件
  List<Widget> tabzj = [
    Text('这是啊'),
    Text('这是啊'),
    Text('这是啊'),
    Text('这是啊'),
    Text('这是啊'),
    Text('这是啊'),
  ];

  @override
  Widget build(BuildContext context) {
    var tabkzq =
        TabController(length: tabzj.length, vsync: AnimatedListState());
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('HomeView'),
      //   centerTitle: true,
      // ),
      ///嵌套滚动组件
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          ///sliver家族组件
          return [
            _sliverappbar(),
            SliverPersistentHeader(
                pinned: true, //true固定 false不固定
                delegate: _delegate(
                  maxhigh: 100.0,
                  minhigh: 90.0,
                  chid: Container(
                    color: Colors.white,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (ctx, index) {
                          return Container(
                            width: 80,
                            margin: EdgeInsets.all(5),
                            alignment: Alignment.center,
                            color: Colors.blue,
                            child: Text(
                              '$index',
                              style: TextStyle(color: Colors.white),
                            ),
                          );
                        }),
                  ),
                )),
            SliverPersistentHeader(
                pinned: true,
                delegate: _delegate(
                  maxhigh: 40.0,
                  minhigh: 40.0,
                  chid: Container(
                    width: double.infinity,
                    height: double.infinity,
                    color: Colors.white,
                    child: TabBar(
                        onTap: (value) {
                          print(value);
                        },
                        isScrollable: true,
                        controller: tabkzq,
                        labelColor: Colors.black,
                        tabs: tabzj),
                  ),
                )),
          ];
        },

        ///普通widget
        body: TabBarView(
          controller: tabkzq,
          children: [
            ListView.builder(itemBuilder: (ctx, index) {
              return ListTile(
                title: Text(' $index 标题'),
              );
            }),
            ListView.builder(itemBuilder: (ctx, index) {
              return ListTile(
                title: Text(' $index 标题'),
              );
            }),
            ListView.builder(itemBuilder: (ctx, index) {
              return ListTile(
                title: Text(' $index 标题'),
              );
            }),
            ListView.builder(itemBuilder: (ctx, index) {
              return ListTile(
                title: Text(' $index 标题'),
              );
            }),
            ListView.builder(itemBuilder: (ctx, index) {
              return ListTile(
                title: Text(' $index 标题'),
              );
            }),
            ListView.builder(itemBuilder: (ctx, index) {
              return ListTile(
                title: Text(' $index 标题'),
              );
            }),
          ],
        ),
      ),
    );
  }
}

//头部
class _sliverappbar extends StatelessWidget {
  const _sliverappbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      forceElevated: true,
      snap: false,
      floating: false,
      pinned: true,
      expandedHeight: 150,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('这是标题'),
        background: Image.network(
          'http://p5.qhimg.com/bdm/480_296_0/t016608f207bd942436.jpg',
          fit: BoxFit.fill,
        ),
        collapseMode: CollapseMode.pin,
      ),
    );
  }
}

//中间列表
class _Sliverlist extends StatelessWidget {
  const _Sliverlist({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
        pinned: true,
        // floating: true,
        delegate: _delegate(
            maxhigh: 120.0,
            minhigh: 100.0,
            chid: Container(
              width: double.infinity,
              color: Colors.red,
            )));
  }
}

//操作
class _delegate extends SliverPersistentHeaderDelegate {
  double maxhigh;
  double minhigh;
  Widget chid;

  _delegate({required this.maxhigh, required this.minhigh, required this.chid});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // TODO: implement build
    return chid;
  }

  @override
  // TODO: implement maxExtent
  double get maxExtent => maxhigh; //展开状态下的高度

  @override
  // TODO: implement minExtent
  double get minExtent => minhigh; //收缩状态下的高度

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    return maxhigh != oldDelegate.maxExtent || minhigh != oldDelegate.minExtent;
  }
}
THE END
喜欢就支持一下吧
点赞12 分享