Flutter学习第1章 Text Widget 文本组件的使用

程序员张礼奎
226 阅读2分钟

1、基本结构

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "组件学习",
      home: Scaffold(
        body: Center(child: Text(
          '我想做一个app,呵呵哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或',
          textAlign: TextAlign.left,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 20.0,
            color: Color.fromARGB(255, 255, 124, 125),
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.solid,
          ),
        ),
        
        
        ),
           ),
    );
  }
}

2、效果展示

3、属性解释

1、textAlign: TextAlign 设置文本对齐方式

  • center: 文本以居中形式对齐,这个也算比较常用的了。

  • left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。

  • right :右对齐，使用频率也不算高。

  • start:以开始位置进行对齐，类似于左对齐。

2、maxLines 内容最多显示几行，直接给数字就行 我直接给了数字1就是显示一行

3、overflow: TextOverflow 文本一处时，应该做什么事情：。

  • clip：直接切断，显示不下的文字就直接不显示了，根据需求选用。

  • ellipsis:在后边显示省略号，比较常用，与css里面的省略号差不多的效果。

  • fade: 溢出的部分会进行一个渐变消失的效果，当然是上下的渐变，并不是左右

4、 style: TextStyle() 就是设置样式的具体属性了，比如字体大小，颜色等样式。

  • inherit: true 是否将null值替换为祖先文本样式中的值（例如，在TextSpan树中）。如果为false，则没有显式值的属性将恢复为默认值：白色，字体大小为10像素，采用无衬线字体。

  • color: Colors.white 可以直接点出几个特有的颜色，也可以使用fromARGB,fromARGB的第一个值代表透明度

  • fontSize: 30.0 字体大小

  • fontWeight: FontWeight.w400 让文本加粗

  • fontStyle: FontStyle.italic 让文本斜体

  • letterSpacing: 5 字符间距，正数拉远距离，负数拉近距离

  • wordSpacing: 20 单词间距，正数拉远距离，负数拉近距离

  • textBaseline: TextBaseline.alphabetic 用于对齐文本的水平线

  • height: 1.2 文本行高，为总统大小的倍数

  • locale: Locale('fr', 'CH') 用于选择区域特定符号的区域设置

  • background: Paint() ..color = Colors.blue 文本背景颜色

  • shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)] 文本阴影可以利用列表加处理

  • decoration: TextDecoration.underline 文本线性装饰 underline下划线 lineThrough删除线

  • decorationColor: Colors.black54 文本装饰线颜色 decorationStyle: TextDecorationStyle.dashed 文本装饰线样式 虚线、实线这些

  • debugLabel: 'test' 此文本仅在调试中可用

avatar
文章
阅读
粉丝