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

sometime-rock發表於2019-03-19
Flutter控制元件

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)),
        ],
    )
  )
複製程式碼

image

二、常用屬性

  1. 設定樣式 通過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,//?
  })
複製程式碼

2、設定字型對齊方式 TextAlign

  • center 將文字對齊容器的中心
  • end 對齊容器後緣上的文字。
 對於從左到右的文字（TextDirection.ltr），這是右邊緣。
 對於從右到左的文字（TextDirection.rtl），這是左邊緣。
複製程式碼

  • justify 拉伸結束的文字行以填充容器的寬度,對齊邊緣。

  • left 對齊容器左邊緣的文字。

  • right 對齊容器右邊緣的文字。

  • start 對齊容器前緣上的文字。

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

3、maxLines 文字要跨越的可選最大行數。如果文字超過給定的行數，則會根據溢位將其截斷。

4、textDirection 用於設定文字的對齊方式

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

5、overflow 當文字超出螢幕的時候，設定處理方式

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

6、設定字型顯示倍率

    textScaleFactor: 2.0,//設定字型顯示倍率為原來字型的兩倍
複製程式碼

三、一個完整的例子

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,//設定字型顯示倍率為原來字型的兩倍
            ),

          ],

        ),
      ),
    );
  }
}






複製程式碼

相關文章