Question

如何使该应用栏交易和动画化，如何将页面分为两部分，并将其下侧向上滑动以使上侧在后面和对面消失。

此视频显示了该示例。

https://youtu.be/kIglDIllRjA

Answer 1

如何将页面分为两部分，并将下侧向上滑动，以使上侧在后面和对面消失。

将NestedScrollView与自定义SliverPersistentHeaderDelegates一起使用

我进行此应用栏交易

您可以在条子中计算这一时刻：
var isPinned = shrinkOffset > maxExtent - minExtent;。

我做了一个简化的例子。我希望会喜欢。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        body: MyHomePage(),
      ),
    );
  }
}

const backgroundColor = Color(0xFFfeeee6);

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;

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

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this);
    tabController.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      physics: BouncingScrollPhysics(),
      headerSliverBuilder: (_, __) => [
        SliverPersistentHeader(
          delegate: Header(),
          pinned: true,
          floating: true,
        ),
        SliverPersistentHeader(
          delegate: SliverTabBar(tabController: tabController),
          pinned: true,
          floating: false,
        )
      ],
      body: _Body(tab: tabController.index),
    );
  }
}

class SliverTabBar extends SliverPersistentHeaderDelegate {
  SliverTabBar({this.tabController});

  final TabController tabController;

  final List<Widget> myTabs = [
    Tab(text: 'Most Selling'),
    Tab(text: 'Waffle'),
    Tab(text: 'Nutella Casserole'),
  ];

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    return DecoratedBox(
      decoration: BoxDecoration(color: Colors.white),
      child: Row(
        children: [
          IconButton(
            onPressed: () => print('menu'),
            icon: Icon(
              Icons.menu,
              color: Colors.orange,
            ),
          ),
          TabBar(
            labelPadding: EdgeInsets.symmetric(horizontal: 10),
            isScrollable: true,
            physics: NeverScrollableScrollPhysics(),
            indicatorSize: TabBarIndicatorSize.label,
            controller: tabController,
            labelColor: Colors.black,
            indicatorColor: Colors.orange,
            tabs: myTabs,
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => 48.0;

  @override
  double get minExtent => 48.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}

class Header extends SliverPersistentHeaderDelegate {
  @override
  Widget build(context, shrinkOffset, overlapsContent) {
    var isPinned = shrinkOffset > maxExtent - minExtent;
    return Container(
      decoration: BoxDecoration(
        color: isPinned ? Colors.white : backgroundColor,
      ),
      child: SafeArea(
        child: Stack(
          children: [
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Column(
                children: [
                  Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(100),
                        child: Container(
                          color: Colors.white,
                          child: IconButton(
                            onPressed: () => Navigator.of(context).pop(),
                            icon: Icon(
                              Icons.arrow_back,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Visibility(
                          visible: isPinned,
                          child: Text(
                            'Waffleno',
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                      ClipRRect(
                        borderRadius: BorderRadius.circular(100),
                        child: Container(
                          color: Colors.white,
                          child: IconButton(
                            onPressed: () => print('search'),
                            icon: Icon(
                              Icons.search,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                  SizedBox(height: 50),
                  Container(
                    width: double.infinity,
                    color: Colors.white,
                    height: 150,
                    child: Text(
                      'Waffleno',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  double get maxExtent => 230;

  @override
  double get minExtent => 80;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}

class _Body extends StatelessWidget {
  const _Body({
    Key key,
    @required this.tab,
  }) : super(key: key);

  final int tab;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: [Text('one'), Text('two'), Text('three')][tab],
    );
  }
}

Flutter Uniqe appBar动画

1 个答案: