Flutter拖拽视图插件jdraggable_view的使用

JDraggableView 是一个功能强大的 Flutter 小部件，允许你创建具有多种自定义选项的可拖动视图。你可以轻松地将其集成到你的 Flutter 应用程序中，以创建交互式且灵活的用户界面。

特性

• 创建具有可定制行为的可拖动视图。
• 配置可拖动视图的外观，包括应用栏、主体等。
• 支持下拉刷新功能。
• 包含滚动控制器。
• 使用 Provider 进行内置状态管理。

安装

要在你的 Flutter 项目中使用 JDraggableView，你需要在 pubspec.yaml 文件中添加它：

dependencies:
  jdraggable_view: 0.0.1

使用

首先，在你的文件中导入 JDraggableView：

import 'package:jdraggable_view/jdraggable_view.dart';

然后，像使用 Scaffold 一样使用它：

@JDraggableView(
  title: Text('Draggable View Example'),
  body: [
    // 在这里添加你的子部件
  ],
)

完整示例

以下是一个完整的示例，展示了如何使用 JDraggableView 创建一个具有拖动功能的视图。

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

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

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

  // 这个小部件是应用程序的根节点
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JDraggable View',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ScrollController scrollController = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return JDraggableView(
      leading: const Icon(Icons.arrow_back_ios),
      title: const Text("Collapsed View"),
      actions: [
        IconButton(onPressed: () {
          scrollController.animateTo(scrollController.position.minScrollExtent - 200, duration: const Duration(milliseconds: 300), curve: Curves.ease);
        }, icon: const Icon(Icons.arrow_downward_sharp)),
      ],
      expandedHeader: Container(
        color: Colors.blue,
        child: Center(
          child: Text(
            "Expanded View",
            style: Theme.of(context)
                .textTheme
                .displayMedium!
                .copyWith(color: Colors.white70),
          ),
        ),
      ),
      controller: scrollController,
      expandedHeaderBottomBar:  Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(onPressed: () {
            scrollController.animateTo(scrollController.position.maxScrollExtent, duration: const Duration(milliseconds: 300), curve: Curves.ease);
          }, icon: const Icon(Icons.arrow_upward)),
        ],
      ),
      body: [
        for (int i = 0; i < 20; i++)
          Card(
            color: Colors.white70,
            child: ListTile(
              leading: CircleAvatar(
                child: Text("$i"),
              ),
              title: const Text("Title"),
              subtitle: const Text("Details"),
            ),
          )
      ],
      headerExpandedHeight: 0.2,
      fullyStretchable: true,
      stretchMaxHeight: 0.3,
      onRefresh: () async {
        await Future.delayed(const Duration(milliseconds: 1500));
      },
      // expandedBody: RefreshIndicator(child: child, onRefresh: onRefresh),
      expandedBody: Stack(
        children: [
          Container(color: Colors.black),
          SafeArea(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.teal,
                borderRadius: BorderRadius.circular(50),
              ),
              child: Stack(
                children: [
                  Positioned(
                      top: 20,
                      right: 20,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          CircleAvatar(
                            backgroundColor: Colors.black.withOpacity(.5),
                            child: const Icon(
                              Icons.ac_unit,
                              color: Colors.white,
                            ),
                          )
                        ],
                      )),
                  Positioned(
                    bottom: 50,
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width,
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(50),
                            child: Container(
                              color: Colors.grey[300],
                              height: 100,
                              width: 100,
                              alignment: Alignment.center,
                              child: const CircleAvatar(
                                radius: 40,
                                backgroundColor: Colors.blue,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
      backgroundColor: Colors.white,
      appBarColor: Colors.teal,
    );
  }
}