Flutter基本组件Text使用

news2024/11/15 17:49:43

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

Text简单Demo

import 'package:flutter/material.dart';

class MyTextDemo extends StatelessWidget {
  const MyTextDemo({super.key});

  @override
  Widget 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类型的值。

 @override
  Widget 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});

  @override
  Widget 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});

  @override
  Widget 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.coloradmin.cn/o/2104850.html

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

相关文章

我写了个ffmpeg-spring-boot-starter 使得Java能剪辑视频!!

最近工作中在使用FFmpeg,加上之前写过较多的SpringBoot的Starter,所以干脆再写一个FFmpeg的Starter出来给大家使用。 首先我们来了解一下FFmpeg能干什么,FFmpeg 是一个强大的命令行工具和库集合,用于处理多媒体数据。它可以用来做…

【redis】redis编译和redis.conf配置

下载源码 reids 解压编译 # 解压 tar -zxvf redis-5.0.14.tar.gz cd redis-5.0.14/ make PREFIX/opt/redis install# requirepass root # 开启远程访问 bind 0.0.0.0 protected-mode no # 修改日志打印路径,修改redis.conf daemonize yes logfile /var/log/redis.…

[深度学习][LLM]:浮点数怎么表示,什么是混合精度训练?

混合精度训练 混合精度训练1. 浮点表示法:[IEEE](https://zh.wikipedia.org/wiki/电气电子工程师协会)二进制浮点数算术标准(IEEE 754)1.1 浮点数剖析1.2 举例说明例子 1:例子 2: 1.3 浮点数比较1.4 浮点数的舍入 2. 混合精度训练2.1 为什么需…

网络编程day01(IP地址、Socket、端口号)

目录 【1】IP地址 1》基本概念 IP地址 NAT设备(网络地址转换) DHCP服务器(动态主机配置协议) 2》网络号/主机号(二级划分) 3》IP地址分类 特殊地址 4》子网掩码 5》三级划分 【2】socket 1》socke…

浅谈人工智能之基于AutoGen Studio+litellm+ollama构建model

浅谈人工智能之基于AutoGen Studiolitellmollama构建model 摘要 随着自然语言处理技术的飞速发展,基于大型语言模型(Large Language Models, LLMs)的应用越来越广泛。本指南旨在介绍如何利用AutoGen Studio、litellm和ollama这三大工具&…

【数据结果-二维前缀和】力扣221. 最大正方形

在一个由 ‘0’ 和 ‘1’ 组成的二维矩阵内,找到只包含 ‘1’ 的最大正方形,并返回其面积。 示例 1: 输入:matrix [[“1”,“0”,“1”,“0”,“0”],[“1”,“0”,“1”,“1”,“1”],[“1”,“1”,“1”,“1”,“1”],[“1”…

8月刷题笔记

刷题笔记—8月 LCP40.心算挑战(贪心、排序) class Solution { public:int maxmiumScore(vector<int>& cards, int cnt) {//24.8.1ranges::sort(cards, greater()); //从大到小排序int s reduce(cards.begin(), cards.begin()cnt, 0);if(s%2 0) return s;auto rep…

Java毕业设计 基于SpringBoot vue社区养老服务管理系统

Java毕业设计 基于SpringBoot vue社区养老服务管理系统 SpringBoot 社区养老服务管理系统 功能介绍 护工: 登录 主页 老人管理 健康记录管理 管理员: 登录 主页 用户管理 床位类型管理 床位管理 护工管理 老人管理 预约记录管理 来访记录管理 健康记录管理 费用管理…

网络编程套接字(Socket)详解 V✪ω✪V

目录 &#x1f348;一.什么是网络编程 1.1什么是网络编程&#xff1f; 1.2网络通信中的基本概念&#xff1a; &#x1f347;二.Soket&#xff08;套接字&#xff09;→网络编程的基础 2.1概念&#xff1a; 2.2Socket套接字分类: 数据包套接字&#xff1a;使用传输层UDP协…

Leetcode JAVA刷刷站(111)二叉树的最小深度

一、题目概述 二、思路方向 在Java中&#xff0c;要找出二叉树的最小深度&#xff0c;我们可以使用递归的方法。基本思路是&#xff0c;对于给定的根节点&#xff0c;如果它是空的&#xff0c;那么最小深度为0&#xff08;但实际上&#xff0c;空树没有深度&#xff0c;但在…

ARM 工业计算机搭载 FUXA 组态软件:开启智能制造新时代

工业自动化已经成为提高生产效率、保证产品质量以及提升企业竞争力的关键因素。而在工业自动化的舞台上&#xff0c;FUXA 组态软件与 ARM 工业计算机的组合正发挥着越来越重要的作用&#xff0c;以其高效稳定、数据可视化、实时监控等优势&#xff0c;在复杂场景应用中展现出卓…

MySQL——基础操作(1)

一、数据库的创建 1.1 库的创建 在使用数据库时&#xff0c;最先操作的是创建一个数据库。使用语法如下&#xff1a; CREATE DATABASE [IF NOT EXISTS] database_name [[DEFAULT] CHARSETcharset_name] [[DEFAULT] COLLATEcollation_name]; 对上述语句进行简单说明&#xf…

最佳视频编辑软件,适合专业人士和初学者

如果你想利用视频编辑软件&#xff0c;即使你没有很多专业知识。一段精彩的视频可能有助于你公司的成功。然而&#xff0c;出色的视频镜头只能在编辑工具的帮助下创建。有许多免费程序可供选择&#xff0c;有许多不同的需求和理由需要编辑。在编辑方面&#xff0c;无论你是专业…

【接入指南】快手API

快手小店自2018年上线以来&#xff0c;业务发展迅速&#xff0c;2年时间GMV增长1000倍&#xff0c;活跃商家达到100万&#xff0c;已经成为主流的电商平台&#xff0c;为支撑广大商家的业务处理需求&#xff0c;快手API成为快手平台业务处理软件高效、便捷的开发工具&#xff0…

C++学习笔记----6、内存管理(一)---- 使用动态内存(4)

3.6、多维自由内存空间上的数组 如果需要在运行时决定多维数组的维度&#xff0c;可以使用在自由内存空间上的数组。与一维动态分配的数组通过指针访问一样&#xff0c;多维动态分配的数组也可以通过指针访问。不同的地方在于在二维数组中&#xff0c;需要用一个指向指针的指针…

『功能项目』项目优化【21】

我们打开上一篇20主角身旁召唤/隐藏坐骑的项目&#xff0c; 本章要做的事情如以下几点&#xff1a; 1.优化资源包Resources下的层级分类 2.优化脚本包Scripts下的脚本分类 3.地形Terrain的优化&#xff08;只让主角点击地面移动跳过其他石头山树等其他物体&#xff09; 首…

笔记整理—uboot番外(3)环境变量的作用

环境变量的最大一个作用就是&#xff0c;能够在不修改代码的情况下去影响应用的运行情况。 环境变量的优先级问题&#xff1a;有环境变量的情况下优先使用环境变量&#xff0c;没有环境变量则使用代码中的值&#xff08;全局变量一类的变量&#xff09;。 例如&#xff0c;mach…

随身WiFi实测,真相让你大跌眼镜!随身携带的随身wifi哪个比较好?什么品牌的随身wifi好用?

都说随身wifi坑多&#xff0c;谁买谁是冤大头&#xff01;我还真不信这个邪&#xff01;本次我们对格行、京东云、迅优三款热门随身WiFi进行了开箱测试&#xff0c;实测周期为2个月。今天从外观、网速、续航、售后、适合人群及整体评价等方面进行全面剖析。 一、京东云随身WiFi…

Qt 杨帆起航

这里写自定义目录标题 引入1、Qt安装1.1 OSX1.1.1 HomeBrew 方式安装1.1.2 自己编译 1.2 Windows x、IDEx.1 Clionx.1.1 ui 文件到Qt设计师x.1.2 ui文件更新&#xff0c;为及时调用uiCompile生成或更新cpp文件x.1.3 qt资源文件创建x.1.4 帮助文档的配置 引入 机缘巧合&#xf…

图像缩放操作

图像缩放操作 微信公众号&#xff1a;幼儿园的学霸 在图像处理过程中&#xff0c;有时需要把图像调整到同样大小&#xff0c;便于处理&#xff0c;这时需要用到图像resize()&#xff0c;该函数比较简单&#xff0c;此处对函数中涉及的各种插值方法进行分析。 目录 文章目录 图…