Flutter底部弹出菜单按钮插件st_bottom_sheet_button的使用

Flutter底部弹出菜单按钮插件st_bottom_sheet_button的使用

特性

• 集成简单，仅需几行代码。
• 按钮和弹出菜单的外观高度可定制。
• 支持在弹出菜单中使用自定义小部件。
• 可配置弹出菜单的大小和行为。

开始使用

要使用此插件，在pubspec.yaml文件中添加st_bottom_sheet_button作为依赖项。

使用方法

首先，在你的Flutter应用中导入该包：

import 'package:st_bottom_modal_sheet/st_bottom_modal_sheet.dart';

然后使用该组件：

STBottomSheetButton(
  // 设置弹出菜单的背景颜色
  sheetBackgroundColor: Colors.white,
  // 设置弹出菜单的高度
  contentHeight: 150,
  // 定义弹出菜单的内容
  content: Column(
    children: [
      // 添加一个宽度为全屏的按钮
      SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          // 设置按钮样式
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
          ),
          onPressed: () {}, // 点击事件
          child: const Text("注销当前设备"),
        ),
      ),
      // 添加另一个宽度为全屏的按钮
      SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          // 设置按钮样式
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            backgroundColor: Colors.black,
            foregroundColor: Colors.white,
          ),
          onPressed: () {}, // 点击事件
          child: const Text("注销所有设备"),
        ),
      ),
    ],
  ),
  // 设置触发按钮的文本
  child: const Text(
    "注销",
    style: TextStyle(color: Colors.white, fontSize: 20),
  ),
);

示例代码

import 'package:flutter/material.dart';
import 'package:st_bottom_modal_sheet/st_bottom_sheet_button.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: STBottomSheetButton(
            // 设置弹出菜单的背景颜色
            sheetBackgroundColor: Colors.white,
            // 设置弹出菜单的高度
            contentHeight: 150,
            // 定义弹出菜单的内容
            content: Column(
              children: [
                // 添加一个宽度为全屏的按钮
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    // 设置按钮样式
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      backgroundColor: Colors.red,
                      foregroundColor: Colors.white,
                    ),
                    onPressed: () {}, // 点击事件
                    child: const Text("注销当前设备"),
                  ),
                ),
                // 添加另一个宽度为全屏的按钮
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    // 设置按钮样式
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      backgroundColor: Colors.black,
                      foregroundColor: Colors.white,
                    ),
                    onPressed: () {}, // 点击事件
                    child: const Text("注销所有设备"),
                  ),
                ),
              ],
            ),
            // 设置触发按钮的文本
            child: const Text(
              "注销",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}