flutter foundation的TextTreeConfiguration

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示例化对象:

  1. 一般默认的就是sparseTextConfiguration对象,示例化的配置如下:
final TextTreeConfiguration sparseTextConfiguration = TextTreeConfiguration(
  prefixLineOne:            '├─',
  prefixOtherLines:         ' ',
  prefixLastChildLineOne:   '└─',
  linkCharacter:            '│',
  propertyPrefixIfChildren: '│ ',
  propertyPrefixNoChildren: '  ',
  prefixOtherLinesRootNode: ' ',
);

效果展示:

 : 
  │ ...
  │ 
  ├─: 
  │ │ 
  │ │ 
  │ │ ...
  │ │ 
  │ │
  │ └─: 
  │     ...
  │     
  │
  └─: '
    
    
    ...
    

其实和最上面的图一样

  1. 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: ' ',
);

效果图如下:

 : 
  │ ...
  │ 
  ├─: 
  ╎ │ 
  ╎ │ 
  ╎ │ ...
  ╎ │ 
  ╎ │
  ╎ └─: 
  ╎     ...
  ╎     
  ╎
  ╎╌: 
  ╎ │ 
  ╎ │ 
  ╎ │ ...
  ╎ │ 
  ╎ │
  ╎ └─: 
  ╎     ...
  ╎     
  ╎
  └╌: '
    
    
    ...
    
  1. 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,
);

效果如下:

  
  ╞═╦══  ═══
  │ ║  :
  │ ║    
  │ ║    ...
  │ ╚═══════════
  ╘═╦══  ═══
    ║  :
    ║    
    ║    ...
    ╚═══════════
  1. 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,
);

效果如下:


: :


: :


  1. singleLineTextConfiguration这个对象就是展示结果就是一个字符串,配置如下:
final TextTreeConfiguration singleLineTextConfiguration = TextTreeConfiguration(
  propertySeparator: ', ',
  beforeProperties: '(',
  afterProperties: ')',
  prefixLineOne: '',
  prefixOtherLines: '',
  prefixLastChildLineOne: '',
  lineBreak: '',
  lineBreakProperties: false,
  addBlankLineIfNoChildren: false,
  showChildren: false,
  propertyPrefixIfChildren: '  ',
  propertyPrefixNoChildren: '  ',
  linkCharacter: '',
  prefixOtherLinesRootNode: '',
);

效果如下:

: (, , ..., )
  1. 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,
);

效果如下:

 :
   (, , ..., )
  1. 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中的一篇。以上内容,如有错漏之处,还望斧正。

你可能感兴趣的:(flutter foundation的TextTreeConfiguration)