如何使用手势检测器以及如何创建可拖动的顶部栏 [英] how to work with gesture detector and how to create draggable top bar

问题描述

当我尝试将android状态栏制作为应用中的顶部栏时，我使用了手势检测器，但我不知道如何进行操作。如何在上方滑动时将容器隐藏在上方，并按以下方式获取容器：

When I try to make an android status bar like a top bar in my app I use a gesture detector but I don't know how to proceed with it. How do I hide the container above and get the container while swiping like below:

在滑动结束并测量滑动距离后，我该怎么做。顶部栏应向下或向上固定，而不应介于两者之间。我如何对其进行动画处理以使其类似于现在。我试过 onVerticalDrag 等，但我不知道如何操作。

How do I do something after a swipe ends and measure the swipe distance. The top bar should settle down or up and not stay in-between. How do I animate it to make it do it similar to how it is now. I tried onVerticalDrag etc but I don't have an idea how to it.

推荐答案

Flutter Slivers可以为您做到这一点。

Flutter Slivers can do that for you.

检查以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool _) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: true,
                pinned: true,
                snap: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Collapsing Toolbar",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ),
                  ),
                ),
              ),
            ];
          },
          body: Center(
            child: Text("My Fancy Text"),
          ),
        ),
      ),
    );
  }
}

这篇关于如何使用手势检测器以及如何创建可拖动的顶部栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！