Flutter 2-19 based learning using text components Text Widget

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/dpl12/article/details/90680107

This article describes how to use the Text Widget Flutter text components ......

Demo code is as follows:

import 'package:flutter/material.dart';
void main() {
     runApp(MyApp());
}
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
       return MaterialApp(
       title: 'Welcome to Flutter',   //title ： 在任务管理窗口中所显示的应用名字
       home: Scaffold(              
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          //在主体的中间区域，添加一个Hello World
          body: Center(
            child: Text(
              'Hello Flutter，这里省略一万个字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字',
              textAlign: TextAlign.left,    //文字对齐方式
              overflow: TextOverflow.ellipsis,   //溢出的文字处理
              maxLines: 1,
              style: TextStyle(
                fontSize: 25.0, //小数一位
                color: Color.fromARGB(255, 125, 125, 255),//文字颜色设置
                decoration: TextDecoration.underline,//下划线
                decorationStyle: TextDecorationStyle.solid,//下划线的样式
              ),
            ),
          ),
       ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

Note that knowledge:

1, TextAlign property

TextAlign property is the text alignment, which has the following attribute values (see detailed explanation in the video):

center: in the form of a centered alignment of text, this can be considered a relatively common.
left: Left, often used to make text align left home, and start the same effect.
right: right-aligned, the frequency of use is not too high.
start: to start position alignment, like left-aligned.
end: that at the end of this alignment, not commonly used. Somewhat similar to the right-aligned.

2, maxLines property

The number of lines set up to display, such as we now show only one line, similar to a news topic list.

3, overflow property

overflow property is used to set text overflows, how to deal with it are the following common values for our choice.

clip: direct cut off, the rest of the text, there is no, do not feel very friendly, and the experience is not good.
ellipsis: ellipsis, the experience is good, this often use at work behind.
fade: overflow will be part of a gradual disappearance of the effect, of course, is on the line gradient, not about oh.

4, style attributes

Content style attribute more specific you can check out the API, I am here as a band effect, you quickly learn to facilitate the usage of Style.

We made effect, the font size is 25.0, the color is blue, and there is an underscore.

Run shot:

Flutter 2-19 based learning using text components Text Widget

Guess you like