android studio真机调试_Flutter实战经验（四）：使用原生的调试器

最新推荐文章于 2024-04-22 18:00:24 发布
最新推荐文章于 2024-04-22 18:00:24 发布
阅读量997 收藏
点赞数
文章标签： android studio真机调试 flutter控制显示隐藏 xcode连接iphone调试
c4f28fd430174eef3136405ca24f2c17.png

使用原生的调试器

如果你只使用 Dart 语言开发 Flutter 应用，并且不使用特定于平台的的库或者功能，你可以使用 IDE 的调试器调试你的代码。只有这篇指南的第一部分「调试 Dart 代码」对你有用。

如果你正在开发特定于平台的的插件或者使用由 Swift，ObjectiveC，Java 或 Kotlin 语言编写的特定于平台的库，你可以使用 Xcode(用于 iOS)或者 Android Gradle(用于 Android)调试这部分代码。本文介绍如何将用于 Dart 和用于原生代码的 两个 调试器连接到你的 Dart 应用。

1. 调试 Dart 代码

你可以使用 IDE 进行一般的 Dart 调试。以下内容针对 Android Studio 进行说明，但你也可以使用你喜欢的安装并配置好 Flutter 和 Dart 插件的编辑器来进行调试。

小提示：

推荐连接到真机进行调试，而不是使用不支持 profie 构建模式的仿真器或模拟器。更多信息参考 ：Flutter实战经验(三)：构建模式的选择

1.1 Dart 调试器

  • 使用 Android Studio 打开你的项目。
  • 通过单击调试图标，同时打开调试面板并在控制台中运行应用。首次运行应用是最慢的，你会发现窗口底部的调试面板看起来会像这样：
9a521c0c48877ec5360d543b26e529e6.png

调试面板

你可以设置调试面板的显示位置，甚至可以用调试面板右侧的齿轮将其拆分到独立的窗口。对于 Android Studio 中的任何检查器都是如此。

  • 在 counter++ 这一行上添加断点。
  • 在应用里，点击 + 按钮(FloatingActionButton，或者简称 FAB)来增加数字。应用会暂停。
  • 以下截图显示：
094d9179d4d95960331573de08c1193c.png
编辑面板中的断点。当在断点处暂停时，在调试面板中显示应用的状态。this 变量展开并显示其值。

你可以 step in/out/over Dart 语句、热重载和恢复执行应用、以及像使用其他调试器一样来使用 Dart 调试器。 5: Debug 按钮切换调试面板的显示。

1.2 Flutter inspector

Flutter 插件提供了另外两个可能给你提供帮助的功能。Flutter inspector 是一个用来可视化以及查看 Flutter widget 树的工具，并帮助你：

  • 了解现有布局
  • 诊断布局问题

你可以使用 Android Studio 窗口右侧的垂直按钮切换检查器的显示。

3dcb192265888744ee93b5d24fa29266.png

1.3 Flutter outline

Flutter Outline 以可视形式显示构建方法。注意在构建方法上可能与 widget 树不同。你可以使用 Android Studio 窗口右侧的垂直按钮切换 outline 的显示。

df4b3e16c92e9aff53c701a18ad57f30.png

这篇指南剩下的部分介绍了如何搭建原生代码的调试环境。你应该可以想象到，对于 iOS 和

Android 这个过程是不同的。

小提示

通过安装 Presentation Assistant 插件来成为 Android Studio 的专业用户。你可以打开 Preferences > Plugins > Browsing repositories… 并在搜索框中输入 Presen 来找到并安装这个插件。

当你安装并重启 Android Studio 之后，通过使用以下功能这个插件可以帮助你成为一个专业用户：

  • 显示你执行的任何操作的名字和 Windows/Linux/Mac 的快捷键。
  • 允许你搜索并找到可用的操作、设置、文档等等。
  • 允许你切换首选项，打开视图或者执行操作。
  • 允许你设置键盘快捷键。(无法在 Mac 上运行此功能？)

例如，尝试下这个：

  • 当焦点在编辑面板中时，输入 command-Shift-A(Mac)或者 shift-control-A(Windows 和 Linux)。该插件会同时显示「查找」面板并显示在所有三个平台上执行此操作的提示。
de6676a7a9559bf2cca7be2519a03528.png

Presentation assistant's Find panel

Presentation assistant 的「查找」面板

4cb0cecdd6d643ae93b349a565ed21c5.png

Presentation assistant's action hint for opening its Find panel on Mac, Windows and LinuxPresentation assistant 的在 Mac、Windows 和 Linux 上打开「查找」面板的操作提示。

输入 attach 显示以下内容：
f13747c699fb8569d7b7d20473176664.png
更新之后，你可以输入 Flutter 或者 Dart 来查看是否有新的可用的操作。

使用 Escape 隐藏 Presentation Assistant 的「查找」面板。

2. 使用 Android Gradle 调试(Android)

为了调试原生代码，你需要一个包含 Android 原生代码的应用。在本节中，你将学会如何连接两个调试器到你的应用：1)Dart 调试器，和 2)Android Gradle 调试器。

  • 创建一个基本的 Flutter 应用。
  • 替换 lib/main.dart 为来自 url_launcher 包的以下示例代码

添加 url_launcher 依赖到 pubspec 文件，并执行 flutter pub get：

点击调试按钮，来同时打开调试面板并启动应用。等待应用在设备上启动并在调试面板中显示 Connected。(第一次可能需要一分钟，但是之后的启动会变快。)

应用包含两个按钮：

1)Launch in browser 在你的手机默认浏览器中打开 flutter.io ，

2)Launch in app 在你的应用中打开 flutter.io。

021951cf98d34d9757bf49ec96321a20.png
  • 点击 Attach debugger to Android process 按钮()

小提示

如果这个按钮没有显示在 Projects 菜单栏上，确定你正在使用的是 Flutter 项目而不是 Flutter 插件。

从进程对话框中，你应该可以看到每一个设备的入口。选择 show all processes 来显示每个设备可用的进程。选择你想附加到的进程。在这个例子中是 Motorola Moto G 的 com.google.clickcount(或 com.company.app_name)进程。
ef50783d8fd120af17a3cdf910fafeeb.png
在调试面板中，你现在应该可以看到一个 Android Debugger 标签页。在项目面板，展开 app_name > android > app > src > main > java > io.flutter plugins。双击 GeneratedProjectRegistrant 在编辑面板中打开 Java 代码。

Dart 和原生调试器都在与同一个进程交互。使用其中一个或者同时使用两个来设置断点、检查堆栈、恢复运行…… 换句话说，调试！

b2f195d97da277c98f593481745743d5.png

Dart 调试面板和 lib/main.dart 中的两个断点。

05be1a98c2d3be7a817ca05ecaed8df7.png
weixin_39741459
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter学习(1): Flutter开发环境搭建与真机调试
csr_warrior的博客
11-30 1971
1. Flutter介绍 Flutter是谷歌公司开发的一款开源、免费的移动UI框架，可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能 Flutter是基于谷歌的dart语言开发的一款跨平台的移动App开发框架。它针对的开发者是全部开发者。它的性能相比RN、Ionic这样的框架要好一些 2. 搭建Flutter运行环境 2.1 安装配置JDK 下载地址: https://www.oracle.com/java/technologies/downloads/
AndroidStudio 下载安装教程
m0_70174175的博客
09-25 846
AndroidStudio的安装
Android——填坑android studio2.3.3升级到android studio3.2
u014132820的专栏
12-05 1605
由于各大应用市场android p版本的到来，对于没有适配的应用越来越严格，而android studio 2.3.3最高支持androd 26版本的sdk。没得办法了，还是得升级到3.2最新版本吧。 说实话，android 2.3.3用起来还是比较习惯了，网上关于3.2坑确实很多。 没办法还是花了大半天做升级。 主要有下面几个大坑： 坑1: 老项目大部分是使用compile做项目依赖的，而新的s...
Android studio配置Flutter（看这一篇就够了）
最新发布
weixin_63357306的博客
04-22 6118
Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android平台。Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native（即原生开发，指基于平台原生语言来开发应用，flutter可以和平台原生语言混合开发） 扩展。
Android Studio 2.3.3 图解配置NDK开发环境以及Hello Word To jni~
静心 Study
06-25 1万+
LZ-Says：半夜睡觉滚了地上了，无奈之下醒来了，想想最近几天因为一个括号导致JNI迟迟不能开展，心里面无奈又崩溃，索性直接起来整完得了~ 前言当前毕业的时候，感觉自己掌握了全世界，随着参加工作的时间一天天的增长，突然觉得丫的，啥都不会啊，要学的东西还是太多太多了。不过近来被飞大姐洗脑成功，万事不过几行代码而已，干它~So 今天为大家带来简单的jni配置，使用，以及运行我们的第一个简单小demo`
Test_Flutter:Flutter Visual Studio代码확인
03-16
你可以使用VS Code的调试器来运行和调试你的应用。点击侧边栏的绿色三角形按钮或使用`F5`键启动调试模式。VS Code会连接到模拟器或物理设备，并显示控制台输出。 Flutter的热重载功能使得开发过程更加高效。在开发...
Flutter Dart Android Studio 插件
12-29
Flutter是由Google开发的一个开源UI软件开发套件，用于构建高性能、高保真度的原生移动应用，支持iOS和Android平台。Flutter的核心编程语言是Dart，这是一种现代的、面向对象的、类型安全的编程语言，设计目标是提高...
first_flutterDemo
08-27
Flutter提供了强大的调试工具，如断点、性能分析器和测试框架。`test`目录可以放置单元测试代码，使用`main_test.dart`来组织测试。 总结来说，"first_flutterDemo"项目为初学者提供了一个理解Flutter项目结构、...
Android Studio Dolphin 2021.3.1 Patch 1 （Windows IDE 安装版）
11-10
7. **Flutter和Dart集成**：对于那些同时使用Flutter进行跨平台开发的开发者，Android Studio提供了更紧密的集成，包括更好的代码提示和调试工具。 8. **代码分析和质量工具**：新版本增强了静态代码分析，提供更多...
android-studio-2021.3.1.17-windows.rar
10-24
1. **集成开发环境（IDE）**：Android Studio集成了代码编辑器、项目管理工具、构建工具、调试器、模拟器等，为开发者提供了一站式解决方案。 2. **Dart和Flutter支持**：除了原生的Java和Kotlin，Android Studio也...
Android Studio2.3.3版本汉化
10-12
Android Studio2.3.3版本汉化，内附详细操作步骤，使其不报错
android studio 2.3.3 中文 汉化包 韩梦飞沙 安卓工作室 美化包
09-02
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 最新最详细全面最牛逼的汉化！稳定无BUG！设置界面可以打开！不会报错！中英对照！界面酷炫！
android studio 中调试 flutter
唐僧的专栏
11-16 2287
Flutter 调试技巧： 断点调试 变量 Variablea 视窗 与 观察 Watched 视窗 通过Framse 回退到指定位置 善于使用控制台 首先得启动 android studio 调试模式 android 代码的调试： 按两次 shift 输入 main 找到 MainActivity 就能打开 android项目调试 android的 代码了： ...
android studio2.3.3 真机调试_第一章（第6节）：使用真机
weixin_39688378的博客
12-29 183
上一节我们学习了如何使用模拟器写自动化测试程序，如果你已经开始做了实验，我相信你会骂娘的，不然你就是个忍耐能力超强的程序员，我对阁下的佩服犹如滔滔江水，连绵不绝，又如黄河泛滥，一发不可收拾......下面我们就开始使用真机吧，对了说机不带吧，文明你我他。前提条件和使用模拟器做测试的前提条件一样，我再重新说一遍下面的废话。安装 Python 解释器：Python 2 和 Python 3 都可以。点...
Android Studio 通过USB 真机运行Flutter程序
爪白白的个人博客
06-04 8710
Android Studio设置 勾选下载 Google USB Driver 手机端设置 打开手机的开发者人员选项 打开USB调式模式 不同手机略有区别，百度一下很简单的 运行Flutter 项目 通过USB连接手机后，会自动识别 识别到手机后点击绿色箭头就会在手机上安装程序， 这个过程需要一段时间，建议配置阿里云的maven仓库 google() 替换为： maven{ url ‘...
Android Studio使用Google Flutter完整教程
热门推荐
hao_qi
03-24 2万+
一套代码 iOS、Android 两端运行，Google Flutter 实在太强大。。 “Flutter 可帮助你更容易、更快速的开发界面美观的移动应用。” — — Google Flutter 使用的是 Google 自己开发的网络编程语言——Dart 语言， 因此，开发者只要使用过 Java 或 JavaScript 之类的语言，那么 Flutter 也极容易上手。 2017 ...
Android Studio五分钟带你从菜鸟到高级调试
紫雾凌寒
07-15 1万+
本文已授权微信公众号：鸿洋（hongyangAndroid）在微信公众号平台原创首发。 前段时间刚刚入职，还算比较幸运。进来就是让我做Android的。好多同学都去做其他没有接触过的东西了。刚开始一周肯定就是熟悉代码。但是我刚拿到代码我就呆了。做的是一个金融业务的APP。由于好多数据要加密所以，公司自己采用TCP层链接，用SSL加密协议。自己封装的网络框架和网络请求 。其中令我最头疼...
flutter overlay_Flutter自绘组件：微信悬浮窗（五）
05-25
在上一篇文章中，我们实现了微信悬浮窗的拖动功能。本篇文章将继续讲解如何实现微信悬浮窗的缩放功能。 ## 实现思路 微信悬浮窗的缩放功能可以通过手势识别来实现。具体来说，当用户使用两个手指捏合或张开时，我们可以识别出缩放手势，并按照缩放手势的大小来更新悬浮窗的大小。 ## 实现步骤 1. 定义缩放手势识别器。 ```dart final scaleGestureDetector = ScaleGestureRecognizer(); ``` 2. 在 initState 方法中，将缩放手势识别器添加到 GestureDetector 中。 ```dart @override void initState() { super.initState(); // 添加缩放手势识别器 scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } @override Widget build(BuildContext context) { return GestureDetector( onLongPressMoveUpdate: _handleDragUpdate, onLongPressEnd: _handleDragEnd, child: CustomPaint( size: Size(widget.width, widget.height), painter: _FloatWindowPainter(), ), // 添加缩放手势识别器 scaleGestureDetector: scaleGestureDetector, ); } ``` 3. 在 _handleScaleUpdate 方法中，根据缩放手势的大小来更新悬浮窗的大小。 ```dart void _handleScaleUpdate(ScaleUpdateDetails details) { // 计算缩放比例 double scale = details.scale; if (scale < 1.0) { // 缩小悬浮窗 widget.width *= scale; widget.height *= scale; } else { // 放大悬浮窗 widget.width += (details.scale - 1.0) * widget.width; widget.height += (details.scale - 1.0) * widget.height; } // 更新悬浮窗位置 _updatePosition(); // 通知父组件更新悬浮窗大小 widget.onSizeChanged(widget.width, widget.height); // 刷新界面 setState(() {}); } ``` 4. 在 _handleScaleEnd 方法中，重置缩放手势识别器。 ```dart void _handleScaleEnd(ScaleEndDetails details) { // 重置缩放手势识别器 scaleGestureDetector.dispose(); scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } ``` ## 完整代码 ```dart import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; class FloatWindow extends StatefulWidget { final double x; final double y; double width; double height; final Widget child; final Function(double, double) onPositionChanged; final Function(double, double) onSizeChanged; FloatWindow({ Key key, this.x, this.y, this.width, this.height, this.child, this.onPositionChanged, this.onSizeChanged, }) : super(key: key); @override _FloatWindowState createState() => _FloatWindowState(); } class _FloatWindowState extends State<FloatWindow> { Offset _offset = Offset.zero; Offset _position = Offset.zero; bool _dragging = false; final scaleGestureDetector = ScaleGestureRecognizer(); @override void initState() { super.initState(); // 添加缩放手势识别器 scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } @override Widget build(BuildContext context) { return GestureDetector( onLongPressMoveUpdate: _handleDragUpdate, onLongPressEnd: _handleDragEnd, child: CustomPaint( size: Size(widget.width, widget.height), painter: _FloatWindowPainter(), ), // 添加缩放手势识别器 scaleGestureDetector: scaleGestureDetector, ); } @override void dispose() { // 释放缩放手势识别器 scaleGestureDetector.dispose(); super.dispose(); } void _handleScaleStart(ScaleStartDetails details) { // 记录当前悬浮窗大小 widget.width = context.size.width; widget.height = context.size.height; } void _handleScaleUpdate(ScaleUpdateDetails details) { // 计算缩放比例 double scale = details.scale; if (scale < 1.0) { // 缩小悬浮窗 widget.width *= scale; widget.height *= scale; } else { // 放大悬浮窗 widget.width += (details.scale - 1.0) * widget.width; widget.height += (details.scale - 1.0) * widget.height; } // 更新悬浮窗位置 _updatePosition(); // 通知父组件更新悬浮窗大小 widget.onSizeChanged(widget.width, widget.height); // 刷新界面 setState(() {}); } void _handleScaleEnd(ScaleEndDetails details) { // 重置缩放手势识别器 scaleGestureDetector.dispose(); scaleGestureDetector ..onScaleStart = _handleScaleStart ..onScaleUpdate = _handleScaleUpdate ..onScaleEnd = _handleScaleEnd; } void _handleDragUpdate(LongPressMoveUpdateDetails details) { if (!_dragging) { _dragging = true; _offset = Offset(widget.x, widget.y); } setState(() { _position = _offset + details.offset; widget.onPositionChanged(_position.dx, _position.dy); }); } void _handleDragEnd(LongPressEndDetails details) { _dragging = false; } void _updatePosition() { if (_position.dx + widget.width / 2 > MediaQuery.of(context).size.width) { _position = Offset( MediaQuery.of(context).size.width - widget.width / 2, _position.dy, ); } if (_position.dx - widget.width / 2 < 0) { _position = Offset(widget.width / 2, _position.dy); } if (_position.dy + widget.height / 2 > MediaQuery.of(context).size.height) { _position = Offset( _position.dx, MediaQuery.of(context).size.height - widget.height / 2, ); } if (_position.dy - widget.height / 2 < 0) { _position = Offset(_position.dx, widget.height / 2); } widget.onPositionChanged(_position.dx, _position.dy); } } class _FloatWindowPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) {} @override bool shouldRepaint(_FloatWindowPainter oldDelegate) { return false; } } ``` ## 总结 本篇文章讲解了如何使用手势识别器来实现微信悬浮窗的缩放功能。通过本篇文章的学习，你已经掌握了手势识别器的使用方法，以及如何在自绘组件中使用手势识别器。在下一篇文章中，我们将讲解如何实现微信悬浮窗的旋转功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值