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

Question

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

android-studiointellij-ideaflutterwidget

40

如果我有一个复杂的布局，想要简化它，那么在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,
            ),
          ),
        ),
      ],
    );
  }
}

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

- Suragch

7个回答

34

在Android Studio中提取Flutter特定代码到变量、常量、方法或作为Widget：

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

2. 右键点击 -> 重构 -> 提取 -> 选择所需的重构类型。

快捷键因您的Android Studio配置而异，但快捷键也写在那里以便于简化您的任务。

- ibhavikmakwana

哦，我没有提取Flutter小部件的选项... 我已经安装了Flutter和Dart插件。 - sonic

Ctrl+Alt+m 是用于方法而不是小部件！ - Ario

11

在我的情况下，Android Studio 中的 Ctrl+Alt+W 快捷键无法使用。要解决此问题，只需打开 Keymap Settings 并重新设置该快捷键 —— Android Studio 将删除有冲突的快捷键，然后它就可以正常工作了。

- Rodion Mostovoi

1

在我的情况下，Kotlin 覆盖了这个键映射。谢谢！ - Kunami

谢谢，把我的改成[Alt+W]，现在可以用了。 - NXT Dev

4

为了解决Kotlin快捷键覆盖“提取新小部件”命令的问题，请前往“首选项 > 键映射”，搜索“运行Scratch文件”。右键单击并删除Kotlin快捷键。

- Michal

3

你可以使用命令 Alt+Enter 轻松实现此操作。

在这篇文章中已经很好地解释了这一点。

- Jacin Montava

1

在Android Studio中，ALT ENTER并不是“从UI布局中提取Flutter小部件的快捷方式”，这正是Suragch所询问的。ALT ENTER允许包装和删除小部件。仅此而已。此外，该文章解释了为了提取小部件，用户应该使用Flutter Outline选项卡。因此，实际上这并没有“很好地解释”，因为它甚至没有提到一个单独的快捷键来提取小部件。 - Reinier Garcia

2

在Android Studio中，您可以按类提取小部件。

Ctrl + Alt + W

或通过方法提取小部件

Ctrl + Alt + M

- Arul

1

在Android Studio中提取小部件的新快捷键是Ctrl + Alt + E

- Malick Aftab ツ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Suragch · Accepted Answer

我将更新此答案，适用于Android Studio和VS Code

Android Studio

方法1

快捷键：

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

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

方法2

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

点击左上角的Flutter Outline
在大纲中选择小部件
右键单击并选择提取方法...或提取小部件...
给它一个名称

Visual Studio Code

把光标放到小部件名称上，然后在Mac上按Command+.或在PC上按Ctrl+.。接着从上下文菜单中选择方法(Method)或小部件(Widget)。