是否有一个Flutter小部件,用于一个带有内置下拉列表的操作按钮

c9qzyr3d  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(96)

在我的Flutter应用程序中,用户可以指定一些输入文本,他们可以选择他们想要翻译成什么语言。
现在我使用ElevatedButton.iconDropdownButton来进行交互:

虽然这是有效的,我想知道是否有一个单一的小部件,显示这一个集成的UI元素,所以一个单一的元素,他们可以点击按钮本身触发onPressed事件,并按下右边的一个V形符号来更改语言并触发onChanged事件。
有没有一个Flutter小部件可以将上面的两个元素合并为一个?

pepwfjgg

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),
          )
        ],
      ),
    );
  }
}

相关问题