Flutter菜单按钮插件menu_button的使用

Flutter菜单按钮插件menu_button的使用

Pub Package

Flutter小部件用于简单且易于自定义地显示一个弹出式菜单按钮。

资源

安装

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

dependencies:
  menu_button: ^1.4.2+1

然后导入它：

import 'package:menu_button/menu_button.dart';

使用

该小部件有许多属性可以进行定制。我们将在这里看到一些基本参数，以便获得一个简单的菜单按钮。

首先，我们需要声明一个变量来保存所选项目（selectedKey），以及一个包含所有要在菜单按钮中显示的项目的列表。

这里我们创建一个字符串列表，我们将其命名为keys，并包含值'Low'、'Medium' 和 'High'。

String selectedKey;

List<String> keys = [
  'Low',
  'Medium',
  'High',
];

现在我们有了这两个元素，我们可以开始使用MenuButton<T>小部件了。

MenuButton<String>(
  child: normalChildButton,
  items: keys,
  itemBuilder: (String value) => Container(
    height: 40,
    alignment: Alignment.centerLeft,
    padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 16),
    child: Text(value),
  ),
  toggledChild: Container(
    child: normalChildButton,
  ),
  onItemSelected: (String value) {
    setState(() {
      selectedKey = value;
    });
  },
  onMenuButtonToggle: (bool isToggle) {
    print(isToggle);
  },
)

最后，这里是上面菜单按钮使用的child小部件的一个示例：

final Widget normalChildButton = SizedBox(
  width: 93,
  height: 40,
  child: Padding(
    padding: const EdgeInsets.only(left: 16, right: 11),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Flexible(
          child: Text(selectedKey, overflow: TextOverflow.ellipsis)
        ),
        const SizedBox(
          width: 12,
          height: 17,
          child: FittedBox(
            fit: BoxFit.fill,
            child: Icon(
              Icons.arrow_drop_down,
              color: Colors.grey,
            ),
          ),
        ),
      ],
    ),
  ),
);

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

1 回复

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


menu_button 是 Flutter 中的一个插件，用于创建自定义的菜单按钮。它允许你创建一个带有弹出菜单的按钮，用户点击按钮时会显示一个下拉菜单。这个插件非常适合需要自定义菜单样式的场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 menu_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  menu_button: ^0.3.0

然后运行 flutter pub get 来安装插件。

基本用法

下面是一个简单的例子，展示如何使用 menu_button 插件创建一个带有下拉菜单的按钮。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MenuButton Example'),
        ),
        body: Center(
          child: MenuButton(
            child: Text('Open Menu'),
            items: <String>['Option 1', 'Option 2', 'Option 3'],
            onItemSelected: (String value) {
              print('Selected: $value');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • child: 按钮的主体部分，通常是一个 Text 或 Icon 等 Widget。
  • items: 菜单项的列表，可以是字符串、Widget 或其他数据类型。
  • onItemSelected: 当用户选择一个菜单项时触发的回调函数。
  • menuButtonDecoration: 用于自定义菜单按钮的样式。
  • menuDecoration: 用于自定义菜单的样式。
  • menuItemDecoration: 用于自定义菜单项的样式。
  • menuItemPadding: 菜单项的内边距。
  • menuItemTextStyle: 菜单项的文本样式。
  • menuItemHeight: 菜单项的高度。
  • menuWidth: 菜单的宽度。
  • menuElevation: 菜单的阴影高度。

自定义样式

你可以通过 menuButtonDecoration、menuDecoration 和 menuItemDecoration 等参数来进一步自定义菜单按钮的样式。

MenuButton(
  child: Text('Open Menu'),
  items: <String>['Option 1', 'Option 2', 'Option 3'],
  onItemSelected: (String value) {
    print('Selected: $value');
  },
  menuButtonDecoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  menuDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10.0,
      ),
    ],
  ),
  menuItemDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
  ),
  menuItemPadding: EdgeInsets.all(16.0),
  menuItemTextStyle: TextStyle(color: Colors.black, fontSize: 16.0),
  menuItemHeight: 48.0,
  menuWidth: 200.0,
  menuElevation: 5.0,
)
回到顶部