Question

我想在appBar上有一个Button，当我单击它时，它会像显示FAB的Floating Action一样显示三个另外的按钮，但它位于appBar上。

就像在右上角

我尝试了很多选项，例如“浮动操作”按钮，IconButton和PopupMenuButton。

这是我最好的PopupMenuButton解决方案：

PopupMenuButton<Choice>(
           
            icon: Icon(
                MyIcon.edit,
               
                size: 35, color: Colors.white, 
              ),
            //  child: IconButton( icon: Icon(
            //     MyIcon.edit,
            //     // color: Colors.white,
            //     size: 35, color: Colors.white, 
            //   ),onPressed: _buildLayoutContainer,
            //  ),
              elevation: 0,
              onSelected: choiceAction,
              itemBuilder: (BuildContext context) {
                return choices.map((Choice choice) {
                  if (choice.text == null) {
                    return PopupMenuItem<Choice>(
                      value: choice,
                      child: Row(
                        children: <Widget>[
                          SizedBox(
                            height: 50,
                            width: 1,
                          ),
                        ],
                      ),
                    );
                  } else {
                    return PopupMenuItem<Choice>(
    
                    
                      value: choice,
                      child: Row(
                       mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.end,
                         
                        children: <Widget>[
                          SizedBox(
                            width: 103,
                          ),
                          choice.text,
                          SizedBox(
                            width: choice.width,
                          ),
                          Column(
                            children: <Widget>[
                              IconButton(
                                icon: choice.icon,
                                onPressed: () => _selectTransaction(context),
                              ),
                              SizedBox(
                                height: choice.height,
                              )
                            ],
                          ),
                         
                        ],
                        
                      ),
                    );
                  }
                }).toList();
              }),

我没有找到一种方法将图标与右上角的编辑按钮垂直对齐，并且无法像在抽屉小部件中那样或在图1中那样对背景进行高度调整以聚焦于这三个图标。这是它的外观：

是否有一种更优雅的方法来制作这种按钮，尤其是解决背景和对齐这两个问题？

我很想听听一些建议：）

Answer 1

PopupMenuButton支持offset，您可以使用offset来调整显示位置
您可以参考https://medium.com/flutteropen/widgets-14-popupmenubutton-1f1437bbdce2

代码段

PopupMenuButton<Choice>(
        offset: Offset(100, 100), 
        icon: Icon(

参考文档中的示例

Widget _offsetPopup() => PopupMenuButton<int>(
          itemBuilder: (context) => [
                PopupMenuItem(
                  value: 1,
                  child: Text(
                    "Flutter Open",
                    style: TextStyle(
                        color: TEXT_BLACK, fontWeight: FontWeight.w700),
                  ),
                ),
                PopupMenuItem(
                  value: 2,
                  child: Text(
                    "Flutter Tutorial",
                    style: TextStyle(
                        color: TEXT_BLACK, fontWeight: FontWeight.w700),
                  ),
                ),
              ],
          icon: Icon(Icons.library_add),
          offset: Offset(0, 100),
        );

如何制作弹出菜单按钮（如“浮动操作按钮”）？

1 个答案: