flutter - 如何使 DraggableScrollableSheet 在拖动 handle 时向上滚动，就像谷歌地图一样

Question

我是 flutter 新手。我正在尝试添加一个小 handle 来提示用户像谷歌地图一样拖动。但是，如果我在上面放置一个单独的容器来显示为 handle ，则当用户触摸它时将不会有拖动效果。我明白这是因为滚动 Controller 没有发生滚动。如果我将句柄放在蓝色框中下面的 listView 内，它将按预期向上滚动。但是，在顶部，当 listView 有更多项目时， handle 将向上滚动。

当用户触摸并拖动 handle 时，有什么方法可以手动向上滚动工作表吗？

Answer 1

请尝试这个

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool leftClick = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DraggableScrollableSheet(
        minChildSize: 0.1,
        maxChildSize: 0.9,
        initialChildSize: 0.3,
        builder: (BuildContext context, ScrollController scrollController) {
          return Container(
            height: MediaQuery.of(context).size.height * 0.9,
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
            child: Stack(
              children: [
                Container(
                    height: MediaQuery.of(context).size.height * 0.9,
                    width: MediaQuery.of(context).size.width,
                    child: SingleChildScrollView(
                      controller: scrollController,
                      child: Column(
                        children: [
                          const SizedBox(
                            height: 50,
                          ),
                          ...List.generate(
                              50,
                              (index) => Container(
                                  height: 50, child: Text('Container $index')))
                        ],
                      ),
                    )),
                IgnorePointer(
                  child: Container(
                    color: Colors.green,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 20, bottom: 20),
                          height: 10,
                          width: 100,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.grey),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}