Flutter自定义底部弹出菜单插件custom_bottom_sheet的使用

Flutter自定义底部弹出菜单插件custom_bottom_sheet的使用

pub package

一个适应平台的底部操作菜单。

动图展示

静图展示

开始使用

在你的 pubspec.yaml 文件中添加该包：

dependencies:
  custom_bottom_sheet: ^1.1.2

在你的 Dart 文件中导入库：

import 'package:custom_bottom_sheet/custom_bottom_sheet.dart';

使用 SlideDialog.showSlideDialog 替代 showModalBottomSheet：

void customBottomSheet(BuildContext context) {
  SlideDialog.showSlideDialog(
    context: context,
    backgroundColor: Colors.white,
    pillColor: Colors.yellow,
    transitionDuration: Duration(milliseconds: 300),
    child: Text('Your code'), // 这里可以放置你想要显示的任何组件
  );
}

参数说明

SlideDialog.showSlideDialog:

  • pillColor: 顶部标签的颜色（例如黄色）。
  • backgroundColor: 整个对话框的背景颜色。
  • transitionDuration: 显示和关闭动画的时间。
  • child: 在底部弹出菜单中要显示的组件。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 custom_bottom_sheet 插件创建一个底部弹出菜单。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Bottom Sheet',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void customBottomSheet(BuildContext context) {
    SlideDialog.showSlideDialog(
      context: context,
      backgroundColor: Colors.white,
      pillColor: Colors.yellow,
      transitionDuration: Duration(milliseconds: 300),
      child: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('这是一个自定义底部弹出菜单', style: TextStyle(fontSize: 18)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop(); // 关闭底部弹出菜单
              },
              child: Text('关闭'),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            customBottomSheet(context);
          },
          child: Text('点击显示底部弹出菜单'),
        ),
      ),
    );
  }
}

更多关于Flutter自定义底部弹出菜单插件custom_bottom_sheet的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义底部弹出菜单插件custom_bottom_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用custom_bottom_sheet插件来自定义底部弹出菜单的一个示例。这个插件允许你创建比标准showBottomSheet更加灵活和自定义的底部弹出菜单。

首先，确保你已经在pubspec.yaml文件中添加了custom_bottom_sheet依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_bottom_sheet: ^x.y.z  # 请替换为最新版本号

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

接下来，这里是一个完整的示例代码，展示如何使用custom_bottom_sheet插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  void _showCustomBottomSheet(BuildContext context) {
    showCustomBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 300, // 你可以根据需要调整高度
        color: Colors.white,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () {
                Navigator.pop(context); // 关闭底部弹出菜单
                // 在这里添加点击后的逻辑
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () {
                Navigator.pop(context); // 关闭底部弹出菜单
                // 在这里添加点击后的逻辑
              },
            ),
            ListTile(
              leading: Icon(Icons.exit_to_app),
              title: Text('Logout'),
              onTap: () {
                Navigator.pop(context); // 关闭底部弹出菜单
                // 在这里添加点击后的逻辑，比如登出
              },
            ),
          ],
        ),
      ),
      backgroundColor: Colors.transparent,
      borderRadius: 10.0,
      elevation: 20.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      animationCurve: Curves.easeInOut,
      animationDuration: Duration(milliseconds: 300),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Bottom Sheet Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showCustomBottomSheet(context),
          child: Text('Show Custom Bottom Sheet'),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖添加：确保在pubspec.yaml文件中添加了custom_bottom_sheet依赖。

  2. 主应用结构：

    • MyApp是根Widget，它包含一个MaterialApp。
    • MyHomePage是主页面，它包含一个按钮，点击该按钮会显示自定义的底部弹出菜单。

  3. 自定义底部弹出菜单：

    • 使用showCustomBottomSheet方法来显示底部弹出菜单。
    • builder参数接受一个Widget，这里我们创建了一个包含三个ListTile的Column，每个ListTile代表一个菜单项。
    • backgroundColor, borderRadius, elevation, 和 shape 参数允许你自定义底部弹出菜单的外观。
    • animationCurve 和 animationDuration 参数允许你自定义动画效果。

通过这种方式，你可以创建高度自定义的底部弹出菜单，以满足应用的具体需求。

回到顶部