在 Flutter 中，如何在更大的屏幕尺寸上修复 PopupMenuItem Widget 中被截断的文本？

Question

在下面的屏幕截图中，有一个 UI 崩溃，其中 PopupMenuItem 文本因较大的屏幕尺寸而被截断，但对于较窄的屏幕则完全可见。

解决此错误的最佳方法是什么？

运行下面的代码，至少我希望屏幕截图显示的内容相反。

据我所知，我没有指定任何宽度限制。

代码设置独特的颜色背景以指示哪个小部件占用的空间。

import 'package:flutter/material.dart';

main() {
  runApp(Main2DemoApp());
}

class Main2DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Main2DemoScreen(),
    );
  }
}

class Main2DemoScreen extends StatefulWidget {
  @override
  _Main2DemoState createState() => _Main2DemoState();
}

class _Main2DemoState extends State<Main2DemoScreen> {
  static const int EMAIL_CONVERSATION = 11;

  AppScale _scale;

  @override
  Widget build(BuildContext context) {
    _scale = AppScale(context);

    Widget fullHeaderRow = Row(
      children: <Widget>[
        Container(
          color: Colors.purple[200],
          child: getPopupMenuButton(),
        ),
      ],
    );

    fullHeaderRow = Container(
      color: Colors.amber[200],
      child: fullHeaderRow,
    );

    return Scaffold(
      appBar: AppBar(title: Text('PopupMenuButton Demo')),
      body: fullHeaderRow,
    );
  }

  Widget getPopupMenuButton() {
    Widget emailPopUpItem = PopupMenuItem(
      textStyle: TextStyle(
        color: Colors.white,
        fontSize: _scale.popupMenuItem,
      ),
      child: Row(
        children: [
          Padding(
              padding: EdgeInsets.only(right: 10),
              child: Icon(
                Icons.email,
                color: Colors.white,
                size: _scale.popupMenuItem,
              )),
          Text('Send Email Message Now')
        ],
      ),
      value: EMAIL_CONVERSATION,
    );

    List<PopupMenuEntry<dynamic>> menuWidgets = [emailPopUpItem];
    double iconSize = _scale.popupMenuButton;

    PopupMenuButton popupMenuButton = PopupMenuButton(
      padding: EdgeInsets.all(0),
      color: Colors.lightGreen[700],
      offset: Offset(40, 20),
      shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(5)),
      icon: Icon(
        Icons.more_vert,
        color: Colors.white,
        size: iconSize,
      ),
      onSelected: (newValue) {
        print('newValue: $newValue');
      },
      itemBuilder: (context) => menuWidgets,
    );

    return popupMenuButton;
  }
}

class AppScale {
  BuildContext _ctxt;

  AppScale(this._ctxt);

  double get popupMenuButton => scaledWidth(.08);
  double get popupMenuItem => scaledHeight(.025);

  double scaledWidth(double widthScale) {
    return MediaQuery.of(_ctxt).size.width * widthScale;
  }

  double scaledHeight(double heightScale) {
    return MediaQuery.of(_ctxt).size.height * heightScale;
  }
}

Answer 1

弹出菜单的最大和最小宽度限制在这里定义：popup_menu.dart:554似乎是不可配置的

const double _kMenuMaxWidth = 5.0 * _kMenuWidthStep;
const double _kMenuMinWidth = 2.0 * _kMenuWidthStep;
...
const double _kMenuWidthStep = 56.0;
...
class _PopupMenu<T> extends StatelessWidget {
...
    final Widget child = ConstrainedBox(
      constraints: const BoxConstraints(
        minWidth: _kMenuMinWidth,
        maxWidth: _kMenuMaxWidth,
      )
...