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

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem <em>ipsum</em>  
  </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; 
} 
 .redbox em { 
  font: 300 48px Roboto; 
  font-style: italic; 
}  

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child:  RichText( 
        text: TextSpan( 
          style: bold24Roboto, 
          children: <TextSpan>[ 
            TextSpan(text: "Lorem "), 
            TextSpan( 
              text: "ipsum", 
              style: TextStyle( 
                fontWeight: FontWeight.w300, 
                fontStyle: FontStyle.italic, 
                fontSize: 48.0, 
              ), 
            ), 
          ], 
        ), 
      ),  
      decoration: BoxDecoration( 
        backgroundColor: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

4.3 文本摘要

在 Web 中，我们常用省略号处理溢出的文本内容，且在 HTML/CSS 中，摘要不能超过一行。 如果要在多行之后进行截断，那么就需要 JavaScript 的帮助了。

在 Flutter 中，使用 Text widget 的 maxLines 属性来指定包含在摘要中的行数，以及 overflow 属性来处理溢出文本。

（编辑：ASP站长网）