Flutter顶部底部弹出菜单插件top_bottom_sheet_flutter的使用

Flutter顶部底部弹出菜单插件top_bottom_sheet_flutter的使用

关于

这个插件可以帮助你在屏幕顶部或底部展示弹出菜单。

参数

  • isShowCloseButton：是否显示关闭按钮。
  • closeButtonRadius：关闭按钮的圆角半径。
  • closeButtonBackgroundColor：关闭按钮的背景颜色。
  • closeButtonIcon：关闭按钮的图标。
  • child：弹出菜单的内容。
  • context：当前的上下文。

安装

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

dependencies:
  top_bottom_sheet_flutter: $currentVersion$

然后运行以下命令来安装依赖：

flutter pub get

示例

下面是一个完整的示例代码，展示了如何使用 top_bottom_sheet_flutter 插件在屏幕顶部或底部展示一个弹出菜单。

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

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Top Bottom Sheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void _showSheet() {
    TopModalSheet.show(
        context: context,
        isShowCloseButton: true,
        closeButtonRadius: 20.0,
        closeButtonBackgroundColor: Colors.white,
        child: Container(
          color: Colors.white,
          child: SizedBox(
            height: MediaQuery.of(context).size.height / 2,
            child: ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: const Text('Ankit Tiwari'),
                  subtitle: const Text('tiwariankit496@gmail.com'),
                  leading: FloatingActionButton(
                    heroTag: index,
                    backgroundColor: Colors.white,
                    onPressed: () {},
                    child: const FlutterLogo(),
                  ),
                );
              },
              itemCount: 30,
              separatorBuilder: (BuildContext context, int index) {
                return const Divider();
              },
            ),
          ),
        ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: ElevatedButton(
                onPressed: _showSheet, child: const Text('Show'))));
  }
}

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

1 回复

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


当然，我可以为你提供一个关于如何使用 top_bottom_sheet_flutter 插件的示例代码。这个插件允许你在 Flutter 应用中轻松实现顶部和底部的弹出菜单。以下是一个简单的示例，展示了如何使用这个插件。

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

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

然后，运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个完整的示例代码：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Top Bottom Sheet Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                _showTopSheet(context);
              },
              child: Text('Show Top Sheet'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _showBottomSheet(context);
              },
              child: Text('Show Bottom Sheet'),
            ),
          ],
        ),
      ),
    );
  }

  void _showTopSheet(BuildContext context) {
    showTopSheet(
      context: context,
      builder: (context) => Container(
        height: 200,
        color: Colors.white,
        child: Center(
          child: Text('This is a Top Sheet!'),
        ),
      ),
    );
  }

  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return Container(
          height: 200,
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
              child: Text('This is a Bottom Sheet!'),
            ),
          ),
        );
      },
    );
    // 注意：`top_bottom_sheet_flutter` 插件主要用于顶部弹出菜单，
    // 底部弹出菜单可以直接使用 Flutter 自带的 `showModalBottomSheet` 方法。
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中有两个按钮，一个用于显示顶部弹出菜单，另一个用于显示底部弹出菜单。顶部弹出菜单使用 top_bottom_sheet_flutter 插件的 showTopSheet 方法，而底部弹出菜单则使用 Flutter 自带的 showModalBottomSheet 方法。

请注意，top_bottom_sheet_flutter 插件主要用于顶部弹出菜单，而底部弹出菜单在 Flutter 中已经有内置的实现方法。因此，在上面的代码中，底部弹出菜单部分并未使用 top_bottom_sheet_flutter 插件。

希望这个示例能帮助你理解如何在 Flutter 应用中使用 top_bottom_sheet_flutter 插件。如果你有任何进一步的问题，请随时提问！

回到顶部