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

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

在this post中有很好的解释。

Answer 2

将 Android Studio 中的Flutter特定代码提取到varialbe，constant，method或Widget中。

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

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

Shortcuts随Android Studio配置的不同而有所不同，但是在此位置也写有快捷方式。

Answer 3

就我而言，Android Studio 中的 Ctrl+Alt+W 热键不起作用。要修复它，只需打开 Keymap Settings 并重新设置此热键 - Android Studio 将删除冲突的快捷方式并使其生效。

Answer 4

要将小部件提取到方法或新小部件中，可以执行以下操作：

点击左上角的颤振轮廓
在大纲中选择小部件
右键单击并选择提取方法... 或提取小部件...
给它起个名字

这样做可以使您快速将其转换为以下内容：

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        widgetOne(),
        widgetTwo(),
        widgetThree(),
      ],
    );
  }

  Container widgetOne() {
    return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/image.jpg'),
            fit: BoxFit.cover,
          ),
        ),
      );
  }

  Align widgetTwo() {
    return 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 widgetThree() {
    return Align(
        alignment: Alignment.bottomCenter,
        child: Text(
          'Some other text',
          style: TextStyle(
            color: Colors.white70,
            fontSize: 20.0,
            fontWeight: FontWeight.w900,
            letterSpacing: 5.0,
          ),
        ),
      );
  }
}

Answer 5

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

Ctrl + Alt + W

或者通过方法提取widget

Ctrl + Alt + M

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

5 个答案: