PopupMenuEntry 的水平对齐方式答案

【问题标题】：Horizontal Alignment of PopupMenuEntryPopupMenuEntry 的水平对齐方式
【发布时间】：2017-05-09 00:47:01
【问题描述】：

有没有办法让 PopupMenu 的项目水平对齐而不仅仅是垂直对齐？

我想向小部件添加更多行为，并将其作为 PopupMenu 的子级传递，提供除呈现之外的所有要求。

【问题讨论】：

【解决方案1】：

Flutter 的popup menu 有很多内部常量，它要求弹出框的轴是垂直的。如果您想更改轴并完全控制布局和大小，您可以复制该文件并开始编辑它。

如果您对布局不太挑剔，可以通过将Row 小部件嵌入为单个弹出菜单项来伪造它。下面是一些演示该方法的代码：

import 'package:flutter/material.dart';

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

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

/// An arbitrary widget that lives in a popup menu
class PopupMenuWidget<T> extends PopupMenuEntry<T> {
  const PopupMenuWidget({ Key key, this.height, this.child }) : super(key: key);

  @override
  final Widget child;

  @override
  final double height;

  @override
  bool get enabled => false;

  @override
  _PopupMenuWidgetState createState() => new _PopupMenuWidgetState();
}

class _PopupMenuWidgetState extends State<PopupMenuWidget> {
  @override
  Widget build(BuildContext context) => widget.child;
}


class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          new PopupMenuButton<String>(
            onSelected: (String value) {
              print("You selected $value");
            },
            itemBuilder: (BuildContext context) {
              return [
                new PopupMenuWidget(
                  height: 40.0,
                  child: new Row(
                    children: [
                      new IconButton(
                        icon: new Icon(Icons.add),
                        onPressed: () => Navigator.pop(context, 'add')),
                      new IconButton(
                        icon: new Icon(Icons.remove),
                        onPressed: () => Navigator.pop(context, 'remove')),
                    ],
                  ),
                ),
              ];
            }
          ),
        ],
      ),
    );
  }
}

【讨论】：

我一直在深入研究代码，并一直在寻找有关最佳方法的确认。谢谢@collin。
太棒了！只需添加 1 件额外的东西...您可能必须覆盖 bool代表 (T value) 。虽然这里不需要根据文档的实现，但我只是做了{return true;}

【解决方案2】：

import 'package:flutter/material.dart';

/// An arbitrary widget that lives in a popup menu
class PopupMenuWidget<T> extends PopupMenuEntry<T> {
  const PopupMenuWidget({
    Key? key,
    required this.height,
    required this.child,
  }) : super(key: key);
  final Widget child;

  @override
  final double height;

  @override
  _PopupMenuWidgetState createState() => _PopupMenuWidgetState();

  @override
  bool represents(T? value) => false;
}

class _PopupMenuWidgetState extends State<PopupMenuWidget> {
  @override
  Widget build(BuildContext context) => widget.child;
}

在零安全应用程序中使用它

【讨论】：