Flutter 基础组件:文本、字体样式
// 文本、字体样式
import 'package:flutter/material.dart';
class TextFontStyle extends StatelessWidget {
// 声明文本样式
TextStyle textStyle = const TextStyle(fontFamily: 'MyFont', fontSize: 30, );
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text Font Style'),
),
body: Container(
child: Column(
children: <Widget>[
// textAlign:文本的对齐方式;可以选择左对齐、右对齐还是居中。
// 注意,对齐的参考系是Text widget本身。
Text('Hello world!',
textAlign: TextAlign.left,
),
// maxLines、overflow:指定文本显示的最大行数,默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。
// 如果有多余的文本,可以通过overflow来指定截断方式,默认是直接截断。
// 本例中指定的截断方式TextOverflow.ellipsis,它会将多余文本截断后以省略符“...”表示;
Text('Hello World! hhhhh'*5,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
// textScaleFactor:代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方式。
Text('Hello world!',
textScaleFactor: 1.5,
),
// TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。
Text('Hello world!',
style: TextStyle(
color: Colors.blue,
// fontSize:该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别:
// * fontSize可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。
// * textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整,而fontSize通常用于单个文本,字体大小不会跟随系统字体大小变化。
fontSize: 18.0,
// height:该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height。
height: 1.2,
fontFamily: 'Courier',
background: Paint()..color = Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
)
),
// 需要对一个Text内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”。
Text.rich(TextSpan(
children: [
TextSpan(
text: 'Home:',
),
TextSpan(
text: 'www.baidu.com',
style: TextStyle(
color: Colors.blue,
fontSize: 20,
),
// 点击链接后的一个处理器,手势识别的内容
// recognizer: _tap
),
]
)),
// 在Widget树中,文本的样式默认是可以被继承的(子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式),
// 因此,如果在Widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,
// 而DefaultTextStyle正是用于设置默认文本样式的。
DefaultTextStyle(
// 设置文本默认样式
style: TextStyle(
color: Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 继承默认样式
Text('Hello world'),
Text('I am Hhh'),
// 不继承默认样式
Text('I am Hhh',
style: TextStyle(
inherit: false,
color: Colors.grey,
),
),
],
),
),
// 在Flutter中使用字体分两步完成。
// 1. 在pubspec.yaml中声明它们,以确保它们会打包到应用程序中。
// 2. 通过TextStyle属性使用字体。
// 使用本地字体
Text('你好吗hello',
style: textStyle,
),
Text('你好吗hello',
style: TextStyle(
fontSize: 30,
),
),
],
),
),
);
}
}
Flutter 基础组件:文本、字体样式的更多相关文章
- css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
- 常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...
- flutter 基础组件
TextWidget class TextWidget extends StatelessWidget { final TextStyle _textStyle = TextStyle( fontSi ...
- Flutter 基础组件:进度指示器
前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...
- Flutter 基础组件:输入框和表单
前言 Material组件库中提供了输入框组件TextField和表单组件Form. 输入框TextField 接口描述 const TextField({ Key key, // 编辑框的控制器,通 ...
- Flutter 基础组件:图片和Icon
前言 Flutter中,可以通过Image组件来加载并显示图片,Image的数据源可以是asset.文件.内存以及网络. ImageProvider 是一个抽象类,主要定义了图片数据获取的接口load ...
- Flutter 基础组件:单选框和复选框
前言 Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父 ...
- Flutter 基础组件:按钮
前言 Material组件库中提供了多种按钮组件如RaisedButton.FlatButton.OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所 ...
- Flutter 基础组件:状态管理
前言 一个永恒的主题,"状态(State)管理",无论是在React/Vue(两者都是支持响应式编程的Web开发框架)还是Flutter中,他们讨论的问题和解决的思想都是一致的. ...
随机推荐
- AtCoder Regular Contest 108
Contest Link Official Editorial A - Sum and Product Given are integers \(S\) and \(P\) . Is there a ...
- 【Codeforces 1097F】Alex and a TV Show(bitset & 莫比乌斯反演)
Description 你需要维护 \(n\) 个可重集,并执行 \(m\) 次操作: 1 x v:\(X\leftarrow \{v\}\): 2 x y z:\(X\leftarrow Y \cu ...
- webpack与vue使用
项目基本结构目录: index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Linux 上安装 mysql
1.通过 yum 命令安装 mysql 可以先通过 yum list |grep mysql 方式查看有哪些版本的 mysql 2.安装 mysql yum install mysql-server ...
- 短视频去水印v1.0(还支持74个平台)
软件介绍: 一款很好用的短视频去水印软件,支持74个平台无水印解析,还支持批量视频解析只需要输入账号主页链接就可以了哦,快来下载试试吧! 软件版本:1.0 支持系统:安卓 软件大小:22. ...
- Java8新特性探索之新日期时间库
一.为什么引入新的日期时间库 Java对日期,日历及时间的处理一直以来都饱受诟病,尤其是它决定将java.util.Date定义为可修改的以及将SimpleDateFormat实现成非线程安全的. 关 ...
- rhel6.4搭建rac前共享存储配置(iscsi+multipath+udev)
rhel6.4搭建rac前共享存储配置(iscsi+multipath+udev) server: IP配置: 192.168.12.30 192.168.12.40 添加一个100G磁盘/dev ...
- 六个步骤,从零开始教你搭建基于WordPress的个人博客
摘要:WordPress是使用PHP语言开发的博客平台,是免费开源的.用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站,也可以把WordPress当作一个内容管理系统(CMS)来使用 ...
- mybatis默认返回类型
在mybatis中,无论你指定还是不指定返回类型,mybatis都会默认的先将查询回的值放入一个hashMap中(如果返回的值不止一条就是一个包含hashMap的list).这其中的区别在于,如果你指 ...
- 多任务-python实现-继承Thread类,单独编写一个类(2.1.2)
@ 目录 1.thread类 1.thread类 threding代码实现 import threading import time class MyThread(threading.Thread): ...