如何在VSCode中包围Flutter小部件

Question

只是想知道在Visual Studio Code中是否有快捷方式或扩展程序可以将代码块包围起来，或更具体地说，突出显示部件名称，然后将该部件的子元素包围起来。

经常出现这样的情况，我已经创建了一个：

Padding(
  padding: EdgeInsets.all(10.0),
  child: Container(
  ...

但是在一些写作之后，我想将那个 Padding与其他东西包围起来，比如 Column 或 Row 。 目前，我需要在 Padding 前加上 Row(child:，然后向下滚动并添加新的)括号。

是否有一种方法只需选择 Padding，然后告诉 vs code 我要添加前缀，所以帮我添加括号？

我相信我在 IntelliJ 中看到过这种操作

- arkade

Answer 1

好的！

VS code提供了一些重构选项，包括 用列包装(Wrap with Column)：

右键点击小部件并选择“重构(Refactor)”即可。

- Rémi Rousselet

---

太好了，可惜谷歌在Flutter网站上没有提到这一点。他们只是说要使用Alt+Enter。 - SEG.Veenstra

如何快捷删除小部件？ - Bawantha

有人知道这个包装器列表是否可扩展/自定义吗？我想添加自己的或者创建一个扩展来添加更多。 - bobmoff

此外，在 Mac 上，您可以使用热键 Shift + ^ + R。 - Filgaia

要删除@Bawantha，你需要点击另一个小部件，这个命令还会显示可用的删除选项。 - Richard Sipher

Answer 2

将光标放置在您想要编辑的小部件中，使用 CTRL + . 快捷键查看选项。MacOS 用户请使用 CMD + .。就是这样。

- nonybrighto

---

对于 MacOS 系统，按下 CMD + . 可以执行相应的操作。非常感谢。 - sgon00

我也在寻找这个，谢谢！ - wbj

Answer 3

⚠️ 如果在 右键单击 上没有显示用Column包装：

• 在 Windows 上：按下 Ctrl + .
• 在 MacOs 上：按下 ⌘ + .

然后 右键单击 > 用Column包装

---

这是发生这种情况的原因: https://dartcode.org/docs/refactorings-and-code-fixes/。文档还记录了：现在您可以将快捷键绑定到重构操作上：

在Code中按Ctrl+.会打开“灯泡”菜单，显示所有代码修复/重构。 Code v1.20获得了keybind快速修复的能力。要做到这一点，您应该编辑您的keybindings.json文件，并包括下面找到的重构ID。

- fiona

Answer 4

在Windows上的VS Code中，只需右键单击任何小部件，然后按“重构”或使用键盘快捷键Ctrl+Shift+R。

- Pawan Jain

Answer 5

如果有人正在寻找Android Studio，那么在Mac上是使用option + return，在Windows上则是使用Alt + Enter。

- Sabeer

---

这更适合作为对问题的评论。人们将能够更轻松地看到它。 - Blend3rman

Answer 6

只需按下以下组合键： 在Windows上为Ctrl +句点 或 在Mac上为Command + 句点

一个列表将弹出，显示换行选项！

- Zeinab

Answer 7

在小部件上右键单击，选择“重构”，然后选择“用新小部件包装”。

- Agidigbi Ayodeji Victor

Answer 8

1. 点击小部件
2. 按下CTRL + SHIFT + R

- Ahmed Farag

Answer 9

在Ubuntu的VSCode中，快捷键也是ctrl + .，而在Ubuntu的Android Studio或Intellij中，则是alt + enter。

- mLstudent33