Flutter可拖拽滚动面板插件flutter_tucking_draggable_scrollable_sheet的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter可拖拽滚动面板插件flutter_tucking_draggable_scrollable_sheet的使用

flutter_tucking_draggable_scrollable_sheet 是一个增强版的 DraggableScrollableSheet，它通过限制 minChildSize 和 maxChildSize 来适应 tucking 小部件。该插件允许用户创建一个可以拖拽和滚动的面板，并且在面板展开时可以隐藏部分内容。

安装

首先，在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_tucking_draggable_scrollable_sheet: ^1.0.0

然后运行 flutter pub get 来安装这个包。

使用方法

下面是一个完整的示例，展示了如何使用 TuckingDraggableScrollableSheet 插件。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_tucking_draggable_scrollable_sheet/flutter_tucking_draggable_scrollable_sheet.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Tucking Draggable Scrollable Sheet'),
        ),
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Text(
                  'Headline',
                  style: Theme.of(context).textTheme.headlineLarge,
                ),
              ),
              Expanded(
                child: TuckingDraggableScrollableSheet(
                  snap: true, // 控制是否启用吸附效果
                  initialTuckedExtent: 0.0, // 初始时tucking小部件被遮挡的程度
                  tucking: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        const SizedBox(height: 16),
                        Text(
                          'Tucking Subtitle',
                          style: Theme.of(context).textTheme.headlineSmall,
                        ),
                      ],
                    ),
                  ),
                  sheetBuilder: (context, scrollController) => Card(
                    elevation: 20,
                    child: ListView.builder(
                      controller: scrollController,
                      itemBuilder: (context, index) => ListTile(
                        title: Text('Item $index'),
                      ),
                      itemCount: 100,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键参数解释

  • snap: 是否启用吸附效果，当用户松开手指时，面板会自动吸附到最近的指定位置。
  • initialTuckedExtent: 初始状态下，tucking 小部件被遮挡的程度。
  • tucking: 这个小部件会在面板完全展开时被覆盖。通常用于显示一些次要信息或标题。
  • sheetBuilder: 用于构建可滚动的内容区域。需要确保将 scrollController 传递给嵌套的滚动视图。

通过上述代码，你可以创建一个带有拖拽和滚动功能的面板，并且可以根据需求调整面板的行为和外观。这个插件非常适合那些需要动态展示内容的应用场景，例如底部弹出菜单、详情页等。


更多关于Flutter可拖拽滚动面板插件flutter_tucking_draggable_scrollable_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter可拖拽滚动面板插件flutter_tucking_draggable_scrollable_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_tucking_draggable_scrollable_sheet插件的一个示例代码案例。这个插件允许你创建一个可拖拽和滚动的面板，非常适合在需要展示可伸缩内容的场景中使用。

首先，你需要在你的pubspec.yaml文件中添加该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tucking_draggable_scrollable_sheet: ^最新版本号 # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用DraggableScrollableSheet组件：

import 'package:flutter/material.dart';
import 'package:flutter_tucking_draggable_scrollable_sheet/flutter_tucking_draggable_scrollable_sheet.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tucking Draggable Scrollable Sheet Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  double _minExtent = 0.25; // 最小高度占父容器高度的比例
  double _maxExtent = 1.0;  // 最大高度占父容器高度的比例
  double _initialChildSize = 0.5; // 初始高度占父容器高度的比例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Scrollable Sheet Demo'),
      ),
      body: Stack(
        children: <Widget>[
          // 父容器内容
          Container(
            color: Colors.grey[200],
            child: Center(
              child: Text('Parent Container'),
            ),
          ),
          // 可拖拽滚动的面板
          DraggableScrollableSheet(
            initialChildSize: _initialChildSize,
            minChildSize: _minExtent,
            maxChildSize: _maxExtent,
            builder: (BuildContext context, ScrollController scrollController) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20),
                  ),
                ),
                child: SingleChildScrollView(
                  controller: scrollController,
                  child: Column(
                    children: List.generate(50, (index) {
                      return ListTile(
                        title: Text('Item $index'),
                      );
                    }),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖添加：首先在pubspec.yaml中添加flutter_tucking_draggable_scrollable_sheet依赖。

  2. 导入包：在Dart文件中导入flutter_tucking_draggable_scrollable_sheet包。

  3. 构建UI：

    • 使用Scaffold作为主布局，包含一个AppBar和Stack作为主体内容。
    • 在Stack中，首先放置一个灰色的Container作为父容器内容。
    • 然后使用DraggableScrollableSheet来创建可拖拽滚动的面板。
      • initialChildSize：初始高度占父容器高度的比例。
      • minChildSize：最小高度占父容器高度的比例。
      • maxChildSize：最大高度占父容器高度的比例。
      • builder：构建可拖拽滚动的面板内容，这里我们放置了一个SingleChildScrollView来允许内容滚动。

这个示例展示了如何使用flutter_tucking_draggable_scrollable_sheet插件来创建一个可拖拽滚动的面板，你可以根据需要调整面板的大小和内容。

回到顶部