今是昨非

今是昨非

日出江花红胜火,春来江水绿如蓝

Flutter组件基础——Text

Flutter 组件基础 ——Text#

组件#

文本组件:Text Widget#

Text 是文本组件,类似于 iOS 中 UILabel,用于文本的展示,是布局的基础控件之一。

文本对齐方式:TextAlign#

  • TextAlign
    • center:Align the text in the center of the cotainer
    • left:Align the text on the left edge of the container
    • right:Align the text on the right edge of the container
    • start:Align the text on the leading edge of the container. For left-to-right text(TextDirection.ltr), this is the left edge. For the right-to-left text(TextDirection.rtl), this is the right edge.
    • end:Align the text on the trailing edge of the container. For left-to-right text, this is the right edge. For the right-to-left text, this is the left edge.
    • justify:Stretch lines of text that end with a soft line break to fill the width of the container. Lines that end with hard line breaks are aligned towards the start edge.

总结:TextAlign.center居中对齐,left 左对齐,right 右对齐,start 和 end 的含义取决于 TextDirection,当 TextDirection 为 ltr 即 (left-to-right) 时,start 和 end 的含义同 left 和 right 一致。当 TextDirection 为 rtl 即 (right-to-left) 时,start 和 end 的含义和 left、right 相反。justify 不生硬的换行(好吧,我翻译不了,看下图吧)

screen shot 2021-07-19 at 14.45.08.png

screen shot 2021-07-19 at 14.45.33.png

image image image image image image image image image

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text widget',
        home: Scaffold(
            appBar: AppBar(title: Text('AppBarTitle')),
            body: Center(
              child: Text(
                'Hello FlutterTextDirection为rtl,textAlign为justify',
                textAlign: TextAlign.justify,
                textDirection: TextDirection.ltr,
                // maxLines: 1,
                // overflow: TextOverflow.,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Color.fromARGB(255, 160, 160, 160),
                  // decoration: TextDecoration.lineThrough,
                  // decorationStyle: TextDecorationStyle.solid,
                ),
              ),
            )));
  }
}

文本排列方向 textDirection#

textDirection 类似于 H5 中的 'row-reverse' 的概念,影响的是 textAlign 中的 start、end 和 justify 属性。

最大行数 maxLines#

注意 iOS 中设置 label 不限行数是设置numberOfLines=0,但 Flutter 中最大行数maxLines不能为 0,如果设置不限行数,不设置这个属性即可。

超出显示 overFlow#

overFlow 类似于 iOS 中的 lineBreakMode,设置超出指定行数之后的显示方式:截断、省略...

需要注意的是,是超出指定行数之后的显示,所以需要先设置 maxLines,如果不设置,默认是无限行,设置这个属性就没有意义。

  • overFlow
    • clip:Clip the overflowing text to fix its container
    • ellipsis:Use an ellipsis to indicate that the text has overflowed
    • fade:Fade the overflowing text to transparent
    • visible:Render overflowing text outside of its container

clip 超出之后截断,ellipsis 超出之后显示省略,fade 超出之后尾部显示渐变消失,visible 超出之后还渲染。见下图。

此处需要注意,overFlow 为 fade 时,设置 softWrap 为 false 与不设置的效果,不设置时阴影效果方向为从上到下,设置了之后阴影效果为超出的尾部,见下图。

image image image image image image

style 属性#

style 属性,可设置背景颜色、字体大小、字体类型和颜色、下划线样式和颜色、高度、字间距等等,具体可参考Flutter TextStyle Doc文档,常用的属性如下

  • TextStyle
    • backgroundColor:背景颜色
    • color:字体颜色
    • decoration:装饰线类型
      • none:无
      • overline:文本顶部
      • lineThrough:文本中间
      • underline:文本底部
    • decorationColor:装饰线颜色
    • decorationStyle:装饰线样式
    • fontFamily:字体
    • fontSize:字体大小
    • fontStyle:字体类型
      • italic:斜体
      • normal:正常
    • fontWeight:字体粗细
    • height:文本每行之间的高度,取值范围(1~2)
    • letterSpacing:文本之间的间距

使用如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text widget',
        home: Scaffold(
            appBar: AppBar(title: Text('AppBarTitle')),
            body: Center(
              child: Text(
                'overflow为fade,softWrap为false,maxLines为1Hello Flutter',
                textAlign: TextAlign.left, // 文本对齐方式
                textDirection: TextDirection.ltr, // 文本对齐方向
                maxLines: 1, // 最大显示多少行
                overflow: TextOverflow.fade, // 超出最大行数后效果
                softWrap: false,
                style: TextStyle(
                  backgroundColor: Color.fromARGB(255, 0, 255, 150), // 背景颜色
                  fontSize: 25.0, // 字体大小
                  fontStyle: FontStyle.normal, // 字体样式
                  fontWeight: FontWeight.bold, // 字体粗细
                  letterSpacing: 1.0, // 文本艰巨
                  height: 1, // 文本每行之间的高度,取值范围(1~2)
                  color: Color.fromARGB(255, 160, 160, 160), // 字体颜色
                  decoration: TextDecoration.lineThrough, // 装饰线类型
                  decorationStyle: TextDecorationStyle.solid, // 装饰线样式
                  decorationColor: Colors.red, // 装饰线颜色
                ),
              ),
            )));
  }
}

效果如下:

image

参考#

Flutter Api Doc
Flutter TextStyle Doc
Flutter 免费视频第二季 - 常用组件

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.