在我的Flutter应用程序中,用户可以指定一些输入文本,他们可以选择他们想要翻译成什么语言。现在我使用ElevatedButton.icon和DropdownButton来进行交互:
ElevatedButton.icon
DropdownButton
虽然这是有效的,我想知道是否有一个单一的小部件,显示这一个集成的UI元素,所以一个单一的元素,他们可以点击按钮本身触发onPressed事件,并按下右边的一个V形符号来更改语言并触发onChanged事件。有没有一个Flutter小部件可以将上面的两个元素合并为一个?
onPressed
onChanged
pepwfjgg1#
没有默认的,但是你可以在Elevated按钮中添加所需的子对象。例如:
ElevatedButton( onPressed: () { print("Do stuff"); }, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Icon(Icons.computer), Text('Translate to'), ], ), PopupMenuButton( itemBuilder: (c) => [ PopupMenuItem( value: '1', child: Text('English'), ) ], ) ], ), )
或者你可以在ElevatedButton中使用DropdownButton而不是PopupMenuButton来显示所选的语言。
当然,添加样式和颜色,使它看起来更好之后。有了一些样式和简单的状态管理,我个人会选择ElevatedButton和PopupMenuButton(可能将图标更改为V形),并在文本“翻译为”后附加所选语言,以获得下面的外观。我可以看到这个工作正常,只要你的语言列表不是太长。如果你的应用程序计划翻译“所有”语言,那么也许DropdownButton或一些具有过滤器功能的替代小部件更好。或者有一个单独的视图,可以选择最喜欢的语言,然后选择下面的版本并仅呈现这些。
最后一个按钮的粗略代码:
class ElevatedMenuButton extends StatefulWidget { const ElevatedMenuButton({ super.key, }); @override State<ElevatedMenuButton> createState() => _ElevatedMenuButtonState(); } class _ElevatedMenuButtonState extends State<ElevatedMenuButton> { String? selected; final languages = ['English', 'Swedish']; @override Widget build(BuildContext context) { return ElevatedButton( onPressed: () { print("Button pressed with selected value: ${selected ?? languages.first}"); }, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ const Icon(Icons.computer), Text('Translate to ${selected ?? languages.first}'), ], ), PopupMenuButton( onSelected: (v) => setState(() { selected = v; }), itemBuilder: (c) => languages .map((l) => PopupMenuItem( value: l, child: Text(l), )) .toList(), icon: const Icon(Icons.arrow_drop_down), ) ], ), ); } }
1条答案
按热度按时间pepwfjgg1#
没有默认的,但是你可以在Elevated按钮中添加所需的子对象。例如:
或者你可以在ElevatedButton中使用DropdownButton而不是PopupMenuButton来显示所选的语言。
当然,添加样式和颜色,使它看起来更好之后。
有了一些样式和简单的状态管理,我个人会选择ElevatedButton和PopupMenuButton(可能将图标更改为V形),并在文本“翻译为”后附加所选语言,以获得下面的外观。我可以看到这个工作正常,只要你的语言列表不是太长。如果你的应用程序计划翻译“所有”语言,那么也许DropdownButton或一些具有过滤器功能的替代小部件更好。或者有一个单独的视图,可以选择最喜欢的语言,然后选择下面的版本并仅呈现这些。
最后一个按钮的粗略代码: