Flutter 中 DraggableScrollableSheet 的属性介绍与使用

在 Flutter 中，DraggableScrollableSheet 是一个非常有用的小部件，它允许用户通过手势来拖动一个可滚动的区域，通常被用作底部弹出式面板或者随手势拖动的控件。本文将介绍 DraggableScrollableSheet 的属性以及如何在 Flutter 中使用它。

DraggableScrollableSheet 属性介绍

1. initialChildSize: 设置 DraggableScrollableSheet 初始时的高度占屏幕的比例。范围为 0 到 1，默认值为 0.5（即初始高度为屏幕高度的一半）。

2. minChildSize: 指定 DraggableScrollableSheet 的最小高度占屏幕的比例。默认为 0，表示没有最小高度限制。

3. maxChildSize: 指定 DraggableScrollableSheet 的最大高度占屏幕的比例。默认为 1，表示没有最大高度限制。

4. expand: 设置是否允许 DraggableScrollableSheet 在内容小于屏幕高度时扩展以填充屏幕。默认为 true。

5. snap: 一个布尔值，用于控制是否启用 DraggableScrollableSheet 在滚动停止时自动"捕捉"到接近的最小或最大值。默认值为 false。

6. builder: 一个构建函数，用于构建 DraggableScrollableSheet 的内容。该函数接受两个参数：BuildContext 和 ScrollController，返回一个 Widget，通常是一个 SingleChildScrollView 或者 ListView。

如何使用 DraggableScrollableSheet

下面是一个简单的示例，展示了如何在 Flutter 中使用 DraggableScrollableSheet：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DraggableScrollableSheet Example'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (context) {
              return DraggableScrollableSheet(
                initialChildSize: 0.5,
                minChildSize: 0.25,
                maxChildSize: 0.75,
                expand: true,
                snap: true,
                builder: (context, scrollController) {
                  return Container(
                    color: Colors.grey[300],
                    child: ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text('Item $index'),
                        );
                      },
                    ),
                  );
                },
              );
            },
          );
        },
        child: Text('Show DraggableScrollableSheet'),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

在这个示例中，我们创建了一个简单的 Flutter 应用，并在其中使用了 DraggableScrollableSheet。当用户点击按钮时，会弹出一个底部弹出式面板，其中包含一个可滚动的 ListView。

通过调整 DraggableScrollableSheet 的属性，可以根据需要定制弹出式面板的行为和外观。例如，通过调整 initialChildSize、minChildSize、maxChildSize 和 snap 可以控制面板的初始高度、最小高度、最大高度以及滚动停止时的自动捕捉行为。