Flutter PopupMenuItem 如何设置高度

文档:

By default, a [PopupMenuItem] is [kMinInteractiveDimension] pixels
high. If you use a widget with a different height, it must be
specified in the [height] property.

PopupMenuItem 内容的 height 比它自己的 height 大的时候按内容来显示 。

import 'package:flutter/material.dart';
import 'package:robot3/widgets.dart';

/// 下拉列表 PopupMenuButton的使用
void main() {
  final  themeData  = ThemeData(
    popupMenuTheme: PopupMenuThemeData(
      menuPadding: EdgeInsets.zero,
      color: Colors.red, // 菜单背景颜色
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0), // 菜单圆角
      ),
      elevation: 8, // 菜单阴影
      textStyle: TextStyle(
        fontSize: 4,
        color: Colors.yellow, // 菜单文字样式
      ),
    ),
  );


  runApp(MaterialApp(
      theme: themeData,
      home: const SecondScreen()));
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: CustomPopupMenuButton(),
    );
  }
}

class CustomPopupMenuButton extends StatefulWidget {
  
  _CustomPopupMenuButtonState createState() => _CustomPopupMenuButtonState();
}

class _CustomPopupMenuButtonState extends State<CustomPopupMenuButton> {
  final map = {
    "关于": Icons.info_outline,
    "帮助": Icons.help_outline,
    "问题反馈": Icons.add_comment,
  };

  
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      padding: EdgeInsets.zero, // 移除 PopupMenuButton 的外部 padding
      child: RobotText(text: '123456'),
      itemBuilder: (context) => buildItems(),
      offset: Offset(0, 50),
      color: Color(0xffF4FFFA),
      elevation: 1,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(0),
            bottomRight: Radius.circular(0),
            topRight: Radius.circular(0),
            bottomLeft: Radius.circular(0),
          )),
      onSelected: (e) {
        print(e);
        if (e == '关于') {
          // DialogAbout.show(context);
        }
      },
      onCanceled: () => print('onCanceled'),
    );
  }

  List<PopupMenuItem<String>> buildItems() {
    return map.keys
        .toList()
        .map((e) => PopupMenuItem<String>(
        height: 1, // 设置菜单项的高度
        padding: EdgeInsets.zero, // 移除 PopupMenuItem 的内边距
        value: e,
        child:
            SizedBox(height: 20,child:
            Text(e))
        )
    )
        .toList();
  }
}

效果:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值