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,
              ),
            ),

          ],
        ),
      ),
    );
  }

}

原文地址:https://www.cnblogs.com/parzulpan/p/12059165.html

时间: 2024-11-14 12:35:54

Flutter 基础组件:文本、字体样式的相关文章

flutter 基础组件

TextWidget 1 class TextWidget extends StatelessWidget { 2 final TextStyle _textStyle = TextStyle( 3 fontSize: 16.0, 4 ); 5 final String _auther = '李白'; 6 final String _title = '将进酒'; 7 8 9 @override 10 Widget build(BuildContext context) { 11 return T

9、第九周 - WEB开发基础 - Document文本、样式、事件操作

docmount的操作是JavaScript中,比较重要一个知识点. 一.docmount 文本内容操作 docmount 的标签查找,分为:间接查找.直接查找. 两者的区别: 直接查找: 前面的章节中,已讲过(通过ID.class样式进行查找) 间接查找: 文件内容操作: innerText 修改网页的信息为文本内容(全网页修改) innerHTML 设定超链接(全网页修改) values input value 获取当前标签中的值 select 获取选中的value值(selectedInd

Flutter 基础组件:Widget简介

概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的 GestureDetector widget.用于APP主题数据传递的Theme等等,而原生开发中的控件通常只是指UI元素. Widget与Element 在Flutter中,Widget的功能是"描述一个UI元素的配置数据",它就是说,Widget其实并不是表示最

字体样式和文本样式

一.字体样式 <!doctype html> <html><head> <style> div{ color: #000; font-family: '微软雅黑','宋体'; font-weight: 900; /*这是没有单位的*/ font-style:italic; /*oblique*/ font-variant: small-caps; /*小型大写字母:全部大写*/ /*字体复合样式写法:font:字体大小/行高 字体风格 粗细 小型大写字母 倾

CSS中的字体样式和文本样式

CSS中的字体样式: 在手机端设置大小的时候,一般不使用px CSS字体颜色三种表达方式: 1.具体颜色名称         例:color:red; 2.数字 0~255,百分比:0%~100%        例:color:rgb(0%,100%,0%) 3.十六进制:#开头,六位,0~F         例:color:#00880a font-weight文字粗细: font-weight:normal |bold | bolder |lighter | 100~900 400相当于no

Flutter基础系列之入门(一)

1.Flutter是什么? 官方介绍:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. 从官方介绍可以看到,Flutter有如下特点: 跨平台:现在Flutter至少可以跨4种平台,甚至支持嵌入式开发.我们常用的有Linux.Android.IOS,甚至可以在谷歌最新的操作系统上Fuchsia进行运行,经过第三方

Android 基础组件

基础组件 所有的控件都可以在java代码中创建出来,并且大部分的属性都对应set和get方法,比如 View view = new View(Context context)  context是上下文,是Activity父类,一般传入当前Activity 1.TextView text 文本 setText() getText() textColor文本颜色 #FFFFFF setTextColor(Color.Blue) getTextColor() textSize文本大小   sp set

css 字体样式设置

css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant

css字体样式(Font Style),属性

css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"