Flutter 中Text的一些用法示例

最新推荐文章于 2024-06-24 07:06:19 发布

Mr_Tony

最新推荐文章于 2024-06-24 07:06:19 发布

阅读量940

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/Mr_Tony/article/details/112860268

版权

flutter 专栏收录该内容

62 篇文章 6 订阅

订阅专栏

本文整理一些项目中常用但是写法比较复杂的Text效果

文章目录

本文整理些日常开发中常用但是写起来比较复杂的效果示例

一、字体间隔和行间隔设置

效果如下：

在这里插入图片描述

代码如下：

Text("我们将在2小时内，将提现\n金额转入您的微信账户",
  textAlign: TextAlign.center,//文本居中
  style: TextStyle(
    fontSize: 14,
    color: ColorStore.c_999,
    letterSpacing: 1,//字体间隔
  ),
  strutStyle: StrutStyle(
    forceStrutHeight: true,
    height: 2,//行高设置
  ),
),

参考链接:

https://cloud.tencent.com/developer/article/1513260

二、文本居中显示

效果如下：

在这里插入图片描述

代码如下：

Text("我们将在2小时内，将提现\n金额转入您的微信账户",
  textAlign: TextAlign.center,//文本居中
),

三、多行文字进行省略

效果如下：
在这里插入图片描述

代码如下：

		Text(
            'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(
              fontSize: 14,
            ),
          )

参考链接:

flutter overflow 属性省略号解决数字、长字母串整体显示省略号问题:

https://www.it610.com/article/1289871246980358144.htm

三、TextField显示默认值

代码如下:

        TextField(
                controller: TextEditingController.fromValue(
                    TextEditingValue(
                        text: "显示的默认值啊", 
                        // 保持光标在最后
                        selection: TextSelection.fromPosition(
                            TextPosition(
                                affinity: TextAffinity.downstream,
                                offset: _userName.length)
                        )
                    )
                ),
              ),