Question

我想知道是否有人知道/找到一种使Flutters的DraggableScrollableSheet以编程方式扩展/折叠的方法。我正在使用他们的Dev渠道中的Flutters最新版本，这使我可以将其包装在

中

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。这将导致产生两个_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(),
      ),
    );
  }
}

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

1 个答案: