Flutter 系列文章：Flutter Text 控件介紹

時間 2019-12-07

標籤 flutter 系列文章 text 控件介紹欄目 HTML 简体版

原文原文鏈接

flutter Text 控件介紹

1、使用方法

構造方法

設置普通的text Text("")

Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }）
  
    Text(
      'Hello, $_name! How are you?',
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),
    )
  
複製代碼

設置textSpan Text.rich()

Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })
  
    Text.rich(
      TextSpan(
        text: 'Hello', // default text style
        children: <TextSpan>[
          TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic,color: Colors.red,fontSize: 20)),
          TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20)),
        ],
    )
  )
複製代碼

2、經常使用屬性

設置樣式經過TextStyle 設置文字的樣式

TextStyle({
    this.inherit = true,//是否繼承
    this.color,//字體顏色
    this.fontSize,//字體大小
    this.fontWeight,//字體厚度，也就是字體粗細
    this.fontStyle,//字體樣式 normal或者italic
    this.letterSpacing,//字母間隙(負值能夠讓字母更緊湊)
    this.wordSpacing,//單詞間隙(負值能夠讓單詞更緊湊)
    this.textBaseline,//文本繪製基線(alphabetic/ideographic)
    this.height,//高度
    this.locale,//區域設置
    this.foreground,//設置前景
    this.background,//設置背景顏色
    this.shadows,//設置陰影
    this.decoration,//設置文字裝飾(none/underline/overline/lineThrough)
    this.decorationColor,//設置文字裝飾顏色
    this.decorationStyle,//文字裝飾的風格(solid/double/dotted/dashed/wavy)
    this.debugLabel,//？
    String fontFamily,//？
    String package,//?
  })
複製代碼

二、設置字體對齊方式 TextAlignbash

center 將文本對齊容器的中心
end 對齊容器後緣上的文本。

對於從左到右的文本（TextDirection.ltr），這是右邊緣。
 對於從右到左的文本（TextDirection.rtl），這是左邊緣。
複製代碼

justify 拉伸結束的文本行以填充容器的寬度,對齊邊緣。app
left 對齊容器左邊緣的文本。less
right 對齊容器右邊緣的文本。ide
start 對齊容器前緣上的文本。字體

對於從左到右的文本（TextDirection.ltr），這是左邊緣。
對於從右到左的文本（TextDirection.rtl），這是正確的邊緣。
複製代碼

三、maxLines 文本要跨越的可選最大行數。若是文本超過給定的行數，則會根據溢出將其截斷。ui

四、textDirection 用於設置文本的對齊方式this

有些語言是從左到右書寫的（例如，英語，泰米爾語或中文），而其餘語言是從右到左書寫的（例如阿拉姆語，希伯來語或烏爾都語）。有些也是混合寫的，例如阿拉伯語大可能是從右到左書寫的，數字從左到右書寫。textDirection 主要就是用於處理文字的對齊形式。
TextDirection有兩種枚舉:

TextDirection.trl 從左到右
    TextDirection.trl 從右到左
複製代碼

五、overflow 當文字超出屏幕的時候，設置處理方式spa

TextOverflow.clip(末位裁剪)
    TextOverflow.fade(末位漸隱)
    TextOverflow.ellipsis(末位省略號)
複製代碼

六、設置字體顯示倍率debug

textScaleFactor: 2.0,//設置字體顯示倍率爲原來字體的兩倍
複製代碼

3、一個完整的例子

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: TextPageDemo(title: 'Text Demo'),
    );

  }
}


class TextPageDemo extends StatefulWidget {
  TextPageDemo({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _TextPageDemoState createState() => _TextPageDemoState();
}

class _TextPageDemoState extends State<TextPageDemo>{

  @override
  Widget build(BuildContext context) {
    var _name = "flutter ";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: <Widget>[

            Text(
              '1.Hello, $_name! How are you? \n',
              textAlign: TextAlign.center,
              style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),
            ),
            // 例子3 設置TextSpan
            Text.rich(
              TextSpan(
                text: '2. Hello', // default text style
                children: <TextSpan>[
                  TextSpan(
                      text: ' beautiful ',
                      style: TextStyle(fontStyle: FontStyle.italic,color: Colors.red,fontSize: 20,debugLabel: "獲得的",fontFamily: "aaaaaaa")
                  ),
                  TextSpan(
                      text: 'world \n',
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20)
                  ),
                ],
            )
          ),
           Text(
             //例子3 設置當文字的對齊形式
             '3. Hello flutter! Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter! \n',
//             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.
//           justify,
//           /// Align the text on the leading edge of the container.
//           ///
//           /// For left-to-right text ([TextDirection.ltr]), this is the left edge.
//           ///
//           /// For right-to-left text ([TextDirection.rtl]), this is the right edge.
//           start,
//           /// Align the text on the trailing edge of the container.
//           ///
//           /// For left-to-right text ([TextDirection.ltr]), this is the right edge.
//           ///
//           /// For right-to-left text ([TextDirection.rtl]), this is the left edge.
//           end,
//           }
             textAlign: TextAlign.left,
             maxLines: 5,
             textDirection: TextDirection.ltr,
           ),
            Text(
            // 例子4 設置當文字超出屏幕的時候，如何處理 ，及設置文本的書寫方向
              '4. Hello flutter! Hellod flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!\n',
              textAlign: TextAlign.left,
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 20),
              overflow: TextOverflow.fade,
            ),
            Text(
              //例子5 設置是否自動換行
              '5. Hello flutter! Hellod flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!Hello flutter!\n',
              textAlign: TextAlign.left,
              softWrap: true,//設置是否自動換行
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 20),
              overflow: TextOverflow.fade,
            ),
            Text(
              //例子6 設置字體顯示倍率,能夠經過設置字體顯示倍率調整文字的大小
              '6.Hello flutter text \n',
              textAlign: TextAlign.left,
              softWrap: true,//設置是否自動換行
              textDirection: TextDirection.rtl,
              style: TextStyle(fontSize: 20),
              overflow: TextOverflow.fade,
              textScaleFactor: 2.0,//設置字體顯示倍率爲原來字體的兩倍
            ),

          ],

        ),
      ),
    );
  }
}






複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。