Flutter多底部弹窗管理插件multiple_bottom_sheets的使用

Flutter多底部弹窗管理插件multiple_bottom_sheets的使用

特性

multiple_bottom_sheets 是一个小型库，允许您创建带有底部弹窗的多标签页。

• 自定义折叠与展开的App Bar
• 可定制数量的底部弹窗

开始使用

安装

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

dependencies:
  multiple_bottom_sheets: <last_version>

然后运行 flutter pub get 来安装。

使用示例

以下是一个完整的示例代码，展示如何使用 multiple_bottom_sheets 创建多底部弹窗。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.grey),
      ),
      debugShowCheckedModeBanner: false,
      home: const Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: CardsHost(
        appBar: CollapsableAppBar(
          expanded: Image(
            image: const AssetImage('assets/pic.jpg'), // 替换为您的图片路径
            fit: BoxFit.fitWidth,
            width: double.infinity,
            alignment: Alignment.center,
          ),
          collapsed: Center(
            child: Text(
              'collapsed',
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
        children: [
          HostedCardChild(
            decoration: cardDecor,
            child: Column(
              children: const [
                CardHeader("one", color: Colors.red),
                CardBody(),
              ],
            ),
          ),
          HostedCardChild(
            decoration: cardDecor,
            child: Column(
              children: const [
                CardHeader("two", color: Colors.green),
                CardBody(),
              ],
            ),
          ),
          HostedCardChild(
            decoration: cardDecor,
            child: Column(
              children: const [
                CardHeader("three", color: Colors.blue),
                CardBody(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 卡片装饰
Decoration cardDecor = BoxDecoration(
  color: Colors.white,
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(16),
    topRight: Radius.circular(16),
  ),
  boxShadow: [
    BoxShadow(
      color: Colors.grey.withOpacity(0.5),
      spreadRadius: 5,
      blurRadius: 7,
      offset: const Offset(0, 3), // 阴影位置调整
    ),
  ],
);

// 卡片头部
class CardHeader extends StatelessWidget {
  final String text;
  final Color color;

  const CardHeader(this.text, {Key? key, required this.color}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    const ts = TextStyle(
      fontSize: 11,
      fontWeight: FontWeight.w600,
    );

    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 18),
      child: Text(
        text,
        style: ts.copyWith(color: color),
      ),
    );
  }
}

// 卡片主体内容
class CardBody extends StatelessWidget {
  const CardBody({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (int i = 0; i < 20; i++) const ScrollChild(),
      ],
    );
  }
}

// 滚动子项
class ScrollChild extends StatelessWidget {
  const ScrollChild({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 8, bottom: 8, left: 8, right: 8),
      decoration: const ShapeDecoration(
        color: Colors.black12,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(8)),
        ),
      ),
      child: const SizedBox(height: 40, width: double.infinity),
    );
  }
}