Flutter Text Widget 文本组件的使用

611 阅读2分钟

Flutter一切皆组件!

基本代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override 
  Widget build (BuildContext context) {
    return MaterialApp (
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: Text('Hello LXS ,非常喜欢移动端开发,并且愿意为此努力下去。我希望可以学习更多更有趣的知识。',
          textAlign: TextAlign.left,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 125, 125),
            decoration:TextDecoration.underline,
            decorationStyle: TextDecorationStyle.wavy,
          ),
          )
        ),
      ),
    );
  }
} 

TextAlign属性

/// Whether and how to align text horizontally.
///是否以及如何水平对齐文本。
// The order of this enum must match the order of the values in RenderStyleConstants.h's ETextAlign.
//此枚举的顺序必须与RenderStyleConstants.h的ETextAlign中的值的顺序相匹配。
enum TextAlign {
  /// Align the text on the left edge of the container.
  ///对齐容器左边缘的文本
  left,

  /// Align the text on the right edge of the container.
  ///对齐容器右边缘的文本。
  right,

  /// Align the text in the center of the container.
  ///将文本对齐容器的中心。
  center,

  /// Stretch lines of text that end with a soft line break to fill the width of
  /// the container.
  ///
  /// Lines that end with hard line breaks are aligned towards the [start] edge.
   ///以换行符(/n)结束的行与[start]边缘对齐。
  justify,

  /// Align the text on the leading edge of the container.
  ///
  /// For left-to-right text ([TextDirection.ltr]), this is the left edge.
  ///对于从左到右的文本([TextDirection.ltr]),这是左边缘。
  ///
  /// For right-to-left text ([TextDirection.rtl]), this is the right edge.
  ///对于从右到左的文本([TextDirection.rtl]),这是正确的边缘。
  start,

  /// Align the text on the trailing edge of the container.
  ///
  /// For left-to-right text ([TextDirection.ltr]), this is the right edge.
  ///对于从左到右的文本([TextDirection.ltr]),这是右边缘
  ///
  /// For right-to-left text ([TextDirection.rtl]), this is the left edge.
  ///对于从右到左的文本([TextDirection.rtl]),这是左边缘。
  end,
}

maxLines属性

最多显示行数

overflow属性

overflow属性是用来设置文本溢出时,如何处理,它有下面几个常用的值供我们选择

/// How overflowing text should be handled.
enum TextOverflow {
  /// Clip the overflowing text to fix its container.
  ///剪除溢出容器的文本
  clip,

  /// Fade the overflowing text to transparent.
  ///将溢出的文本淡化为透明
  fade,

  /// Use an ellipsis to indicate that the text has overflowed.
   ///使用省略号表示文本已溢出(用...表示溢出文本)
  ellipsis,

  /// Render overflowing text outside of its container.
  ///在其容器外部渲染溢出的文本。
  visible,
}

style属性

属性较多请查看api