android-studio - 从 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 更新这个答案

安卓工作室

方法一

快捷键:

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

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

方法二

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

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

Visual Studio Code

将光标放在小部件名称上，然后按 Command+。 在 Mac 上或 Ctrl+。在个人电脑上。然后从上下文菜单中选择方法或小部件。