Flutter-Text的使用


关注 https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识

文本作为UI最基本的元素,最基本的用法有这些:

  • 字体
  • 文字大小、颜色
  • 一些常用样式,比如倾斜,加粗,下划线,删除线等
  • 文字超出边界之后如何显示
  • 文字的单行,多行控制
  • 文字的显示方向
  • 富文本的显示
  • 文字渐变,阴影
  • 文本点击事件

字体

如果需要使用自定义字体,则需要在项目中的fonts文件夹下放置字体文件,然后在配置文件pubspec.yaml中进行配置:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

使用字体主要有两种方式,一种是通过主题设置统一的字体,一种是为单独的Widget设置字体。

通过主题设置字体:

MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: MyHomePage(),
);

单独设置字体:

Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
);

文字大小,颜色,倾斜,加粗

这些样式也都是在TextStyle中设置的:

Text("style: color,fontWeight,fontSize,fontStyle",
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 28,
                fontStyle: FontStyle.italic,
              )),

其中fontSize使用的是逻辑像素,默认为14,FontWeight.bold表示加粗,当然还可以设置指定的值,fontStyle可以用来控制文本是否倾斜。

下划线/上划线,删除线,波浪线

下划线,删除线等属于文本装饰的一种,在TextStyle中通过decoration属性描述:

TextStyle(
                decoration: TextDecoration.underline,
                decorationColor: Colors.blueAccent,
                decorationStyle: TextDecorationStyle.solid),
          ),

效果如下:

可以指定下划线的颜色,样式,比如线的实现,还是虚线,还是波浪线等;
对于这些装饰,还可以设置双下划线,点线等效果。

文字超出边界如何显示

超出边界的显示有三种类型:

  • 显示省略号
  • 直接截断
  • 渐隐

这几种显示样式都是通过overflow属性控制的:

ListTile(
          title: Text(
            "overflow: TextOverflow.ellipsis;overflow: TextOverflow.ellipsis;overflow: TextOverflow.ellipsis;",
            overflow: TextOverflow.ellipsis,
            softWrap: false,
          ),
        ),
        ListTile(
          title: Text(
            "overflow: TextOverflow.clip;overflow: TextOverflow.clip;overflow: TextOverflow.clip;",
            overflow: TextOverflow.clip,
            softWrap: false,
          ),
        ),
        ListTile(
          title: Text(
            "overflow: TextOverflow.fade,overflow: TextOverflow.fade,overflow: TextOverflow.fade,overflow: TextOverflow.fade,",
            overflow: TextOverflow.fade,
            softWrap: false,
          ),
        ),

文字的单行与多行显示

文本的多行显示,可以通过maxLines属性和softWrap属性控制,其中maxLines控制最大行数,softWrap控制是否自动换行。

Text(
            "softWrap: false;softWrap: false;softWrap: false;softWrap: false;softWrap: false;softWrap: false;",
            softWrap: false,
          )
Text(
            "softWrap: true;softWrap: true;softWrap: true;softWrap: true;softWrap: true;",
            softWrap: true,
          )

富文本

可以使用Text.rich/ RichText + TextSpan来显示富文本:

Text.rich(
            TextSpan(
              text: "plain text ",
              children: <TextSpan>[
                TextSpan(
                    text: "color", style: TextStyle(color: Colors.pinkAccent)),
                TextSpan(text: "fontSize", style: TextStyle(fontSize: 28)),
                TextSpan(
                    text: "decoration",
                    style: TextStyle(decoration: TextDecoration.lineThrough)),
              ],
            ),
          )

RichText(
              text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                  text: "Text 1", style: TextStyle(color: Colors.blueAccent)),
              TextSpan(
                  text: "Text 2",
                  style: TextStyle(color: Colors.pinkAccent, fontSize: 28)),
            ],
          ))

文字阴影

文字的阴影可以通过TextStyle中的shadows属性进行控制:

Text(
            "style: letterSpacing,shadows",
            style: TextStyle(
              shadows: <Shadow>[
                Shadow(color: Colors.pink, offset: Offset(1, 2))
              ],
            ),
          )

Text的点击事件

可以使用GestureDetector,也可以使用InkWell:

InkWell(
            child: Text(
              "Default Text",
            ),
            onTap: (){debugPrint("click");},
          )

文章作者: 姜康
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 姜康 !
评论
 上一篇
Golang语法快速入门 Golang语法快速入门
if/else 变体if statement; condition { } if condition{ } switchswitch 下的每个case不必带break,匹配到了某个case之后会自动跳出. 可以使用fallthro
2020-05-09
下一篇 
Flutter-Tabs的使用 Flutter-Tabs的使用
Flutter中使用tabs还是非常的简单的,可以用在顶部导航栏,也可以用在底部导航栏。 使用Tabs需要用到两个widget,一个是TabBar,用于顶导航或者底导航;一个是TabBarView,用于Tab下具体的
2020-05-08
  目录