向上和向下滑动TabBar和AppBar

时间:2020-04-16 18:58:49

标签: flutter tabbar flutter-sliver sliverappbar

我的问题是:

我想上下滑动我的应用程序和标签栏。当我向下滚动列表时,appbar和tabbar应该向上滑动,当我向上滚动时,appbar和tabbar应该向下滑动,但是当我位于列表顶部时,它不仅应该向下滑动。我希望你能理解我的问题。

这是我的源代码:

import 'package:flutter/material.dart';
import '../screens/home_screen.dart';
import '../screens/home_screen_map_view.dart';

class TopTabsScreen extends StatefulWidget {
  @override
  _TopTabsScreenState createState() => _TopTabsScreenState();
}

    class _TopTabsScreenState extends State<TopTabsScreen> {
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder: (context, value) {
              return [
                SliverAppBar(
                  title: Center(
                    heightFactor: 0,
                    child: Padding(
                      padding: const EdgeInsets.only(top: 7),
                      child: Image.asset(
                        'assets/images/***.png',
                        fit: BoxFit.cover,
                        scale: MediaQuery.of(context).size.width * 0.007,
                        alignment: Alignment.bottomCenter,
                      ),
                    ),
                  ),
                  expandedHeight: MediaQuery.of(context).size.height * 0.12,
                  primary: true,
                  floating: true,
                  pinned: true,
                  bottom: TabBar(
                    indicatorColor: Color.fromRGBO(253, 166, 41, 1.0),
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.list),
                      ),
                      Tab(
                        icon: Icon(Icons.location_on),
                      ),
                    ],
                  ),
                  forceElevated: false,
                  flexibleSpace: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: <Color>[
                          Color.fromRGBO(107, 176, 62, 1.0),
                          Color.fromRGBO(153, 199, 58, 1.0),
                        ],
                      ),
                    ),
                  ),
                )
              ];
            },
            body: TabBarView(
              children: <Widget>[
                HomeScreen(),
                HomeScreenMapView(),
              ],
            ),
          ),
        );
      }
    }

以下是当前状态的图片:

Current Status Screenshot

0 个答案:

没有答案