为前端工程师准备的Flutter入门指南(7)

Web

<div class="greybox"> 
  <div class="redcircle"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* gray 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redcircle { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  text-align: center; 
  width: 160px; 
  height: 160px; 
  border-radius: 50%;  
} 

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red circle 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
        textAlign: TextAlign.center,  
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
        shape: BoxShape.circle,  
      ), 
      padding: EdgeInsets.all(16.0), 
      width: 160.0, 
      height: 160.0,  
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

四、文本

以下示例展示了如何设置字体和其他文本属性，除此外还包括一些特性比如如何变换文本字符、自定义间距以及生成摘录。

4.1 文字间距

在 CSS 中你可以通过分别给 letter-spacing 和 word-spacing 属性的长度赋值来指定每个字母以及每个单词间的空白距离。距离的单位可以是 px, pt, cm, em 等等。

在 Flutter 中，你可以在 Text widget 子元素 TextStyle 的 letterSpacing 与 wordSpacing 属性中将间距设置为逻辑像素(允许负值)。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  letter-spacing: 4px;  
} 

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: TextStyle( 
          color: Colors.white, 
          fontSize: 24.0, 
          fontWeight: FontWeight.w900, 
          letterSpacing: 4.0,  
        ), 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

4.2 内联样式

一个 Text widget 可以展示同一类样式的文本。为了展现具有多种样式的文本，需要改用 RichText widget。它的 text 属性可以指定一个或多个可以单独设置样式的 TextSpan widget。

在下例中，”Lorem” 位于 TextSpan widget 中，具有默认(继承自其父元素)文本样式，”ipsum” 位于具有自定义样式、单独的一个 TextSpan 中。

（编辑：ASP站长网）