【Flutter】Text的使用

想了解更多关于Flutter的知识,可以关注:
https://github.com/jiangkang/flutter-system
https://jiangkang.tech

文本作为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),
          ),

效果如下:
下划线效果

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

Text(
            "decoration: overline & underline",
            style: TextStyle(
              decoration: TextDecoration.combine(<TextDecoration>[
                TextDecoration.underline,
                TextDecoration.overline
              ]),
            ),
          )

在这里插入图片描述

文字超出边界如何显示

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

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

这几种显示样式都是通过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");},
          )
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值