1 实现的UI效果

截屏2021-05-20 下午7.12.26.png

2 实现代码 PopupMenuButton+PopupMenuItem

  1. Container(
  2. margin: EdgeInsets.only(right: 10),
  3. child: PopupMenuButton(
  4. offset: Offset(0, 60.0),//弹出菜单的位置
  5. child: Image(
  6. image: AssetImage('images/圆加.png'),
  7. width: 25,
  8. ),
  9. itemBuilder: (BuildContext context) {
  10. return <PopupMenuItem<String>>[
  11. PopupMenuItem(
  12. child: _buildPopupMenuItem('images/发起群聊.png', '发起群聊')),
  13. PopupMenuItem(
  14. child: _buildPopupMenuItem('images/添加朋友.png', '添加朋友')),
  15. PopupMenuItem(
  16. child: _buildPopupMenuItem('images/扫一扫1.png', '扫一扫')),
  17. PopupMenuItem(
  18. child: _buildPopupMenuItem('images/收付款.png', '收付款')),
  19. ];
  20. },
  21. ),
  22. )
  23. //封装菜单栏的每个菜单项
  24. Widget _buildPopupMenuItem(String imageAss, String title) {
  25. return Row(
  26. children: <Widget>[
  27. Image(
  28. image: AssetImage(imageAss),
  29. width: 20,
  30. ),
  31. Container(
  32. width: 20,
  33. ),
  34. Text(
  35. title,
  36. style: TextStyle(color: Colors.white),
  37. ),
  38. ],
  39. );
  40. }

3 修改弹出窗的背景色 cardColor

image.png