Flutter-文本Widget

在学习过程中很多常见的方式需要了解一下,在Android中,文本展示使用TextView,iOS中我们使用UILabel来显示文本。看看flutter中是怎么使用的。
1,普通的文本:
直接在text中列出

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
        "《将进酒》李白 〔唐代〕"
            "\n君不见黄河之水天上来,奔流到海不复回。"
            "\n君不见高堂明镜悲白发,朝如青丝暮成雪。"
            "\n人生得意须尽欢,莫使金樽空对月。"
            "\n天生我材必有用,千金散尽还复来。"
            "\n烹羊宰牛且为乐,会须一饮三百杯。"
            "\n岑夫子,丹丘生,将进酒,杯莫停。"
            "\n与君歌一曲,请君为我倾耳听。"
            "\n钟鼓馔玉不足贵,但愿长醉不愿醒。"
            "\n古来圣贤皆寂寞,惟有饮者留其名。"
            "\n 陈王昔时宴平乐,斗酒十千恣欢谑。"
            "\n 主人何为言少钱,径须沽取对君酌。"
            "\n五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。",
    style: TextStyle(
        fontSize: 20,
      color: Colors.red
    ),
    );
  }

}

字体大小 fontSize、文本颜色 color、字体名称 fontFamily、文本阴影 shadows 等等,这些参数被统一封装到了构造函数中的参数 style 中。
改变其中的布局:
textAlign:文本对齐方式
maxLines:最大显示行数
overflow:超出部分显示方式
textScaleFactor:控制文本缩放

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
        "《将进酒》李白 〔唐代〕"
            "\n君不见黄河之水天上来,奔流到海不复回。"
            "\n君不见高堂明镜悲白发,朝如青丝暮成雪。"
            "\n人生得意须尽欢,莫使金樽空对月。"
            "\n天生我材必有用,千金散尽还复来。"
            "\n烹羊宰牛且为乐,会须一饮三百杯。"
            "\n岑夫子,丹丘生,将进酒,杯莫停。"
            "\n与君歌一曲,请君为我倾耳听。"
            "\n钟鼓馔玉不足贵,但愿长醉不愿醒。"
            "\n古来圣贤皆寂寞,惟有饮者留其名。"
            "\n 陈王昔时宴平乐,斗酒十千恣欢谑。"
            "\n 主人何为言少钱,径须沽取对君酌。"
            "\n五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。",
    textAlign: TextAlign.center,
    maxLines: 13,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
        fontSize: 18,
      color: Colors.red
    ),
    );
  }

}

几种常见的样式对齐方式的展示。

2,文本中还有富文本的展示
古诗名和作者想要不同的展示和颜色的方式呈现

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(text: "《将进酒》",style: TextStyle(fontSize: 20,color: Colors.red,fontWeight: FontWeight.bold)),
          TextSpan(text: "李白 〔唐代〕",style: TextStyle(fontSize: 18,color: Colors.green)),
          TextSpan(text: "\n君不见黄河之水天上来,奔流到海不复回。"
              "\n君不见高堂明镜悲白发,朝如青丝暮成雪。"
              "\n人生得意须尽欢,莫使金樽空对月。"
              "\n天生我材必有用,千金散尽还复来。"
              "\n烹羊宰牛且为乐,会须一饮三百杯。"
              "\n岑夫子,丹丘生,将进酒,杯莫停。"
              "\n与君歌一曲,请君为我倾耳听。"
              "\n钟鼓馔玉不足贵,但愿长醉不愿醒。"
              "\n古来圣贤皆寂寞,惟有饮者留其名。"
              "\n 陈王昔时宴平乐,斗酒十千恣欢谑。"
              "\n 主人何为言少钱,径须沽取对君酌。"
              "\n五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。",style: TextStyle(fontSize: 18,color: Colors.blue))
        ]
      ),
      textAlign: TextAlign.center,
    );
  }

}

文本的展示,下个版本展示按钮的文本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值