欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

flutter?text組件使用示例詳解

 更新時間：2022年12月01日 08:47:38   作者：前端那些年  
這篇文章主要為大家介紹了flutter?text組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

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

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

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則將組件封裝成一個個的對象，樣式及事件以屬性的方式在實例化時進行賦值。

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

Text組件

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

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

如果我們指定了我們定制的style樣式，這個樣式的類對象是TextStyle。我們定制的style樣式會被merge到最近的默認樣式DefaultTextStyle上去。

默認樣式類DefaultTextStyle有這么幾個屬性：

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

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

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

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

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

再用小拇指想一想，對齊方式和文本方向不用說也是個枚舉類型。而style則是一個TextStyle的類型,TextStyle可以定義字體的：

  • 粗細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),
   )

需要注意的是：行高會按照 fontSize * n的比例進行擴展。

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

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

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

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

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

相關(guān)文章

最新評論