Flutter可扩展菜单插件expandable_menu的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter可扩展菜单插件expandable_menu的使用

expandable_menu 是一个具有无限水平项目列表的高度可定制的可扩展菜单。本文将介绍如何在Flutter应用中使用这个插件，并提供完整的示例代码。

预览

静态预览 动态预览

属性说明

属性 描述
width 菜单未展开时的宽度
height 菜单的高度
items 菜单项列表
backgroundColor 背景颜色，默认值为 Color(0xFF4B5042)
iconColor 图标颜色（箭头图标和汉堡图标）
itemContainerColor 项目背景颜色，如果为空默认为 Colors.white.withOpacity(.4)

使用方法

首先，确保您已在pubspec.yaml文件中添加了expandable_menu依赖：

dependencies:
  flutter:
    sdk: flutter
  expandable_menu: ^latest_version

然后运行以下命令来获取包：

flutter pub get

接下来，在您的Flutter应用中使用ExpandableMenu组件。以下是完整的示例代码：

import 'package:expandable_menu/expandable_menu.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) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF9FB373),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 100.0),
        children: [
          Center(
              child: SizedBox(
                height: 400.0,
                width: 290.0,
                child: Stack(
                  children: [
                    Positioned(
                      top: 23.0,
                      right: 23.0,
                      left: 23.0,
                      bottom: 0.0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(16.0),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 46.0,
                          height: 46.0,
                          items: [
                            Icon(Icons.add, color: Colors.black),
                            Icon(Icons.access_alarm, color: Colors.black),
                            Icon(Icons.accessible_forward, color: Colors.black),
                            Icon(Icons.accessibility_new_sharp, color: Colors.black),
                            Icon(Icons.add, color: Colors.black),
                            Icon(Icons.access_alarm, color: Colors.black),
                            Icon(Icons.accessible_forward, color: Colors.black),
                            Icon(Icons.accessibility_new_sharp, color: Colors.black),
                            Icon(Icons.add, color: Colors.black),
                            Icon(Icons.access_alarm, color: Colors.black),
                            Icon(Icons.accessible_forward, color: Colors.black),
                            Icon(Icons.accessibility_new_sharp, color: Colors.black),
                          ],
                        )),
                  ],
                ),
              )),
          const SizedBox(
            height: 40,
          ),
          Center(
              child: SizedBox(
                height: 200.0,
                width: 200.0,
                child: Stack(
                  children: [
                    Positioned(
                      top: 20.0,
                      right: 20.0,
                      left: 20.0,
                      bottom: 0.0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(16.0),
                          ),
                        ),
                      ),
                    ),
                    const Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 40.0,
                          height: 40.0,
                          items: [
                            Icon(
                              Icons.add,
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.access_alarm,
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.accessible_forward,
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.accessibility_new_sharp,
                              color: Colors.white,
                            ),
                          ],
                        )),
                  ],
                ),
              )),
          const SizedBox(
            height: 40,
          ),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 5.0),
              child: SizedBox(
                height: 200.0,
                child: Stack(
                  children: [
                    Positioned(
                      top: 20.0,
                      right: 20.0,
                      left: 20.0,
                      bottom: 0.0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(16.0),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 40.0,
                          height: 40.0,
                          backgroundColor: Colors.black,
                          iconColor: Colors.amber,
                          itemContainerColor: Colors.amber,
                          items: [
                            Icon(Icons.add, color: Colors.black),
                            Icon(Icons.access_alarm, color: Colors.black),
                            Icon(Icons.accessible_forward, color: Colors.black),
                            Icon(Icons.accessibility_new_sharp, color: Colors.black),
                            Icon(Icons.add, color: Colors.black),
                            Icon(Icons.access_alarm, color: Colors.black),
                            Icon(Icons.accessible_forward, color: Colors.black),
                            Icon(Icons.accessibility_new_sharp, color: Colors.black),
                            Icon(Icons.add, color: Colors.black),
                            Icon(Icons.access_alarm, color: Colors.black),
                            Icon(Icons.accessible_forward, color: Colors.black),
                          ],
                        )),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}

感谢 Volorf 提供的设计灵感。

通过以上步骤，您可以在Flutter应用中轻松实现一个可扩展的菜单。您可以根据需要自定义菜单项、背景颜色和其他属性，以满足您的设计需求。


更多关于Flutter可扩展菜单插件expandable_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter可扩展菜单插件expandable_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用expandable_menu插件的一个示例。这个插件允许你创建一个可扩展的菜单，非常适合在应用中展示可折叠的内容。

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

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

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

接下来，在你的Dart文件中使用ExpandableMenu组件。下面是一个完整的示例，展示如何创建一个简单的可扩展菜单：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Expandable Menu Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expandable Menu Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: ExpandableMenu(
              title: Text('Expandable Menu Example'),
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.star),
                  title: Text('Item 1'),
                ),
                ListTile(
                  leading: Icon(Icons.star_border),
                  title: Text('Item 2'),
                ),
                ListTile(
                  leading: Icon(Icons.star_half),
                  title: Text('Item 3'),
                ),
              ],
              onToggle: (bool isExpanded) {
                print('Menu is expanded: $isExpanded');
              },
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 导入必要的包：

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

  2. 创建MyApp类：这是你的Flutter应用的主类。

  3. 在MyApp类中构建UI：

    • 使用MaterialApp作为根组件。
    • 设置应用的主题和主页。
    • 在主页中使用Scaffold来创建应用栏和主体内容。
    • 在主体内容中使用Center和Padding来居中并增加一些间距。
    • 使用ExpandableMenu组件创建可扩展菜单。

  4. 配置ExpandableMenu：

    • title：设置菜单的标题。
    • children：设置菜单展开时显示的子项，这里使用ListTile作为子项。
    • onToggle：当菜单展开或折叠时调用的回调函数，这里简单打印菜单的展开状态。

运行这个示例，你会看到一个带有标题“Expandable Menu Example”的可扩展菜单，点击标题可以展开或折叠菜单项。

确保你根据expandable_menu的最新文档和API调整代码，因为API可能会随版本更新而变化。

回到顶部