flutter如何在所显示的选定项目下方启动弹出窗口?

问题描述 投票:0回答:1

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, // Prevents selection of this dummy item 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), ], ), ), )

flutter user-interface
1个回答
0
投票

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.