TextTreeConfiguration这个类没有方法,只有一些属性,它是做什么用的呢,我们先看一下:
:
│
│
│ ...
│
├─:
│ │
│ │
│ │ ...
│ │
│ │
│ └─:
│
│
│ ...
│
│
└─: '
...
是不是很熟悉,就是我们在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: ' ',
);
效果展示:
:
│
│
│ ...
│
├─:
│ │
│ │
│ │ ...
│ │
│ │
│ └─:
│
│
│ ...
│
│
└─: '
...
其实和最上面的图一样
- 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: ' ',
);
效果图如下:
:
│
│
│ ...
│
├─:
╎ │
╎ │
╎ │ ...
╎ │
╎ │
╎ └─:
╎
╎
╎ ...
╎
╎
╎╌:
╎ │
╎ │
╎ │ ...
╎ │
╎ │
╎ └─:
╎
╎
╎ ...
╎
╎
└╌: '
...
- denseTextConfiguration对象在水平方向最小化的减少了空格,并且请注意properties的展示:
final TextTreeConfiguration denseTextConfiguration = TextTreeConfiguration(
propertySeparator: ', ',
beforeProperties: '(',
afterProperties: ')',
lineBreakProperties: false,
prefixLineOne: '├',
prefixOtherLines: '',
prefixLastChildLineOne: '└',
linkCharacter: '│',
propertyPrefixIfChildren: '│',
propertyPrefixNoChildren: ' ',
prefixOtherLinesRootNode: '',
addBlankLineIfNoChildren: false,
isBlankLineBetweenPropertiesAndChildren: false,
);
效果如下:
: (; )
├: (, , )
└: (, , )
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,
);
效果如下:
╞═╦══ ═══
│ ║ :
│ ║
│ ║ ...
│ ╚═══════════
╘═╦══ ═══
║ :
║
║ ...
╚═══════════
- 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,
);
效果如下:
══╡ : ╞═════════════════════════════════════
...
├─:
╎ │
╎ │
╎ │ ...
╎ │
╎ │
╎ └─:
╎
╎
╎ ...
╎
╎
╎╌:
╎ │
╎ │
╎ │ ...
╎ │
╎ │
╎ └─:
╎
╎
╎ ...
╎
╎
└╌:
════════════════════════════════════════════════════════════════
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,
);
效果如下:
: :
: :
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,
);
效果如下:
: :
: :
- singleLineTextConfiguration这个对象就是展示结果就是一个字符串,配置如下:
final TextTreeConfiguration singleLineTextConfiguration = TextTreeConfiguration(
propertySeparator: ', ',
beforeProperties: '(',
afterProperties: ')',
prefixLineOne: '',
prefixOtherLines: '',
prefixLastChildLineOne: '',
lineBreak: '',
lineBreakProperties: false,
addBlankLineIfNoChildren: false,
showChildren: false,
propertyPrefixIfChildren: ' ',
propertyPrefixNoChildren: ' ',
linkCharacter: '',
prefixOtherLinesRootNode: '',
);
效果如下:
: (, , ..., )
- 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,
);
效果如下:
:
(, , ..., )
- 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,
);
效果如下:
:
这篇文章主要就是分析了TextTreeConfiguration的源码,还有它实例出来的对象,其中有很多是我们在开发过程都会看到的,这是解读flutter foundation的diagnostic中的一篇。以上内容,如有错漏之处,还望斧正。