首页 移动开发Flutter入门-Text Widgets

Flutter入门-Text Widgets

今天我们将学习怎么显示文本，并操作文本；在Flutter中，使用Text控件显示。

显示单行文本

 new Text('Text style',
   textAlign: TextAlign.center,
   style: new TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.bold,
        color: Colors.black,),
    overflow: TextOverflow.ellipsis,
            ),

其中textAlign是用来控制文本对齐方式，style控制文本包括字体，颜色，字体大小等样式。
Text文本是没有边距的设置参数，我们使用Container、Padding与Text嵌套使用。

Container
new Container( child: new Text("Container text"),
              color: Colors.blue,
              margin: const EdgeInsets.all(5.0),
              padding: const EdgeInsets.all(5.0),),

容器Container是一个常用的控件，由基本的绘制、位置和大小控件组成。负责创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制等。

Padding
new Padding(child: new Text("Padding text"),
              padding: const EdgeInsets.all(5.0),),

如果只是设置文本的边距就可以使用Padding控件来实现效果。
如果想让文本控件响应Touch事件，要把该控件放在GestureDetector控件里使用。
在我们的开发中，Row、Column与Text使用，会被遮挡，提示如下警告：
A RenderFlex overflowed by 29 pixels on the bottom ...
不管你设置多行，还是别的还是会只显示一行。这里我们要使用Expanded控件包装每个控件。
Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间(例如，Row在水平方向，Column在垂直方向)。如果多个子组件展开，可用空间会被其flex factor(表示扩展的速度、比例)分割。

显示富文本

使用RichText 可以显示丰富样式的文本。

new RichText(
  text: new TextSpan(
    text: 'Rich ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      new TextSpan(text: 'bold', style: new TextStyle(fontWeight: FontWeight.bold)),
      new TextSpan(text: ' Text!'),
    ],
  ),
)

最后的效果如下：