TextTreeConfiguration这个类没有方法，只有一些属性，它是做什么用的呢，我们先看一下：
<root_name>: <root_description>
│ <property1>
│ <property2>
│ ...
│ <propertyN>
├─<child_name>: <child_description>
│ │ <property1>
│ │ <property2>
│ │ ...
│ │ <propertyN>
│ │
│ └─<child_name>: <child_description>
│ <property1>
│ <property2>
│ ...
│ <propertyN>
│
└─<child_name>: <child_description>'
<property1>
<property2>
...
<propertyN>
是不是很熟悉，就是我们在devtool里看到的Flutter Inspector看到的呈现。
属性分别有：
prefixLineOne(第一行的前缀)
prefixOtherLines(其他行前缀)
prefixLastChildLineOne(在第一行添加前缀，以显示最后一个节点有这种样式)
prefixOtherLinesRootNode(如果这个节点是根节点，其他行有这个前缀)
linkCharacter(这个是链接符号，类似"└─"这种，从父到子的链接)
propertyPrefixIfChildren(如果节点是子节点，就在每个property前面添加类似于linkCharacter的prefix)
propertyPrefixNoChildren(如果改节点没有子节点，就在每个property前面添加的前缀，一般默认是空格的)
-----------------------以上是required
lineBreak(换行，一般默认值是"\n")
lineBreakProperties (即上面展示的property是换行，还是在一行展示，上面展示的就是换行的)
afterName(节点名字后面的添加的内容，一般就是如上所示的“:”)
afterDescriptionIfBody(如果有主体情况下，description后面添加的文本)
afterDescription(description后面添加文本)
beforeProperties(在Properties前面添加文本)
afterProperties(在Properties后面添加文本)
mandatoryAfterProperties(在Properties后面强制添加文本，即使没有properties)
propertySeparator(property之间的分割符)
bodyIndent(这个是对body 内所有行加一个前缀，除了name和description，所有的内容都是body)
footer(在非根节点的最后添加一行文本，即注脚)
showChildren(是否显示该节点的所有children)
addBlankLineIfNoChildren(如果没有子节点，是否在末尾添加一个空白行)
isNameOnOwnLine(name相对于description是否要独占一行)
isBlankLineBetweenPropertiesAndChildren(是否在properties和children之间添加一个空白行)
beforeName(在name前面添加前缀)
suffixLineOne(在第一行后面添加文本)
mandatoryFooter(即使是根节点，在最后添加一行文本，即注脚)
childLinkSpace(如果这个节点是父节点的最后一个节点，所以它的body就不需要绘制链接符了)
下面说一下我们常看到的几种TextTreeConfiguration示例化对象：
- 一般默认的就是sparseTextConfiguration对象，示例化的配置如下：
final TextTreeConfiguration sparseTextConfiguration = TextTreeConfiguration(
prefixLineOne: '├─',
prefixOtherLines: ' ',
prefixLastChildLineOne: '└─',
linkCharacter: '│',
propertyPrefixIfChildren: '│ ',
propertyPrefixNoChildren: ' ',
prefixOtherLinesRootNode: ' ',
);
效果展示：
<root_name>: <root_description>
│ <property1>
│ <property2>
│ ...
│ <propertyN>
├─<child_name>: <child_description>
│ │ <property1>
│ │ <property2>
│ │ ...
│ │ <propertyN>
│ │
│ └─<child_name>: <child_description>
│ <property1>
│ <property2>
│ ...
│ <propertyN>
│
└─<child_name>: <child_description>'
<property1>
<property2>
...
<propertyN>
其实和最上面的图一样
- dashedTextConfiguration对象基本和sparseTextConfiguration一样，只是在父节点和子节点的链接上是虚线的。示例化的配置如下：
final TextTreeConfiguration dashedTextConfiguration = TextTreeConfiguration(
prefixLineOne: '╎╌',
prefixLastChildLineOne: '└╌',
prefixOtherLines: ' ',
linkCharacter: '╎',
// Intentionally not set as a dashed line as that would make the properties
// look like they were disabled.
propertyPrefixIfChildren: '│ ',
propertyPrefixNoChildren: ' ',
prefixOtherLinesRootNode: ' ',
);
效果图如下：
<root_name>: <root_description>
│ <property1>
│ <property2>
│ ...
│ <propertyN>
├─<normal_child_name>: <child_description>
╎ │ <property1>
╎ │ <property2>
╎ │ ...
╎ │ <propertyN>
╎ │
╎ └─<child_name>: <child_description>
╎ <property1>
╎ <property2>
╎ ...
╎ <propertyN>
╎
╎╌<dashed_child_name>: <child_description>
╎ │ <property1>
╎ │ <property2>
╎ │ ...
╎ │ <propertyN>
╎ │
╎ └─<child_name>: <child_description>
╎ <property1>
╎ <property2>
╎ ...
╎ <propertyN>
╎
└╌<dashed_child_name>: <child_description>'
<property1>
<property2>
...
<propertyN>
- denseTextConfiguration对象在水平方向最小化的减少了空格，并且请注意properties的展示：
final TextTreeConfiguration denseTextConfiguration = TextTreeConfiguration(
propertySeparator: ', ',
beforeProperties: '(',
afterProperties: ')',
lineBreakProperties: false,
prefixLineOne: '├',
prefixOtherLines: '',
prefixLastChildLineOne: '└',
linkCharacter: '│',
propertyPrefixIfChildren: '│',
propertyPrefixNoChildren: ' ',
prefixOtherLinesRootNode: '',
addBlankLineIfNoChildren: false,
isBlankLineBetweenPropertiesAndChildren: false,
);
效果如下：
<root_name>: <root_description>(<property1>; <property2> <propertyN>)
├<child_name>: <child_description>(<property1>, <property2>, <propertyN>)
└<child_name>: <child_description>(<property1>, <property2>, <propertyN>)
4.transitionTextConfiguration这个对叶节点周围做一个配置，如下展示的就是在节点周围画一个清晰的边框。
final TextTreeConfiguration transitionTextConfiguration = TextTreeConfiguration(
prefixLineOne: '╞═╦══ ',
prefixLastChildLineOne: '╘═╦══ ',
prefixOtherLines: ' ║ ',
footer: ' ╚═══════════',
linkCharacter: '│',
// Subtree boundaries are clear due to the border around the node so omit the
// property prefix.
propertyPrefixIfChildren: '',
propertyPrefixNoChildren: '',
prefixOtherLinesRootNode: '',
afterName: ' ═══',
// Add a colon after the description if the node has a body to make the
// connection between the description and the body clearer.
afterDescriptionIfBody: ':',
// Members are indented an extra two spaces to disambiguate as the description
// is placed within the box instead of along side the name as is the case for
// other styles.
bodyIndent: ' ',
isNameOnOwnLine: true,
// No need to add a blank line as the footer makes the boundary of this
// subtree unambiguous.
addBlankLineIfNoChildren: false,
isBlankLineBetweenPropertiesAndChildren: false,
);
效果如下：
<parent_node>
╞═╦══ <name> ═══
│ ║ <description>:
│ ║ <body>
│ ║ ...
│ ╚═══════════
╘═╦══ <name> ═══
║ <description>:
║ <body>
║ ...
╚═══════════
- errorTextConfiguration这个是在一个节点周围画边框而不管它的父节点：
final TextTreeConfiguration errorTextConfiguration = TextTreeConfiguration(
prefixLineOne: '╞═╦',
prefixLastChildLineOne: '╘═╦',
prefixOtherLines: ' ║ ',
footer: ' ╚═══════════',
linkCharacter: '│',
// Subtree boundaries are clear due to the border around the node so omit the
// property prefix.
propertyPrefixIfChildren: '',
propertyPrefixNoChildren: '',
prefixOtherLinesRootNode: '',
beforeName: '══╡ ',
suffixLineOne: ' ╞══',
mandatoryFooter: '═════',
// No need to add a blank line as the footer makes the boundary of this
// subtree unambiguous.
addBlankLineIfNoChildren: false,
isBlankLineBetweenPropertiesAndChildren: false,
);
效果如下：
══╡ <name>: <description> ╞═════════════════════════════════════
<body>
...
├─<normal_child_name>: <child_description>
╎ │ <property1>
╎ │ <property2>
╎ │ ...
╎ │ <propertyN>
╎ │
╎ └─<child_name>: <child_description>
╎ <property1>
╎ <property2>
╎ ...
╎ <propertyN>
╎
╎╌<dashed_child_name>: <child_description>
╎ │ <property1>
╎ │ <property2>
╎ │ ...
╎ │ <propertyN>
╎ │
╎ └─<child_name>: <child_description>
╎ <property1>
╎ <property2>
╎ ...
╎ <propertyN>
╎
└╌<dashed_child_name>: <child_description>
════════════════════════════════════════════════════════════════
6.whitespaceTextConfiguration这个就是把很多属性设置成空格，很好理解。对象的配置如下：
final TextTreeConfiguration whitespaceTextConfiguration = TextTreeConfiguration(
prefixLineOne: '',
prefixLastChildLineOne: '',
prefixOtherLines: ' ',
prefixOtherLinesRootNode: ' ',
bodyIndent: '',
propertyPrefixIfChildren: '',
propertyPrefixNoChildren: '',
linkCharacter: ' ',
addBlankLineIfNoChildren: false,
// Add a colon after the description and before the properties to link the
// properties to the description line.
afterDescriptionIfBody: ':',
isBlankLineBetweenPropertiesAndChildren: false,
);
效果如下：
<parent_node>
<name>: <description>:
<properties>
<children>
<name>: <description>:
<properties>
<children>
7.flatTextConfiguration对象的配置参数基本就是空字符串，配置如下：
final TextTreeConfiguration flatTextConfiguration = TextTreeConfiguration(
prefixLineOne: '',
prefixLastChildLineOne: '',
prefixOtherLines: '',
prefixOtherLinesRootNode: '',
bodyIndent: '',
propertyPrefixIfChildren: '',
propertyPrefixNoChildren: '',
linkCharacter: '',
addBlankLineIfNoChildren: false,
// Add a colon after the description and before the properties to link the
// properties to the description line.
afterDescriptionIfBody: ':',
isBlankLineBetweenPropertiesAndChildren: false,
);
效果如下：
<parent_node>
<name>: <description>:
<properties>
<children>
<name>: <description>:
<properties>
<children>
- singleLineTextConfiguration这个对象就是展示结果就是一个字符串，配置如下：
final TextTreeConfiguration singleLineTextConfiguration = TextTreeConfiguration(
propertySeparator: ', ',
beforeProperties: '(',
afterProperties: ')',
prefixLineOne: '',
prefixOtherLines: '',
prefixLastChildLineOne: '',
lineBreak: '',
lineBreakProperties: false,
addBlankLineIfNoChildren: false,
showChildren: false,
propertyPrefixIfChildren: ' ',
propertyPrefixNoChildren: ' ',
linkCharacter: '',
prefixOtherLinesRootNode: '',
);
效果如下：
<name>: <description>(<property1>, <property2>, ..., <propertyN>)
- errorPropertyTextConfiguration这个对象就是把name设为一行，把body部分只设为另一行,配置如下：
final TextTreeConfiguration errorPropertyTextConfiguration = TextTreeConfiguration(
propertySeparator: ', ',
beforeProperties: '(',
afterProperties: ')',
prefixLineOne: '',
prefixOtherLines: '',
prefixLastChildLineOne: '',
lineBreak: '\n',
lineBreakProperties: false,
addBlankLineIfNoChildren: false,
showChildren: false,
propertyPrefixIfChildren: ' ',
propertyPrefixNoChildren: ' ',
linkCharacter: '',
prefixOtherLinesRootNode: '',
afterName: ':',
isNameOnOwnLine: true,
);
效果如下：
<name>:
<description>(<property1>, <property2>, ..., <propertyN>)
- shallowTextConfiguration这个对象渲染一个node，用很浅和很简单的方式，配置如下：
final TextTreeConfiguration shallowTextConfiguration = TextTreeConfiguration(
prefixLineOne: '',
prefixLastChildLineOne: '',
prefixOtherLines: ' ',
prefixOtherLinesRootNode: ' ',
bodyIndent: '',
propertyPrefixIfChildren: '',
propertyPrefixNoChildren: '',
linkCharacter: ' ',
addBlankLineIfNoChildren: false,
// Add a colon after the description and before the properties to link the
// properties to the description line.
afterDescriptionIfBody: ':',
isBlankLineBetweenPropertiesAndChildren: false,
showChildren: false,
);
效果如下：
<name>: <description>
<property1>
<property2>
<propertyN>
这篇文章主要就是分析了TextTreeConfiguration的源码，还有它实例出来的对象，其中有很多是我们在开发过程都会看到的，这是解读flutter foundation的diagnostic中的一篇。以上内容，如有错漏之处，还望斧正。
