flutter 更改弹出菜单按钮大小(宽度和高度)

mu0hgdu0  于 2023-05-01  发布在  Flutter
关注(0)|答案(4)|浏览(504)

你能告诉我如何改变弹出菜单的大小,喜欢使它更宽,更大,这里是我的代码,谢谢你了。我没有找到一些有用的信息从堆栈溢出或谷歌。..

Widget _threeItemPopup() => PopupMenuButton(
    icon: Icon(
      Icons.more_horiz,
      size: 24,
      color: Colors.white,
    ),
    onSelected: (value) {
      value();
    },
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Container(
            width: 100.0,
            child: Text('Settings')),
        value: () {
          debugPrint('open Settings');
        },
      ),
      PopupMenuItem(
        child: Container(
            width: 100.0,
            child: Text('Flutter.io')),
        value: () {
          debugPrint('goto Flutter.io');
        },
      ),
    ],
  );
mftmpeh8

mftmpeh81#

您可以设置弹出菜单的任何大小,例如500x1000(不大于屏幕大小),但您失去了其高度的自动计算,现在您必须自己跟踪它。

PopupMenuButton(
    ...
    constraints: const BoxConstraints.expand(width: 500, height: 1000),
    itemBuilder:...
rqqzpn5f

rqqzpn5f2#

你可以使用fontSize & padding(top/bottom)来使它变大。

Widget _threeItemPopup() => PopupMenuButton(
        padding: const EdgeInsets.only(
            top: 100, bottom: 100), // option 1 : padding on PopupMenuButton
        icon: const Icon(
          Icons.more_horiz,
          size: 24,
          color: Colors.black,
        ),
        onSelected: (value) {
          value();
        },
        itemBuilder: (context) => [
          PopupMenuItem(
            padding: const EdgeInsets.only(
                top: 20, bottom: 20), // option 2 : padding on PopupMenuItem
            child: const SizedBox(
                child: Padding(
              padding: EdgeInsets.only(
                  top: 20, bottom: 20), // option 3 : padding on Text
              child: Text(
                'Settings',
                style: TextStyle(fontSize: 50), // option 4 : play with fontSize
              ),
            )),
            value: () {
              debugPrint('open Settings');
            },
          ),
          PopupMenuItem(
            padding: const EdgeInsets.only(top: 20, bottom: 20),
            child: const SizedBox(
                child: Padding(
              padding: EdgeInsets.only(top: 20, bottom: 20),
              child: Text(
                'Flutter.io',
                style: TextStyle(fontSize: 50),
              ),
            )),
            value: () {
              debugPrint('goto Flutter.io');
            },
          ),
        ],
      );
4si2a6ki

4si2a6ki3#

PopupMenuButtonchild上,您可以使用SizedBox来提供您想要的大小。此外,在您的情况下,您可以只增加图标大小。PopupMenuItem也是如此

PopupMenuButton(
        child: const SizedBox(
          height: 100,
          width: 100,
          child:...,
        ),
        itemBuilder: (context) => [
          PopupMenuItem(
            child:
                Container(width: 100.0, height: 200,....),
7lrncoxx

7lrncoxx4#

由于菜单的高度保持屏幕的高度,所以为了控制它,我添加了这行BoxConstraints。tightFor(高度:300)

PopupMenuButton(
        ...
        constraints: const BoxConstraints.tightFor(height: 300),
        itemBuilder:...

相关问题