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的作用和安装使用教程

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

当我们想要在github上克隆不同的项目下来运行时，会发现项目的语言环境或包的版本不同，出现版本冲突问题会导致程序无法运行、兼容性问题频出。我们常常需要管理多个项目，每个项目可能依赖于不同的包版本或编程语言环境。如果不加以管理&#…
阅读更多...
在HTML5中使用Noto Sans CJK字体的详细指南

在HTML5中使用Noto Sans CJK字体的详细指南

在HTML5中使用Noto Sans CJK字体的详细指南 方法一&#xff1a;通过Google Fonts在线加载Noto Sans CJK步骤 1&#xff1a;访问Google Fonts并获取字体链接步骤 2&#xff1a;获取字体的<link>标签步骤 3&#xff1a;在HTML文件中引入字体 方法二&#xff1a;下载并本地托…
阅读更多...
agentuniverse快速开始和踩坑

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代理的方式

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

问题背景 在国内做代码开发的都知道&#xff0c;在国际互联网我们存在看不见的墙&#xff0c;导致无法访问一些代码库和资源&#xff0c;所以在使用开发工具拉取第三方库的时候总会遇到无法连接或者连接超时的情况&#xff0c;所以就会使用一些安全的网络代理工具&#xff0c;辅…
阅读更多...
【JavaSE】Java基本数据类型缓存池

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

new Integer(18) 、 Integer.valueOf(18) 、Integer.valueOf(300) 的区别 new Integer(18) &#xff1a;每次都会创建一个新对象Integer.valueOf(x)&#xff1a; x in [-128, 127]&#xff1a;使用缓存池中的对象x not in [-128, 127]&#xff1a;创建新对象 Integer缓存池大…
阅读更多...
windows清理图标缓存

windows清理图标缓存

方法一 删除 IconCache.db 文件 进入 C:\Users\用户名\appdata\local 目录&#xff0c;直接删除 IconCache.db 文件&#xff0c;重启电脑。 需要注意的是&#xff0c;这一步中 appdata 文件夹和 IconCache.db 文件都是隐藏的系统文件&#xff0c;需要手动输入地址或者显示隐藏…
阅读更多...
【Qt】事件分发器

【Qt】事件分发器

事件分发器 概述 在 Qt 中&#xff0c;事件分发器(Event Dispatcher) 是⼀个核⼼概念&#xff0c;⽤于处理 GUI 应⽤程序中的事件。事件分发器负责将事件从⼀个对象传递到另⼀个对象&#xff0c;直到事件被处理或被取消。每个继承⾃ QObject类 或 QObject类 本⾝都可以在本类中…
阅读更多...
《纳瓦尔宝典》的核心思想在于阐述如何通过智慧和策略实现财富自由和生活幸福

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

《纳瓦尔宝典》概况 图书概况 《纳瓦尔宝典》是2022年5月10日由中信出版社出版的一本书籍&#xff0c;作者是美国作家埃里克乔根森。该书通过收集和整理硅谷知名天使投资人纳瓦尔拉维坎特在推特、博客和播客等平台上的智慧箴言&#xff0c;形成了一本关于财富积累和幸福人生的…
阅读更多...
如何在红米手机中恢复已删除的照片？（6 种方式可供选择）

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

凭借出色的相机和实惠的价格&#xff0c;小米红米系列已成为全球知名品牌。但是&#xff0c;最近有些人抱怨他们在 红米设备上丢失了许多珍贵的图片或视频&#xff0c;并希望弄清楚如何从小米手机恢复已删除的照片。好吧&#xff0c;在小米设备上恢复已删除的视频/照片并不难。…
阅读更多...
AI预测福彩3D采取888=3策略+和值012路或胆码测试9月8日新模型预测第81弹

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

经过80期的测试&#xff0c;当然有很多彩友也一直在观察我每天发的预测结果&#xff0c;得到了一个非常有价值的信息&#xff0c;那就是9码定位的命中率非常高&#xff0c;70多期一共只错了8次&#xff0c;这给喜欢打私房菜的朋友提供了极高价值的预测结果~当然了&#xff0c;大…
阅读更多...
接口（Interface）和端点（Endpoint）的区别

接口（Interface）和端点（Endpoint）的区别

在软件开发和相关的文档中&#xff0c;我们经常会看到两个专有名词&#xff1a;接口&#xff08;Interface&#xff09;和端点&#xff08;Endpoint&#xff09;。而它们的使用场景有很大的重合部分&#xff0c;让人有些分不清到底用哪个。那么&#xff0c;这两者到底有什么区别…
阅读更多...
牛客周赛 Round 59（下）

牛客周赛 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地址就变了吗

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

vue原理分析（八）研究new Vue()中的initProxy

在Vue.prototype._init 中有一些init函数&#xff0c;今天我们来研究这些init函数 Vue.prototype._init function (options) {......{initProxy(vm);}......initLifecycle(vm);initEvents(vm);initRender(vm);callHook$1(vm, beforeCreate, undefined, false /* setContext *…
阅读更多...
【C/C++】“秒懂”学C/C++不可错过的“经典编程题” — 日期类的经典运用 (含题链接)

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

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

JS笔记

9.7 1.流程控制 1.1.for..in..循环 1.for...in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里 2.在无法预知对象的任何信息&#xff0c;和循环次数的时候使用 书写格式如下 for (变量 in 对象) {代码段 } 1.2.whil语句 while 循环会在指定条件…
阅读更多...
顶点照明渲染路径

顶点照明渲染路径

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和知识图谱的大模型医疗问答机器人项目

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

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

Copyright @ 2022~2023