关于 Flutter 开发环境的搭建,请参照:
https://blog.csdn.net/RedKeyer/article/details/86583021

仪式性代码:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(
          title: Text("AppBar Hello")
        ),
        body: Center(
          child: Text("Hello World!"),
        ),
      ),
    );
  }
}

在 TERMINAL 中输入以下Flutter指令。
编译运行程序:

flutter run

运行成功后,按以下按键会有其他调试效果。
Observatory URL(可以看到应用的 GC、VM 方面的信息。):

http://127.0.0.1:39095/  (具体看控制台输出)

按键 r :热部署到设备显示修改后布局;
按键 p : 打开\关闭 显示网格布局;
按键 d : 退出调试,设备应用不退出;
按键 q : 退出调试,设备应用也相应退出(以上整个过程,理解为动态debug调试);
以下配图VsCode截图(对VsCode也可以开发Flutter):
在这里插入图片描述

注意:若在DeBug模式运行代码,只需要点击绿色箭头。此模式下每次Ctrl + s 保存代码,设备上的布局就会进行更新。
非DeBug模式,需要在 flutter run 启动后,按 r 键。
在这里插入图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐