Flutter 开发指南:安卓真机、假造机调试及 VS Code 开发环境搭建 ...

打印 上一主题 下一主题

主题 1751|帖子 1751|积分 5253

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
目录
Flutter 开发指南:安卓真机、假造机调试及 VS Code 开发环境搭建
一、安卓真机调试
(一)预备工作
(二)调试步骤
二、安卓假造机调试
(一)使用 Android Studio 自带模拟器
(二)使用第三方模拟器
三、在 VS Code 中开发 Flutter 应用
(一)安装插件
(二)导入项目
(三)开发与调试
四、调试注意事项



在 Flutter 开发过程中,纯熟把握在差异设备上的调试方法以及高效的开发环境搭建至关重要。本文将详细介绍怎样在安卓真机、假造机上调试 Flutter 应用,并在 VS Code 中进行 Flutter 项目开发,同时附上相干代码示例,帮助开发者快速上手。
一、安卓真机调试

(一)预备工作



  • 预备安卓手机:确保拥有一台安卓手机,这是进行真机调试的底子设备。
  • 开启调试模式:差异型号手机开启调试模式的方法略有差异。若不清楚怎样开启,可在百度或谷歌搜索 “[手机型号] 开启调试模式”,按照搜索结果中的步骤操作,开启手机的调试模式。
  • 连接办机与电脑:使用数据线将手机和电脑相连,连接成功后,手机上会弹出提示,需允许电脑进行 USB 调试。
  • 安装 SDK 版本:打开 Android Studio,点击 “tools”,在其中安装 7.1 以上的全部常见 SDK 版本。例如,若当前手机的 SDK 版本是 11,就需要安装 SDK 11 版本。安装时注意,安装完成后先别点击 “确定”。
(二)调试步骤



  • 打开项目:在 Android Studio 中,点击 “oppo”(可能因项目而异),找到项目对应的 “android” 目录,点击 “ok”。
  • 运行项目:点击运行按钮,即可将应用运行在手机上。若之前已运行过该项目,点击运行按钮会重新运行项目。
  • 下令行调试(可选):关闭 Android Studio 后,也可在下令行工具中进行真机调试。起首,通过cd下令进入项目目录。例如,项目目录在 “D 盘 flutter 3.x/flutter 01”,可在下令行中输入cd D:\flutter 3.x\flutter 01,或在项目文件夹中直接输入cmd,快速定位到该目录。
    进入项目目录后,使用flutter devices下令查看计算机上连接的设备,确认手机是否连接成功。若连接成功,会显示对应的设备信息;若未连接成功,需检查连接步骤是否正确。确认设备连接后,使用flutter run下令即可在手机上运行项目。例如:

  1. # 进入项目目录
  2. cd D:\flutter_project
  3. # 查看设备
  4. flutter devices
  5. # 运行项目
  6. flutter run
复制代码

flutter run下令还支持热加载功能,后续开发过程中修改代码后,无需重新运行整个项目,可进步开发服从。
二、安卓假造机调试

(一)使用 Android Studio 自带模拟器



  • 创建立备:打开 Android Studio,点击 “tools”,找到 “device manager”。在弹出的界面中点击 “create device” 创建立备。选择设备时,根据电脑的分辨率选择合适的手机设备,如屏幕尺寸为 5.0 或 4.0 的设备。点击 “next”,为设备下载并安装操作体系。若已下载过所需的操作体系,可直接选择并点击 “next”;若未下载,则需选择一个操作体系进行下载,下载完成后再点击 “next”。选择设备的横竖屏模式,点击 “finish” 完成设备创建。
  • 启动设备并调试:设备创建完成后,在 “device manager” 中启动设备。启动完成后,在下令行中输入flutter devices,查看设备列表中是否出现创建的模拟器。若出现,说明模拟器预备就绪。运行项目时,在项目目录下实行flutter run -d [模拟器设备名称](若只有一个设备,可省略-d参数及设备名称),即可将项目运行在模拟器上。例如:

  1. # 查看设备
  2. flutter devices
  3. # 运行项目在指定模拟器上(假设模拟器设备名称为emulator-5554)
  4. flutter run -d emulator-5554
复制代码

首次运行项目时,可能需要一些时间进行编译和安装,后续开发中可使用热加载(按小 “r” 键)和热重启(按大 “R” 键,即 “shift + r”)功能,快速查看代码修改结果。
(二)使用第三方模拟器


使用第三方模拟器进行 Flutter 调试也很简单。在百度或谷歌搜索 “安卓模拟器”,选择合适的模拟器(如网易 MuMu 模拟器、腾讯手游助手等),下载并安装。安装完成后,按照模拟器的官方文档进行设置,设置完成后即可在 Flutter 开发中使用。在使用时,同样通过flutter devices下令查看设备,确认第三方模拟器已被识别,然后使用flutter run下令运行项目。
三、在 VS Code 中开发 Flutter 应用

(一)安装插件



  • 打开 VS Code,点击左侧的插件图标,搜索 “flutter” 并安装。
  • 搜索 “dart” 并安装,这两个插件是 Flutter 开发的底子。
  • 安装 Flutter 代码提示工具,如 “Flutter Widgets Snippets” 等。在插件搜索框中输入 “flutter”,会出现多个相干的代码提示插件,可根据个人需求选择安装。安装完成后,当输入代码时,插件会自动提示并生成对应的代码片断,例如输入 “stateless” 会提示生成无状态组件代码,输入 “stateful” 会提示生成有状态组件代码。
(二)导入项目


点击 “文件” - “打开文件夹”,选择 Flutter 项目标根目录(与 Android Studio 差异,Android Studio 需选择 “android” 目录)。例如,项目位于 “flutter 01” 文件夹,直接选择该文件夹即可打开项目。
(三)开发与调试



  • 修改代码:在 VS Code 中打开项目后,主要关注 “lib” 文件夹下的代码。例如,在一个计数器示例项目中,若要修改计数器的初始值,可找到相干代码进行修改:

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(MyApp());
  3. class MyApp extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return MaterialApp(
  7.       home: Scaffold(
  8.         appBar: AppBar(
  9.           title: Text('计数器示例'),
  10.         ),
  11.         body: Center(
  12.           child: Column(
  13.             mainAxisAlignment: MainAxisAlignment.center,
  14.             children: <Widget>[
  15.               Text(
  16.                 '点击次数:',
  17.               ),
  18.               Text(
  19.                 '0', // 可修改此处的值,如改为111
  20.                 style: Theme.of(context).textTheme.headline4,
  21.               ),
  22.             ],
  23.           ),
  24.         ),
  25.         floatingActionButton: FloatingActionButton(
  26.           onPressed: () {},
  27.           child: Icon(Icons.add),
  28.         ),
  29.       ),
  30.     );
  31.   }
  32. }
复制代码


  • 运行项目:在项目目录下的终端中输入flutter run下令运行项目。若连接了多个设备,可使用flutter run -d [设备名称]指定设备运行。例如:

  1. # 运行项目在所有连接设备上
  2. flutter run
  3. # 运行项目在指定设备(假设设备名称为Pixel_3a_API_30)上
  4. flutter run -d Pixel_3a_API_30
复制代码


  • 热加载与热重启:运行项目后,在终端中输入小 “r” 键进行热加载,输入大 “R” 键(“shift + r”)进行热重启。修改代码后,如修改页面标题:

  1. // 修改前
  2. title: Text('计数器示例'),
  3. // 修改后
  4. title: Text('Flutter应用示例'),
复制代码

保存代码后,在终端中按小 “r” 键,若热加载未生效,可按大 “R” 键进行热重启,查看修改结果。
4. 常用快捷键



  • 显示网格(p 键):按 “p” 键可在预览界面显示或潜伏网格,方便进行布局调试。再次按 “p” 键,网格会消散,该功能有助于准确调解 UI 元素的位置。
  • 切换模式(o 键):按 “o” 键可在开发过程中切换 Android 和 iOS 模式预览,方便查看应用在差异平台上的显示结果。例如,在开发 Android 应用时,可通过按 “o” 键预览 iOS 模式下的界面样式,再次按 “o” 键可切换回 Android 模式。
  • 退出预览(q 键):按 “q” 键可退出预览模式,结束项目运行。也可使用 “ctrl + c” 组合键结束项目。
四、调试注意事项



  • 关闭相干软件:在进行真机或假造机调试时,需关闭电脑上的手机助手类软件(如 360 手机助手、应用宝)以及可能占用 ADB 端口的软件(如 HBuilder)。这些软件会占用 ADB 端口,导致 Flutter 无法连接设备进行调试。
  • 检查数据线:若连接设备时出现题目,在确保软件方面无非常后,检查数据线是否正常。有些数据线仅支持充电,无法进行真机调试,需更换数据线。
  • 设备检查:使用flutter devices下令可随时检查设备连接状态,确保设备已就绪,若设备未显示在列表中,需排查连接和设置题目。

通过上述步骤,开发者可以顺利在安卓真机、假造机上调试 Flutter 应用,并在 VS Code 中高效开发 Flutter 项目。在实际开发过程中,根据项目需求和设备环境选择合适的调试方式,机动运用各种工具和快捷键,能大大进步开发服从,希望本文能对各人的 Flutter 开发之旅有所帮助。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

缠丝猫

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表