时间戳

首页 > 解决方案 > 如何将 DiagnosticableTreeMixin 与列表一起使用？

flutter - 如何将 DiagnosticableTreeMixin 与列表一起使用？

问题描述

我正在使用带有 DiagnosticableTreeMixin 的 Flutter Provider，以便在调试器中跟踪我的状态。

但是我需要设置 DiagnosticableTreeMixin 以使用列表。

例如

1) 模型设置

class MyClass with DiagnosticableTreeMixin {
  MyClass({this.value1, this.value2});

  final String value1;
  final String value2;


  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('value1', value1));
    properties.add(StringProperty('value2', value2));
  }
}

2) 提供者设置

class MyClassProvider with ChangeNotifier, DiagnosticableTreeMixin {
  List<MyClass> _listOfMyClass = [];
  List<MyClass> get listOfClass => _listOfMyClass;

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);

    properties.add(DiagnosticsProperty<List<MyClass>>(
        'ListOfMyClass', _listOfMyClass));
  }
}

在调试器中，当我打开 MyClassProvider 并查看值时，我会看到如下内容：

ListOfMyClass:[MyClass#0bb46(value1:"123",value2:"345),MyClass#0b546(value1:"123",value2:"456"),MyClass#01b46(value1:"1

这是一个有 3 个实例的例子，它总是被剪成一行。这在尝试跟踪多个值时会出现问题，因为它们根本不会显示，而且它不是可扩展的结构，因此以这种方式跟踪任何东西都很麻烦。

如何在调试器中将它们变成可读的值？

就像是

ListOfMyClass:
[
 MyClass#0bb46(value1:"123",value2:"345),
 MyClass#0bb46(value1:"123",value2:"345),
 MyClass#0bb46(value1:"123",value2:"345),
 MyClass#0bb46(value1:"123",value2:"345),
 MyClass#0bb46(value1:"123",value2:"345),
 MyClass#0bb46(value1:"123",value2:"345)
]

标签： flutterdartflutter-provider

解决方案

使用简单

可迭代属性

或者自己创建类（更多信息在flutter/lib/src/foundation/diagnostics.dart：2577）

一些例子

class _SendPostPageState extends State<SendPostPage>
    with DiagnosticableTreeMixin {
  bool isLoadig = true;

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    // properties.add(isLoadig);
    properties.add(IterableProperty('Array', [isLoadig]));
  }

  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Color(0xff262626),
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(32),
        ),
      ),
      child: ListView(
        controller: widget.scrollController,
        children: [
          Center(
            child: SizedBox(
              height: 10,
              width: 10,
              child: Material(
                color: Colors.amber,
              ),
            ),
          )
        ],
      ),
    );
  }
}

推荐阅读