快捷導(dǎo)航

flutter?text組件使用示例詳解

更新時(shí)間：2022年12月01日 08:47:38 作者：前端那些年

這篇文章主要為大家介紹了flutter?text組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

flutter組件的實(shí)現(xiàn)參考了react的設(shè)計(jì)理念，界面上所有的內(nèi)容都是由組件構(gòu)成，同時(shí)也有狀態(tài)組件和無(wú)狀態(tài)組件之分，這里簡(jiǎn)單介紹最基本的組件。

在組件代碼的書(shū)寫(xiě)方式上，web端開(kāi)發(fā)的樣式主要有由css進(jìn)行控制，而客戶端開(kāi)發(fā)根據(jù)使用的技術(shù)棧不同，寫(xiě)法也稍微有些不同：ReactNative的寫(xiě)法和web比較類(lèi)似，但是ReactNative是使用StyleSheet.create()方法創(chuàng)建樣式對(duì)象，以內(nèi)聯(lián)的方式進(jìn)行書(shū)寫(xiě)。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
};
const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
export default LotsOfStyles;

而flutter則將組件封裝成一個(gè)個(gè)的對(duì)象，樣式及事件以屬性的方式在實(shí)例化時(shí)進(jìn)行賦值。

Text( 'Hello, $_name! How are you?', 
    textAlign: TextAlign.center, 
    overflow: TextOverflow.ellipsis, 
    style: const TextStyle(fontWeight: FontWeight.bold),
    )

Text組件

用我們的小拇指頭就可以想到，Text組件主要是用來(lái)展示一個(gè)文本字符串。這字符串根據(jù)布局容器的約束空間有可能占展示一行文本，也有可能展示多行文本。

Text組件的構(gòu)造器有一個(gè)可選的style屬性，如果我們省略掉這個(gè)屬性，那么文本就會(huì)使用默認(rèn)的樣式。

如果我們指定了我們定制的style樣式，這個(gè)樣式的類(lèi)對(duì)象是TextStyle。我們定制的style樣式會(huì)被merge到最近的默認(rèn)樣式DefaultTextStyle上去。

默認(rèn)樣式類(lèi)DefaultTextStyle有這么幾個(gè)屬性：

maxLine: 最大行數(shù)，這個(gè)屬性是可選的。

overflow: 文本超出后的樣式。 overflow 的可選值有這么幾個(gè)：clip（剪切）、fade(隱藏)、ellipsis（省略）、visible(直接展示)。如果我們點(diǎn)開(kāi)文檔看一下，會(huì)發(fā)現(xiàn)它其實(shí)是個(gè)枚舉類(lèi)型Enum。

const TextOverflow = {
    clip,
    fade,
    ellipsis,
    visible
}

Text組件構(gòu)造器上的主要屬性

style：文本樣式。
textAlign: 文本對(duì)齊方式。
textDirection: 文本方向。
textHeightBehavior: 定義如何展示style中的height
selectionColor: 文本選中時(shí)的顏色。
overflow: 文本超出后的樣式。
maxLine: 最大行數(shù)，這個(gè)屬性是可選的。

再用小拇指想一想，對(duì)齊方式和文本方向不用說(shuō)也是個(gè)枚舉類(lèi)型。而style則是一個(gè)TextStyle的類(lèi)型,TextStyle可以定義字體的：

粗細(xì)fontWeight

    const Text( 'No, we need bold strokes. ', 
        style: TextStyle(fontWeight: FontWeight.bold),
    )

斜體FontStyle.italic

const Text( "Welcome to the present", 
    style: TextStyle(fontStyle: FontStyle.italic), 
)

透明度和顏色

TextSpan( 
    text: "You don't have the votes.\n", 
    style: TextStyle(
        color: Colors.black.withOpacity(0.6)), 
    ),

Text( 
    "These are wise words, ", 
    style:DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0), 
)

行高

const Text( 
    'Ladies and gentlemen, ',
    style: TextStyle(height: 5, fontSize: 10),
   )

需要注意的是：行高會(huì)按照 fontSize * n的比例進(jìn)行擴(kuò)展。

然后我們還可以定義字體的下劃線、描邊、填充顏色、甚至漸變色。

下劃線

RichText( 
    text: const TextSpan( 
        text: "Don't tax the South ", 
        children: <TextSpan>[ 
        TextSpan( 
        text: 'cuz', 
        style: TextStyle( 
            color: Colors.black, 
            decoration: TextDecoration.underline,
            decorationColor: Colors.red,                    decorationStyle:TextDecorationStyle.wavy, 
            ),
         ), 
            TextSpan( 
            text: ' we got it made in the shade',             ), 
      ],
     ),
   )

描邊和填充顏色

Stack( 
    children: <Widget>[
    Text( 'Greetings, planet!',
        style: TextStyle( 
            fontSize: 40, 
            foreground: Paint()
            ..style = PaintingStyle.stroke
            ..strokeWidth = 6
            ..color = Colors.blue[700]!,
            ),
        ),
    Text( 'Greetings, planet!',
        style: TextStyle( 
            fontSize: 40, 
            color: Colors.grey[300],
            ),
           ),
          ],
        )

顏色漸變

Text( 
    'Greetings, planet!', 
     style: TextStyle( 
         fontSize: 40, 
         foreground: Paint() 
         ..shader = ui.Gradient.linear( 
             const Offset(0, 20), 
             const Offset(150, 20),
             <Color>[ 
             Colors.red, 
             Colors.yellow,
             ],
            ) 
          ),
      )

整體上想要掌握Text組件的屬性，需要仔細(xì)思考一下它大概需要哪些樣式：選用哪種字體，設(shè)置什么顏色，需要多少行高，選用哪種對(duì)齊方式，是否需要描邊和漸變，是否需要一種裝飾樣式（下劃線，刪除線）就可以掌握了。

而想要文本有可交互的效果，則需要用GestureDetector這個(gè)組件將它包裹起來(lái)，在GestureDetector組件上觸發(fā)ontaps事件。

掌握了這些內(nèi)容，就算是掌握了flutter的text組件。

以上就是flutter text組件使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于flutter text組件使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: