Flutter 弹出菜单按钮示例教程 - Dart

在 Flutter 中，弹出菜单按钮是一个非常常见的控件。它通常用于显示一组带有的操作，例如删除、编辑、分享等。本文将向您展示如何在 Dart 中创建一个简单的弹出菜单按钮。

步骤 1：导入必要的包

在创建弹出菜单的按钮之前，您需要导入 material.dart 包。

import 'package:flutter/material.dart';

步骤 2：创建弹出菜单按钮

在创建弹出菜单的按钮之前，您需要创建一个 PopupMenuButton 控件。该控件是一个菜单按钮，它会打开一个菜单，其中包含一组选项。

PopupMenuButton<String>(
  itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
    const PopupMenuItem<String>(
      value: 'value01',
      child: Text('Option 1'),
    ),
    const PopupMenuItem<String>(
      value: 'value02',
      child: Text('Option 2'),
    ),
    const PopupMenuItem<String>(
      value: 'value03',
      child: Text('Option 3'),
    ),
    const PopupMenuItem<String>(
      value: 'value04',
      child: Text('Option 4'),
    ),
  ],
)

上述代码中：

• itemBuilder 参数是一个回调函数，用于构建菜单中的每个选项。
• PopupMenuEntry 是一个抽象类，表示菜单中的一个条目。
• PopupMenuItem 是 PopupMenuEntry 的一个具体子类，表示菜单中的一个可选项。

在上面的代码中，我们创建了一个包含四个选项的弹出菜单。

步骤 3：处理选项选择

现在，我们已经创建了一个弹出菜单按钮，但是当用户选择一个选项时，我们需要采取相应的操作。为此，我们需要使用 onSelected 回调。

PopupMenuButton<String>(
  itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
    const PopupMenuItem<String>(
      value: 'value01',
      child: Text('Option 1'),
    ),
    ...
  ],
  onSelected: (String value) {
    // Handle option selection
  },
)

在上面的代码中，当用户选择一个选项时，onSelected 回调将被调用，并且它将返回所选择选项的值。

完整代码

下面是一个完整的 Dart 文件，它创建了一个包含弹出菜单按钮的简单界面。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Popup Menu Button Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Popup Menu Button Example'),
      ),
      body: Center(
        child: PopupMenuButton<String>(
          itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
            const PopupMenuItem<String>(
              value: 'value01',
              child: Text('Option 1'),
            ),
            const PopupMenuItem<String>(
              value: 'value02',
              child: Text('Option 2'),
            ),
            const PopupMenuItem<String>(
              value: 'value03',
              child: Text('Option 3'),
            ),
            const PopupMenuItem<String>(
              value: 'value04',
              child: Text('Option 4'),
            ),
          ],
          onSelected: (String value) {
            _handleOptionSelection(value, context);
          },
        ),
      ),
    );
  }

  void _handleOptionSelection(String value, BuildContext context) {
    switch (value) {
      case 'value01':
        // Do something
        break;
      case 'value02':
        // Do something
        break;
      case 'value03':
        // Do something
        break;
      case 'value04':
        // Do something
        break;
    }
  }
}

结论

如您所见，创建一个简单的弹出菜单按钮非常容易。我们只需要使用 PopupMenuButton 控件并处理所选选项即可。希望这篇文章对您有所帮助！