如何在所示的选定项目下方启动弹出式？

Question

            onSelected: _onSelectGuru,
            itemBuilder: (context) => [
              ...widget.wisdomData.gurus.map(
                    (guru) => PopupMenuItem<Guru>(
                  value: guru,
                  child: Text(guru.name, style: const TextStyle(color: Colors.white)),
                ),
              ),
              const PopupMenuItem<Guru>(

                value: null,
                child: Text('Random', style: TextStyle(color: Colors.white)),
              ),
            ],
            position: PopupMenuPosition.under,
            color: Colors.transparent, 
            elevation: 0, 
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.transparent,
              ),
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(selectedGuru.name, style: const TextStyle(color: Colors.white)),
                  const Icon(Icons.arrow_drop_down, color: Colors.white),
                ],
              ),
            ),
          ),

问题是，如果弹出窗口数量很小，即2至7-9，它是从正确的位置开始的，但是当项目数量较大时，它是从屏幕顶部开始的，而不是在所选项目的下方。如何制作它，使其始终从所选项目下方开始并滚动以显示所有项目。

使用SingleChildScrollview中的约束属性来限制菜单的高度，以免其扩展超出一定尺寸。

PopupMenuButton<Guru>(
  onSelected: _onSelectGuru,
  itemBuilder: (context) => [
    
    PopupMenuItem(
      enabled: false, 
      child: ConstrainedBox(
        constraints: BoxConstraints(
          maxHeight: 300, // Adjust height as needed
        ),
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ...widget.wisdomData.gurus.map(
                (guru) => PopupMenuItem<Guru>(
                  value: guru,
                  child: Text(guru.name, style: const TextStyle(color: Colors.white)),
                ),
              ),
              const PopupMenuItem<Guru>(
                value: null,
                child: Text('Random', style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
  position: PopupMenuPosition.under,
  color: Colors.black, 
  elevation: 4, 
  child: Container(
    decoration: const BoxDecoration(
      color: Colors.transparent,
    ),
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(selectedGuru.name, style: const TextStyle(color: Colors.white)),
        const Icon(Icons.arrow_drop_down, color: Colors.white),
      ],
    ),
  ),
)

Answer 1