Flutter PopupMenuButton 填充或全宽答案

【问题标题】：Flutter PopupMenuButton padding or full widthFlutter PopupMenuButton 填充或全宽
【发布时间】：2021-11-19 23:18:37
【问题描述】：

我需要显示...如果文本溢出和点击需要显示全文。所以我使用 PopupMenuButton 一切正常，但问题是它只显示 3 个字母并显示......然后我知道宽度很短但在我使用这个文本之前它显示了近 10 个单词我认为有一些填充或我有足够的东西显示更多文本的宽度，但没有显示

   Container(
    
    child: Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Container(
 
          width: Width *
              0.225,
          child:
              Align(
            alignment:
                Alignment.topLeft,
            child: PopupMenuButton<
                String>(
              icon:
                  Container(
                child: Text(datashowThis[index]['data'][i]['serviceName'] != null ? datashowThis[index]['data'][i]['serviceName'] : '',
                    textAlign: TextAlign.left,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    softWrap: false,
                    style: TextStyle(color: textGreyColor, fontSize: 12, fontFamily: 'SegoeUI-SemiBold')),
              ),
              onSelected:
                  (choice) {},
              itemBuilder:
                  (BuildContext context) {
                return [
                  '${datashowThis[index]['data'][i]['serviceName']}'
                ].map((String
                    choice) {
                  return PopupMenuItem<String>(
                    value: choice,
                    child: Container(width: 100, child: Text(choice, style: TextStyle(color: kPrimaryColor, fontFamily: 'SegoeUI'))),
                  );
                }).toList();
              },
            ),
          ),
        ),

                                                  

        Container(
          width: Width *
              0.16,
          child:
              Center(
            child: Text(
                datashowThis[index]['data'][i]['hourBooked_Productivity']
                    .toString(),
                textAlign: TextAlign
                    .center,
                style: TextStyle(
                    color: textGreyColor,
                    fontSize: 12,
                    fontFamily: 'SegoeUI-SemiBold')),
          ),
        ),
        Container(
          width: Width *
              0.16,
          child:
              Center(
            child: Text(
                datashowThis[index]['data'][i]['hourScheduled_Productivity']
                    .toString(),
                textAlign: TextAlign
                    .center,
                style: TextStyle(
                    color: textGreyColor,
                    fontSize: 12,
                    fontFamily: 'SegoeUI-SemiBold')),
          ),
        ),
        Container(
          width:
              Width *
                  0.2,
          child:
              Center(
            child: Text(
                datashowThis[index]['data'][i]['appointmentsBooked_Productivity']
                    .toString(),
                textAlign: TextAlign
                    .center,
                style: TextStyle(
                    color: textGreyColor,
                    fontSize: 12,
                    fontFamily: 'SegoeUI-SemiBold')),
          ),
        ),
        Container(
          width: Width *
              0.15,
          child:
              Center(
            child: Text(
                datashowThis[index]['data'][i]['bookedPercentange_Productivity']
                    .toString(),
                textAlign: TextAlign
                    .center,
                style: TextStyle(
                    color: textGreyColor,
                    fontSize: 12,
                    fontFamily: 'SegoeUI-SemiBold')),
          ),
        ),
      ],
    ),
  );

你可以在图片上看到问题

【问题讨论】：

标签： flutter dart

【解决方案1】：

问题是您将其他小部件放在需要图标小部件的位置。所以采用默认图标宽度。

解决方案：

在 PopUpMenuButton 小部件中使用 child 而不是 'icon'。示例如下：

    Container(
      width: ProjectResource.screenWidth * 0.4,
      color: AppColors.blueColor,
      child: Align(
        alignment: Alignment.topLeft,
        child: PopupMenuButton<String>(
          child: Container(
            color: AppColors.greenColor,
            child: Text('Data here sa as a a a as asas a',
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: AppColors.whiteColor,
                  fontSize: 12,
                )),
          ),
          onSelected: (choice) {},
          itemBuilder: (BuildContext context) {
            return ['Data here'].map((String choice) {
              return PopupMenuItem<String>(
                value: choice,
                child: Container(
                    width: ProjectResource.screenWidth * 0.225,
                    child: Text(choice,
                        style: TextStyle(color: AppColors.greenColor))),
              );
            }).toList();
          },
        ),
      ),
    )

因此您可以使用任何宽度和高度的 PopUpMenuButton 子项。谢谢。

【讨论】：