Flutter 基础组件:文本、字体样式

Stella981
• 阅读 441
// 文本、字体样式


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

          ],
        ),
      ),
    );
  }

}
点赞
收藏
评论区
推荐文章
浩浩 浩浩
3年前
【Flutter实战】文本、字体样式
3.3文本及样式3.3.1TextText用于显示简单样式文本,它包含一些控制文本显示样式的一些属性,一个简单的例子如下:dartText("Helloworld",textAlign:TextAlign.left,);Text("HelloworldI'mJack."4,maxLines:1,ove
菜园前端 菜园前端
1年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Stella981 Stella981
2年前
Flutter 构建完整应用手册
这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。每个配方都是独立的,可以作为参考帮助您构建应用程序。使用主题共享颜色和字体样式为了在整个应用中共享颜色和字体样式,我们可以利用主题。定义主题有两种方式:应用程序范围或使用Theme小部件来定义应用程序特定部分的颜色和字体样式。事实上,应用程序范围
Stella981 Stella981
2年前
Flutter学习之动态ListView
import'package:flutter/material.dart';voidmain(){runApp(listname(item:newList<String.generate(1000,(i)"genarate$i")));}
Stella981 Stella981
2年前
Flutter中日期组件DatePicker及组件汉化
Flutter提供了DatePicker组件进行时间选择。日期组件及时间组件代码示例:import'package:flutter/material.dart';//第三方插件,需要提前配置import'package:date_format/date_format.dart';classDat
Stella981 Stella981
2年前
Flutter学习之重叠布局
1.两个元素的重叠布局可以使用stack组件import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{
Stella981 Stella981
2年前
Flutter Widget不刷新问题
import'package:flutter/material.dart';///温度显示okclassTemperatureIndicationextendsStatefulWidget{finalValueChanged<intvalueChanged;final
Stella981 Stella981
2年前
Flutter入门(四)
\TabBar(顶部导航)import'package:flutter/material.dart';classCategoryPageextendsStatefulWidget{CategoryPage({Keykey}):super(key:key);@o
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。