Flutter DraggableScrollableSheet - 如何以编程方式展开/折叠

Question

我想知道是否有人知道/找到了以编程方式使 Flutter 的 DraggableScrollableSheet 展开/折叠的方法。我正在使用他们 Dev channel 的 Flutter 最新版本，这让我可以将它包装在一个

NotificationListener<DraggableScrollableNotification>

然后我可以听听床单展开/折叠的程度。但是，我不清楚如何折叠展开的工作表，反之亦然。

在小部件 src 文件中似乎有一个

DraggableScrollableActuator

公开了一个静态的 .reset 但我不知道/或想不出一种方法来实现它。

Answer 1

基于 Pierre 的回答，我最终实现了一个解决方法，允许我使用 DraggableScrollableActuator 折叠和展开 DraggableScrollableSheet。

您可以使用 setState 方法更改 initialChildSize 的值，然后使用 DraggableScrollableActuator.reset 方法展开或折叠表。

void toggleDraggableScrollableSheet() {
  if (draggableSheetContext != null) {
    setState(() {
      initialExtent = isExpanded ? minExtent : maxExtent;
    });
    DraggableScrollableActuator.reset(draggableSheetContext);
  }
}

使这项工作重要的是为小部件折叠和展开时提供不同的 Key。这将产生 2 个 _DraggableScrollableSheetState 实例 - 一个可以重置为折叠状态，另一个可以重置为展开状态。

DraggableScrollableActuator(
  child: DraggableScrollableSheet(
    key: Key(initialExtent.toString()),
    minChildSize: minExtent,
    maxChildSize: maxExtent,
    initialChildSize: initialExtent,
    builder: draggableScrollableSheetBuilder,
  ),
)

编辑:

工作示例:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const List<Color> colors = [
    Colors.red,
    Colors.green,
    Colors.blue,
  ];

  static const double minExtent = 0.2;
  static const double maxExtent = 0.6;

  bool isExpanded = false;
  double initialExtent = minExtent;
  BuildContext draggableSheetContext;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    return InkWell(
      onTap: _toggleDraggableScrollableSheet,
      child: DraggableScrollableActuator(
        child: DraggableScrollableSheet(
          key: Key(initialExtent.toString()),
          minChildSize: minExtent,
          maxChildSize: maxExtent,
          initialChildSize: initialExtent,
          builder: _draggableScrollableSheetBuilder,
        ),
      ),
    );
  }

  void _toggleDraggableScrollableSheet() {
    if (draggableSheetContext != null) {
      setState(() {
        initialExtent = isExpanded ? minExtent : maxExtent;
        isExpanded = !isExpanded;
      });
      DraggableScrollableActuator.reset(draggableSheetContext);
    }
  }

  Widget _draggableScrollableSheetBuilder(
    BuildContext context,
    ScrollController scrollController,
  ) {
    draggableSheetContext = context;
    return SingleChildScrollView(
      controller: scrollController,
      child: Column(
        children: colors
            .map((color) => Container(
                  height: 200,
                  width: double.infinity,
                  color: color,
                ))
            .toList(),
      ),
    );
  }
}