Flutter基本组件Text使用

       Text是一个文本显示控件,用于在应用程序界面中显示单行或多行文本内容。

Text简单Demo

import 'package:flutter/material.dart';class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("My TEXT TEST")),extendBody: true,body: Column(children: [const Spacer(),Container(margin: const EdgeInsets.all(10),child: Center(child: Text("text one",style: TextStyle(fontSize: 28,fontStyle: FontStyle.italic,color: Colors.blue,letterSpacing: 2,wordSpacing: 10,fontFamily: 'Roboto'),textAlign: TextAlign.center,softWrap: true,overflow: TextOverflow.ellipsis,),),),const Spacer(),],),);}
}

重要属性

data

Text的默认构造函数中有一个必传的参数,且必须作为第一个传入的参数,类型是String,就是Text显示的文本。

 const Text(String this.data, {super.key,this.style,this.strutStyle,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,@Deprecated('Use textScaler instead. ''Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. ''This feature was deprecated after v3.12.0-2.0.pre.',)this.textScaleFactor,this.textScaler,this.maxLines,this.semanticsLabel,this.textWidthBasis,this.textHeightBehavior,this.selectionColor,}) 

style

Text默认样式是DefaultTextStyle类型。如果需要修改样式,可以通过style参数传入一个TextStyle类型的值。

 @overrideWidget build(BuildContext context) { ...final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);...
}
      style: TextStyle(fontSize: 28,fontStyle: FontStyle.italic,color: Colors.blue,letterSpacing: 2,wordSpacing: 10,fontFamily: 'Roboto'),

设置文本颜色

TextStyle(color: Colors.blue)

 

设置文本背景颜色

style:TextStyle(backgroundColor: Colors.green)

设置文本字体大小

style: TextStyle(fontSize: 100)

设置文本加粗

style: TextStyle(fontWeight: FontWeight.bold)

 

设置文本为斜体

 style: TextStyle(fontStyle: FontStyle.italic)

 

设置文本之间的间隙

   style: TextStyle(letterSpacing: 10,)

设置文本内单词间距

 style: TextStyle(wordSpacing: 100)

设置文本行高

  style: TextStyle(height: 10,)

设置文本阴影

style: TextStyle(shadows: [Shadow(color: Colors.black, offset: Offset(3, 2))])

设置文本内容删除线

   style: TextStyle(decoration: TextDecoration.lineThrough, decorationColor: Colors.yellow,)

设置文本内容下划线

       style: TextStyle(decoration: TextDecoration.underline, decorationColor: Colors.yellow,)

设置文本对齐方式

 textAlign: TextAlign.center

居中

设置文本换行

softWrap:true换行;false不换行;
import 'package:flutter/material.dart';class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("My TEXT TEST")),extendBody: true,body: Column(children: [const Spacer(),Container(margin: const EdgeInsets.all(10),child: Center(child: Text("text one texttexttexttexttexttexttexttexttexttexttexttexttext",style: TextStyle(fontSize: 50,fontStyle: FontStyle.italic,color: Colors.blue,backgroundColor: Colors.green,letterSpacing: 0,wordSpacing: 100,fontWeight: FontWeight.bold,fontFamily: 'Roboto',decoration: TextDecoration.underline, decorationColor: Colors.yellow,shadows: [Shadow(color: Colors.black, offset: Offset(3, 2))]),textAlign: TextAlign.center,maxLines: 3,softWrap: true,overflow: TextOverflow.ellipsis,),),),const Spacer(),],),);}
}

设置文本溢出

overflow: TextOverflow.ellipsis

设置文本显示最大行数

maxLines: 3

指定文本方向

textDirection: TextDirection.rtl

富文本

import 'package:flutter/material.dart';class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("My TEXT TEST")),extendBody: true,body: Column(children: [const Spacer(),Container(margin: const EdgeInsets.all(10),child: Center(// child: Text(//     "text one texttexttexttexttexttexttexttexttexttexttexttexttext",//     style: TextStyle(//         fontSize: 50,//         fontStyle: FontStyle.italic,//         color: Colors.blue,//         backgroundColor: Colors.green,//         letterSpacing: 0,//         wordSpacing: 100,//         fontWeight: FontWeight.bold,//         fontFamily: 'Roboto',//         decoration: TextDecoration.underline,//         decorationColor: Colors.yellow,//         shadows: [//           Shadow(color: Colors.black, offset: Offset(3, 2))//         ]),//     textAlign: TextAlign.center,//     maxLines: 3,//     softWrap: true,//     overflow: TextOverflow.ellipsis,//     textDirection: TextDirection.rtl),child: Text.rich(TextSpan(children: [TextSpan(text: "hhhhhhhhhhhhhhhhhhhhhhhh",style: TextStyle(color: Colors.red,fontSize: 18.0,fontWeight: FontWeight.w700)),TextSpan(text: "ooooooooooooooooooo",style: TextStyle(color: Colors.blue,fontSize: 24.0,fontWeight: FontWeight.w700)),TextSpan(text: "iiiiiiiiiiiiiiiiiiiiiiiiiii",style: TextStyle(decoration: TextDecoration.lineThrough,color: Colors.yellow,fontSize: 14.0)),TextSpan(text: "lllllllllllllllllllllllllll")]))),),const Spacer(),],),);}
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

飞速了解Conda的作用和安装使用教程

当我们想要在github上克隆不同的项目下来运行时,会发现项目的语言环境或包的版本不同,出现版本冲突问题会导致程序无法运行、兼容性问题频出。我们常常需要管理多个项目,每个项目可能依赖于不同的包版本或编程语言环境。如果不加以管理&#…

agentuniverse快速开始和踩坑

https://github.com/alipay/agentUniverse/tree/mastergithub地址:https://github.com/alipay/agentUniverse/tree/master 老大看了演示demo也想跟着做个agent工具,但踩坑太多,含泪写下博客 前置环节 git clone https://github.com/alipay/agentUniverse.git conda create -n…

AndroidStudio清除重置Http Proxy代理的方式

问题背景 在国内做代码开发的都知道,在国际互联网我们存在看不见的墙,导致无法访问一些代码库和资源,所以在使用开发工具拉取第三方库的时候总会遇到无法连接或者连接超时的情况,所以就会使用一些安全的网络代理工具,辅…

【JavaSE】Java基本数据类型缓存池

new Integer(18) 、 Integer.valueOf(18) 、Integer.valueOf(300) 的区别 new Integer(18) :每次都会创建一个新对象Integer.valueOf(x): x in [-128, 127]:使用缓存池中的对象x not in [-128, 127]:创建新对象 Integer缓存池大…

【Qt】事件分发器

事件分发器 概述 在 Qt 中,事件分发器(Event Dispatcher) 是⼀个核⼼概念,⽤于处理 GUI 应⽤程序中的事件。事件分发器负责将事件从⼀个对象传递到另⼀个对象,直到事件被处理或被取消。每个继承⾃ QObject类 或 QObject类 本⾝都可以在本类中…

《纳瓦尔宝典》的核心思想在于阐述如何通过智慧和策略实现财富自由和生活幸福

《纳瓦尔宝典》概况 图书概况 《纳瓦尔宝典》是2022年5月10日由中信出版社出版的一本书籍,作者是美国作家埃里克乔根森。该书通过收集和整理硅谷知名天使投资人纳瓦尔拉维坎特在推特、博客和播客等平台上的智慧箴言,形成了一本关于财富积累和幸福人生的…

如何在红米手机中恢复已删除的照片?(6 种方式可供选择)

凭借出色的相机和实惠的价格,小米红米系列已成为全球知名品牌。但是,最近有些人抱怨他们在 红米设备上丢失了许多珍贵的图片或视频,并希望弄清楚如何从小米手机恢复已删除的照片。好吧,在小米设备上恢复已删除的视频/照片并不难。…

AI预测福彩3D采取888=3策略+和值012路或胆码测试9月8日新模型预测第81弹

经过80期的测试,当然有很多彩友也一直在观察我每天发的预测结果,得到了一个非常有价值的信息,那就是9码定位的命中率非常高,70多期一共只错了8次,这给喜欢打私房菜的朋友提供了极高价值的预测结果~当然了,大…

牛客周赛 Round 59(下)

逆序数 题目描述 登录—专业IT笔试面试备考平台_牛客网 运行代码 #include<bits/stdc.h> using namespace std; typedef long long ll; int main() {ll n,k;cin>>n>>k;ll sum(n*(n-1))/2;cout<<sum-k<<endl;return 0; } 代码思路 组合数的计…

手机到了外地ip地址就变了吗

手机到了外地IP地址就变了吗&#xff1f;随着智能手机的普及&#xff0c;人们越来越频繁地使用手机进行各种网络活动。然而&#xff0c;关于手机IP地址是否会随着地理位置的变化而改变&#xff0c;许多用户仍心存疑惑。本文将深入探讨这一问题&#xff0c;揭示IP地址变化的奥秘…

【C/C++】“秒懂”学C/C++不可错过的“经典编程题” — 日期类的经典运用 (含题链接)

“秒懂”学C/C不可错过的“经典编程题” — 日期类的经典运用 (含题链接&#xff09; 1. 计算日期到天数转换(1). 解题思路&#xff1a;(2). 代码实现&#xff1a; 2. 打印日期(1). 解题思路&#xff1a;(2). 代码实现&#xff1a; 3. 日期累加(1). 解题思路&#xff1a;(2). 代…

顶点照明渲染路径

1. 顶点照明渲染路径处理光照的方式 基本思想就是所有的光都按照逐顶点的方式进行计算的&#xff0c;在内置渲染管线中&#xff0c;它只会最多记录8个光源的数据&#xff0c;只会将光相关的数据填充到那些逐顶点相关的内置光源变量 顶点照明渲染路径仅仅是前向渲染路径的一个…

【数据结构】希尔排序(缩小增量排序)

目录 一、基本思想 1.1 引入希尔排序的原因 1.2 基本思想 二、思路分析 三、gap分组问题 四、代码实现 4.1 代码一&#xff08;升序&#xff09; 4.2 代码二&#xff08;升序&#xff09; 五、易错提醒 六、时间复杂度分析 七、排序小tips 一、基本思想 1.1 引入希尔…

【即时通讯】轮询方式实现

技术栈 LayUI、jQuery实现前端效果。django4.2、django-ninja实现后端接口。 代码仓 - 后端 代码仓 - 前端 实现功能 首次访问页面并发送消息时需要设置昵称发送内容为空时要提示用户不能发送空消息前端定时获取消息&#xff0c;然后展示在页面上。 效果展示 首次发送需要…

【老课推荐】基于LangChain和知识图谱的大模型医疗问答机器人项目

在当今数据驱动和人工智能主导的时代&#xff0c;大模型和知识图谱的结合是一个重要的研究和应用方向。大模型实战课程通过48课时&#xff0c;分为六个主要章节&#xff0c;涵盖了从基本概念到高级应用的多方面内容。学员将通过本课程学习如何使用LangChain和OpenAI进行开发&am…

windows10-VMware17-Ubuntu-22.04-海康2K摄像头兼容问题,求解(已解决)

文章目录 1.webrtc camera测试2.ffmpeg 测试3.Ubuntu 自带相机4.解决办法 环境&#xff1a;windows10系统下&#xff0c;VMware的Ubuntu-22.04系统 问题&#xff1a;摄像头出现兼容问题&#xff0c;本来是想开发测试的&#xff0c;Ubuntu方便些。买了海康2K的USB摄像头&#xf…

自动驾驶ADAS算法--使用MATLBA和UE4生成测试视频

原文参考&#xff1a;金书世界 环境搭建参考&#xff1a;用MATLAB2020b和虚拟引擎&#xff08;Unreal Engine&#xff09;联合仿真输出AVM全景测试视频----Matlab环境搭建 matlab参考&#xff1a; https://ww2.mathworks.cn/help/driving/ug/simulate-a-simple-driving-sce…

【Transformer】Positional Encoding

文章目录 为什么需要位置编码&#xff1f;预备知识三角函数求和公式旋转矩阵逆时针旋转顺时针旋转旋转矩阵的性质 原始Transformer中的位置编码论文中的介绍具体计算过程为什么是线性变换&#xff1f; 大模型常用的旋转位置编码RoPE基本原理最简实现形式Llama3中的代码实现 两种…

智汇云舟受邀参加2024第四届国产水科学数值模型开发创新与技术应用研讨会,并成为“科技智水产业联盟”创始成员

在数字化浪潮的推动下&#xff0c;智慧水利作为国家战略的重要组成部分&#xff0c;正迎来前所未有的发展机遇。8月27-29日&#xff0c;由浙江贵仁信息科技股份有限公司主办、浙江省水利学会协办的“2024第四届国产水科学数值模型开发创新与技术应用研讨会”在杭州白马湖建国饭…

ML19_GMM高斯混合模型详解

1. 中心极限定理 中心极限定理&#xff08;Central Limit Theorem, CLT&#xff09;是概率论中的一个重要定理&#xff0c;它描述了在一定条件下&#xff0c;独立同分布的随机变量序列的标准化和的分布趋向于正态分布的性质。这个定理在统计学中有着广泛的应用&#xff0c;尤其…