Flutter拖拽布局插件draggable_home的使用

draggable_home 是一个Flutter插件，它使实现可滑动和完全可拉伸的布局变得更加容易！它是基于Scaffold和Sliver构建的。以下是关于如何使用此插件的一些详细信息。

使用说明

安装

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

dependencies:
  draggable_home: ^1.0.2

基本设置

DraggableHome 需要你提供 title、headerWidget 和 body：

• title: 应用栏中的标题。
• headerWidget: 当未完全展开时位于主体上方的扩展部件。
• body: 形式为Column的部件列表或单个部件。不要添加任何垂直滚动部件，否则可能会禁用滚动。

示例代码

DraggableHome(
  title: Text("Title"),
  headerWidget: headerWidget(),
  body: [
    Container(...),
    // 其他部件...
  ]
);

参数详解

以下是DraggableHome的一些参数及其描述：

ListView.builder 示例

如果你想要在DraggableHome中使用ListView.builder，请确保将shrinkWrap设置为true，并且禁用滚动，如下所示：

DraggableHome(
  title: Text("Title"),
  headerWidget: headerWidget(),
  body: [
    Container(...),

    // shrinkWrap true required for ListView.builder()
    // disable the scroll for any vertically scrollable widget
    // provide top padding 0 to fix extra space in listView
    ListView.builder(
      padding: EdgeInsets.only(top: 0),
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: list.length,
      itemBuilder: (context, index) => Card(
        child: ListTile(
          title: Text("$index"),
        ),
      ),
    ),

    (...),
  ]
);

完整示例代码

下面是一个完整的示例代码，展示了如何在应用中集成draggable_home插件：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(
        title: "Draggable Home",
        home: HomePage(),
      );
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DraggableHome(
      leading: const Icon(Icons.arrow_back_ios),
      title: const Text("Draggable Home"),
      actions: [
        IconButton(onPressed: () {}, icon: const Icon(Icons.settings)),
      ],
      headerWidget: headerWidget(context),
      headerBottomBar: headerBottomBarWidget(),
      body: [
        listView(),
      ],
      fullyStretchable: true,
      expandedBody: const CameraPreview(), // 假设CameraPreview是已定义的部件
      backgroundColor: Colors.white,
      appBarColor: Colors.teal,
    );
  }

  Row headerBottomBarWidget() {
    return const Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.settings,
          color: Colors.white,
        ),
      ],
    );
  }

  Widget headerWidget(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          "Title",
          style: Theme.of(context)
              .textTheme
              .displayMedium!
              .copyWith(color: Colors.white70),
        ),
      ),
    );
  }

  ListView listView() {
    return ListView.builder(
      padding: const EdgeInsets.only(top: 0),
      physics: const NeverScrollableScrollPhysics(),
      itemCount: 20,
      shrinkWrap: true,
      itemBuilder: (context, index) => Card(
        color: Colors.white70,
        child: ListTile(
          leading: CircleAvatar(
            child: Text("$index"),
          ),
          title: const Text("Title"),
          subtitle: const Text("Subtitle"),
        ),
      ),
    );
  }
}

通过以上步骤和示例代码，你应该能够轻松地在Flutter项目中集成并使用draggable_home插件了。希望这些信息对你有所帮助！