Flutter焦点菜单插件focused_menu的使用

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

Flutter焦点菜单插件focused_menu的使用

focused_menu 是一个易于实现的包，可以为Flutter应用程序添加聚焦长按菜单。

当前特性

  • 可以向任何您想要的Widget添加聚焦菜单。
  • 根据您的应用需求自定义聚焦菜单和动画。

Demo

focused_menu_demo

使用方法

要使用 focused_menu，只需将您想要添加聚焦菜单的Widget用 FocusedMenuHolder 包裹起来即可。以下是一个完整的示例demo，演示了如何在GridView中的每个卡片上添加聚焦菜单：

import 'package:flutter/material.dart';
import 'package:focused_menu/focused_menu.dart';
import 'package:focused_menu/modals.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Focused Menu Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Focused Menu Demo"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              SizedBox(height: 20),
              Expanded(
                child: GridView.builder(
                  physics: BouncingScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10),
                  itemCount: 12,
                  itemBuilder: (context, index) {
                    return FocusedMenuHolder(
                      menuWidth: MediaQuery.of(context).size.width * 0.50,
                      blurSize: 5.0,
                      menuItemExtent: 45,
                      menuBoxDecoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.all(Radius.circular(15.0))),
                      duration: Duration(milliseconds: 100),
                      animateMenuItems: true,
                      blurBackgroundColor: Colors.black54,
                      openWithTap: true,
                      menuOffset: 10.0,
                      bottomOffsetHeight: 80.0,
                      menuItems: <FocusedMenuItem>[
                        FocusedMenuItem(
                          title: Text("Open"),
                          trailingIcon: Icon(Icons.open_in_new),
                          onPressed: () {
                            // 打开新页面或其他操作
                          },
                        ),
                        FocusedMenuItem(
                          title: Text("Share"),
                          trailingIcon: Icon(Icons.share),
                          onPressed: () {},
                        ),
                        FocusedMenuItem(
                          title: Text("Favorite"),
                          trailingIcon: Icon(Icons.favorite_border),
                          onPressed: () {},
                        ),
                        FocusedMenuItem(
                          title: Text("Delete", style: TextStyle(color: Colors.redAccent)),
                          trailingIcon: Icon(Icons.delete, color: Colors.redAccent),
                          onPressed: () {},
                        ),
                      ],
                      onPressed: () {},
                      child: Card(
                        elevation: 5,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Image.asset("assets/images/image_${index + 1}.jpg"),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键点解释

  • menuWidth: 菜单的宽度，这里设置为屏幕宽度的50%。
  • blurSize: 模糊效果的大小。
  • menuItemExtent: 每个菜单项的高度。
  • menuBoxDecoration: 菜单的装饰样式，包括颜色和圆角。
  • duration: 动画持续时间。
  • animateMenuItems: 是否对菜单项进行动画。
  • blurBackgroundColor: 模糊背景的颜色。
  • openWithTap: 是否通过点击打开菜单，默认是长按。
  • menuOffset: 菜单项相对于选择项的偏移量。
  • bottomOffsetHeight: 考虑底部导航栏等组件的高度，避免菜单被遮挡。

Roadmap

计划添加更多的自定义选项。

License

本项目采用 MIT License 许可证。

希望这个示例能帮助您更好地理解和使用 focused_menu 插件！如果有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用focused_menu插件的示例代码。focused_menu插件允许你创建一个焦点菜单，当用户点击或聚焦某个组件时，会弹出一个菜单。

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

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

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

以下是一个简单的示例，展示如何使用focused_menu插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Focused Menu Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FocusedMenu(
              focusNode: _focusNode,
              children: [
                FocusedMenuItem(
                  child: Text('Option 1'),
                  onSelected: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Option 1 selected')),
                    );
                  },
                ),
                FocusedMenuItem(
                  child: Text('Option 2'),
                  onSelected: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Option 2 selected')),
                    );
                  },
                ),
                FocusedMenuItem(
                  child: Text('Option 3'),
                  onSelected: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Option 3 selected')),
                    );
                  },
                ),
              ],
            ),
            SizedBox(height: 20),
            TextButton(
              onPressed: () => _focusNode.requestFocus(),
              child: Text('Focus Menu'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. FocusedMenu组件使用了一个FocusNode来管理焦点。当FocusNode获得焦点时，菜单项会显示出来。
  2. FocusedMenuItem是菜单中的每一个选项，当用户点击某个选项时，会触发onSelected回调。
  3. 一个TextButton被用来请求FocusNode的焦点，当用户点击这个按钮时，菜单会显示出来。

运行这个代码，当你点击“Focus Menu”按钮时，焦点会转移到FocusedMenu组件，并显示菜单项。点击菜单项会显示一个SnackBar，表明哪个选项被选中了。

这个示例展示了基本的用法，你可以根据需要自定义菜单项和回调逻辑。

回到顶部