上滑隐藏顶部模块

208 阅读1分钟
// FlexibleSpaceBar
class FlexibleSpaceBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              // 展开高度
              expandedHeight: 250.0,
              // 是否随着滑动隐藏标题
              floating: true,
              // 是否固定在顶部
              pinned: true,
              // 可折叠的应用栏目
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text(
                  '可折叠的标题',
                  style: TextStyle(color: Colors.white),
                ),
                background: Image.network(
                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2288748976,1582581638&fm=26&gp=0.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            )
          ];
        },
        body: Center(
          child: Text('向上提拉,查看效果'),
        ));
  }
}

2.另一种实现方法

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  List _tabs = ['1111', '2222', '333'];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "app",
      home: Scaffold(
        // appBar: AppBar(),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              // pinned: true, // appbar是否固定在顶部
              floating: true, // 下滑时top立马跟随
              // snap: true,
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('复仇者联盟'),
                background: Image.network(
                  'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 80.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Card(
                    child: Container(
                      alignment: Alignment.center,
                      color: Colors.primaries[(index % 18)],
                      child: Text('$index'),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}