debugPaintSizeEnabled 在 Flutter 中不起作用答案

【问题标题】：debugPaintSizeEnabled is not working in FlutterdebugPaintSizeEnabled 在 Flutter 中不起作用
【发布时间】：2018-03-11 10:42:41
【问题描述】：

我刚开始学习 Flutter，并在 Building Layout tutorial 中构建了示例应用程序。

在source code 中建议取消注释两行，以查看可视化调试行，但到目前为止还没有运气。

import 'package:flutter/material.dart';
// Uncomment lines 7 and 10 to view the visual layout at runtime.
//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
  //debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

我尝试了什么？

热重载
完全重启
将其他调试变量设置为 true：

debugPaintPointersEnabled = 
    debugPaintBaselinesEnabled = 
    debugPaintLayerBordersEnabled = 
    debugRepaintRainbowEnabled = true;

，我从Docs 读到的。他们工作得很好。

我的设置？

Visual Studio 代码
无 Dart 2 预览模式
Flutter 测试版
我使用的是 Android 移动硬件，而不是虚拟 (Moto G5)

问题：如何让可视化调试器工作？

【问题讨论】：

标签： flutter

【解决方案1】：

我遇到了完全相同的问题，我找到的唯一解决方案是从 VSCode 命令面板切换调试绘画。

Flutter: Toggle Debug Painting

您也可以使用渲染库使其工作。

首先你需要导入它

import 'package:flutter/rendering.dart';

然后，在应用程序的 main 方法或小部件的构建方法中将 debugPaintSizeEnabled 设置为 true

void main() {
  debugPaintSizeEnabled=true;
  runApp(MyApp());
}

您需要完全重启您的应用程序才能应用效果

这是official documentation。

【讨论】：

我的命令面板中没有该命令，是我遗漏了什么吗？之后我看到 ctrl + shift + p 然后输入 Flutter 有两个选项： Flutter: Run Flutter Doctor & Flutter: New Project
确保您的项目正在运行，您应该会看到更多选项。我正在运行的版本：-颤振：0.1.5-飞镖代码扩展：2.10.0
我也没有在我的命令面板中看到该命令。我看到一堆颤动的，但没有看到切换调试绘画
这增加了一个很小的网格，不是很有用。
没有这样的切换。

【解决方案2】：

添加导入语句：

import 'dart:developer';

import 'package:flutter/rendering.dart';

然后在构建中添加 debugPaintSizeEnabled=true;喜欢：

Widget build(BuildContext context) {
    debugPaintSizeEnabled=true;

【讨论】：

在构建中初始化该变量有效，官方网站中的示例具有误导性。但是这个问题的答案，是一个更好的解决方案，我们甚至不需要导入任何依赖项！
小网格没用。

【解决方案3】：

在 VSCode 中不需要导入任何东西，只需：

按 Ctrl+Shift+P 打开命令面板（Cmd mac)
输入Flutter: Toggle Debug Painting并点击它：example。

【讨论】：

【解决方案4】：

我觉得你需要import 'package:flutter/rendering.dart';

【讨论】：

如果缺少导入，他会收到一条错误消息

【解决方案5】：

更新

以下步骤适用于 android 设备 和 android 如果您使用的是 ANDROID STUDIO，则使用虚拟设备。它只工作 Android 虚拟设备（如果您使用 VSCode）

我最近在学习同样的教程来了解 Flutter 中的布局元素。为了在运行时启用可视化布局，我所做的非常简单 -

首先

我在 main.dart 文件的顶部添加了 import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

下一步

我在 main() 方法中添加了 debugPaintSizeEnabled = true;

void main() {
  debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

终于

我对我的应用执行了完全重启以反映所有更改。 如果您执行热重载，它不会反映更改。

希望这会有所帮助。

【讨论】：

我遇到了和你刚才一样的问题。我的解决方案是：不要从 VS Code 调试器重新启动，这很棘手。只需使用flutter run -d deviceID 重新启动您的应用程序。会好的。

【解决方案6】：

在终端中按'p'

To toggle the display of construction lines (debugPaintSizeEnabled), press "p".

（这是最简单的选择！）

【讨论】：

【解决方案7】：

import 'package:flutter/material.dart';
无效的主要（）{ debugPaintSizeEnabled = true; 运行应用程序（新的我的应用程序（））； }
按 CTRL + SHIFT + P（用于窗口）打开命令面板，
输入 Flutter: Toggle Debug Painting 并点击它。

【讨论】：