从 UI 布局中提取 Flutter 小部件的快捷方式

Question

如果我想简化一个复杂的布局，Android Studio（或 IntelliJ）中将小部件提取到方法中的快捷方式是什么？

示例：

我想提取堆栈中的三个主要小部件。

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/image.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Align(
          alignment: Alignment(-0.7, -0.7),
          child: Container(
            height: 300,
            child: RichText(
              text: TextSpan(
                text: 'My text',
                style: TextStyle(
                  color: Colors.white70,
                  fontSize: 30,
                ),
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Text(
            'Some other text',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 20.0,
              fontWeight: FontWeight.w900,
              letterSpacing: 5.0,
            ),
          ),
        ),
      ],
    );
  }
}

我可以手动完成，但我正在寻找捷径。

Answer 1

我正在更新 Android Studio 和 VS Code 的答案

Android Studio

方法1

快捷键：

• Windows/Linux：将光标放在小部件名称上，然后按 Ctrl+Alt+M 将其提取为方法，或按 Ctrl+Alt+W 将其提取为方法小部件。
• MacOS：将光标放在小部件名称上，然后按 Option+Command+M 将其提取为方法，或按 Option+Command+W 将其提取为小部件。

您还可以通过右键单击小部件名称并从上下文菜单中选择 Refactor > Extract 来完成相同的操作。

方法2

您还可以从 Flutter Outline 菜单中将小部件提取到方法或新小部件中。

1. 单击左上角的Flutter Outline
2. 选择大纲中的小部件
3. 右键单击并选择提取方法...或提取小部件...
4. 给它起个名字

Visual Studio 代码

将光标放在小组件名称上，然后按 Command+.（在 Mac 上）或 Ctrl+.（在 PC 上）。然后从上下文菜单中选择 Method 或 Widget。

Answer 2

将Android studio中的Flutter特定代码提取为

varialbe

、

constant

、

method

或作为

Widget

。

1。选择您要提取的代码块。

2。右键 -> 重构 -> 提取 -> 选择你想要的重构类型。

Shortcuts

根据您的 Android studio 配置而有所不同，但快捷方式也写在那里，以简化您的任务。

Answer 3

就我而言，Android Studio 中的

Ctrl+Alt+W

热键不起作用。要修复它，只需打开键盘映射设置并重新设置此热键 - Android Studio 将删除冲突的快捷键，然后它就可以工作了。

Answer 4

要解决 Kotlin 快捷方式覆盖“提取新窗口小部件”命令的问题，请转到“首选项 > 键盘映射”并搜索“运行暂存文件”。右键单击并删除 Kotlin 快捷方式。

Answer 5

您可以使用命令 Alt+Enter 轻松完成此操作。

在这篇文章中解释得很好。

Answer 6

在android studio中，可以按类提取widget

Ctrl + Alt + W 

或者通过方法提取小部件

Ctrl + Alt + M

Answer 7

Android Studio 中提取 Widget 的新快捷键是 Ctrl + Alt + E

Answer 8

就我而言，

Ctrl

+

Alt

+

w

快捷方式被另一个 Kotlin 操作覆盖。

第1步：

转到 设置 -> 键盘映射，然后单击

Find Actions by Shortcut

按钮。

第2步：

按

Ctrl

+

Alt

+

w

。将显示与此快捷方式关联的所有操作。

您可以看到该快捷方式与另一个 Kotlin 操作关联。

第 3 步： 采取适当的措施。

现在您可以对列出的快捷方式进行编辑、删除或应用其他操作。