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

Posted 2023-02-23

【中文标题】如何将 DiagnosticableTreeMixin 与列表一起使用？

【英文标题】：How to use DiagnosticableTreeMixin with lists?

【发布时间】：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)
]

【参考方案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,
              ),
            ),
          )
        ],
      ),
    );