如何将 DiagnosticableTreeMixin 与列表一起使用？答案

【问题标题】：How to use DiagnosticableTreeMixin with lists?如何将 DiagnosticableTreeMixin 与列表一起使用？
【发布时间】：2020-09-11 19:00:37
【问题描述】：

我正在使用带有 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)
]

【问题讨论】：

标签： flutter dart provider flutter-provider

【解决方案1】：

使用简单

IterableProperty

或者自己创建类（更多信息在 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,
              ),
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：