flutter widget組件之-----------文本組件

flutter widget組件之-----------文本組件

widget分爲兩類：widgets library中的標準widget和Material Components library中的專用widget;任何應用程序都可以使用widgets library中的widget，但只有Material應用程序可以使用Material Components庫。其中Card，ListTitle就是Material Components庫中的組件。

Text

單一格式的文本

• 構造函數

Text(
    this.data, // 要顯示的字符串數據
    {
        Key key,
        this.style,//文本樣式
        this.textAlign,//居中方式
        this.textDirection,//文本方向
        this.locale,//
        this.softWrap,//文本是否應在軟換行處斷開
        this.overflow,//溢出處理
        this.textScaleFactor,// 文本縮放因子
        this.maxLines,//文本要跨越的可選最大跨行
        this.semanticsLabel,//語義化標籤
    }
)
 

• 應用示例

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home:Scaffold(
        appBar: AppBar(
          title: Text("data"),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Text(
                'Hello, flutter! How are youdddddddddddd ddddddddfdfdf fdfsfddddddddddd dfsfd s?',// 要顯示的字符串數據
                textAlign: TextAlign.center,//居中方式
                // overflow: TextOverflow.ellipsis,
                style: TextStyle(fontWeight: FontWeight.bold),//文本樣式
                softWrap: true,// 按單詞中斷換行
                textDirection: TextDirection.ltr,
                textScaleFactor: 1.5,// 文本縮放因子
                maxLines: 5,// 跨越的最大行數，若文本超出，則超出部分不顯示

              )
            ],
          ),
        ),
      ),
    );
  }
}

RichText

一個富文本Text，可以顯示多種樣式的text

• 構造函數

RichText({
    Key key,
    @required this.text,// 文本內容組件
    this.textAlign = TextAlign.start,// 對齊方式
    this.textDirection,//文本方向
    this.softWrap = true,// 軟換行，按單詞中斷換行
    this.overflow = TextOverflow.clip,//文本溢出處理
    this.textScaleFactor = 1.0,//文本縮放因子
    this.maxLines,//文本最大跨行數
    this.locale,
  })
  TextSpan({
    this.style,//樣式
    this.text,//字符串文本
    this.children,// 子組件數組（testspan）
    this.recognizer,//一個手勢識別器，它將接收命中此文本範圍的事件。
  })
 

• 應用示例

/*此處省略同上相同的部分代碼*/
class _BuzzingTextState extends State<BuzzingText> {

  // LongPressGestureRecognizer _longPressRecognizer;
  
  //    @override
  //   void initState() {
  //      super.initState();
  //      _longPressRecognizer = LongPressGestureRecognizer()
  //        ..onLongPress = _handlePress;
  //    }
  
  //    @override
  //    void dispose() {
  //      _longPressRecognizer.dispose();
  //      super.dispose();
  //    }
  
  //    void _handlePress() {
  //      HapticFeedback.vibrate();
  //    }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home:Scaffold(
        appBar: AppBar(
          title: Text("data"),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              RichText(
                // 文本內容組件
                text: TextSpan(
                  style: TextStyle(color: Colors.blue),//樣式
                  text: "textspan..........text",//字符串文本
                  // 子組件數組（testspan）
                  children: [
                    TextSpan(text: "111111111"),
                    TextSpan(text: "22222222"),
                  ],
                  // 手勢識別器
                  // recognizer: _longPressRecognizer
                ),
                // 對齊方式
                textAlign: TextAlign.center,
                //文本方向
                textDirection: TextDirection.ltr,
                // 軟換行，按單詞中斷換行
                softWrap: true,
                //文本溢出處理
                overflow: TextOverflow.ellipsis,
                //文本縮放因子
                textScaleFactor: 2,
                maxLines: 15,//文本最大跨行數
              ),

              // DefaultTextStyle()
            ],
          ),
        ),
      ),
    );
  }
}

DefaultTextStyle

文字樣式，用於指定Text widget的文字樣式

• 構造函數

DefaultTextStyle({
    Key key,
    @required this.style,//樣式
    this.textAlign,//對齊方式
    this.softWrap = true,//是否換行，按單詞中斷換行
    this.overflow = TextOverflow.clip,//文本溢出處理
    this.maxLines,//最大跨行數
    @required Widget child,//子部件項
  })
 

• 應用示例

/*省略部分同上相同的部分代碼*/
class _BuzzingTextState extends State<BuzzingText> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home:Scaffold(
        appBar: AppBar(
          title: Text("data"),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              DefaultTextStyle(
                textAlign: TextAlign.start,//對齊方式
                softWrap: true,//是否換行，按單詞中斷換行
                overflow: TextOverflow.clip,//文本溢出處理
                maxLines: 5,//最大跨行數
                style: TextStyle(color: Colors.red),//樣式，必須有
                //子部件項 必須有
                child: Container(
                  child: Text(
                    "大家好，我是朱志強！",
                    textDirection: TextDirection.ltr,
                  ),
                )
              )
              
            ],
          ),
        ),
      ),
    );
  }
}