日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

flutter?text組件使用示例詳解_Android

作者：前端那些年 ? 更新時間： 2022-12-27 編程語言

正文

flutter組件的實現參考了react的設計理念，界面上所有的內容都是由組件構成，同時也有狀態組件和無狀態組件之分，這里簡單介紹最基本的組件。

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

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組件主要是用來展示一個文本字符串。這字符串根據布局容器的約束空間有可能占展示一行文本，也有可能展示多行文本。

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

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

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

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

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

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

Text組件構造器上的主要屬性

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

再用小拇指想一想，對齊方式和文本方向不用說也是個枚舉類型。而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組件的屬性，需要仔細思考一下它大概需要哪些樣式：選用哪種字體，設置什么顏色，需要多少行高，選用哪種對齊方式，是否需要描邊和漸變，是否需要一種裝飾樣式（下劃線，刪除線）就可以掌握了。

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

掌握了這些內容，就算是掌握了flutter的text組件。

原文鏈接：https://juejin.cn/post/7171850429838884894

欄目分類
最近更新