• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • Flutter 基礎Widgets Text()之TextStyle詳解

    Text概述

    即一個單一樣式的文本
    Text Widget就是顯示單一樣式的文本字符串。字符串可能會跨越多行,也可能全部顯示在同一行上,具體取決于布局約束。

    style參數可選。如果省略了,文本將使用最近的DefaultTextStyle的樣式。如果給定樣式的TextStyle.inherit屬性為true(默認值),則給定樣式將與最近的DefaultTextStyle合并。例如,比如可以在使用默認字體系列和大小時使文本變為粗體。

    第一個構造函數:

    const Text(this.data, {
        Key key,
        this.style,
        this.strutStyle,
        this.textAlign,
        this.textDirection,
        this.locale,
        this.softWrap,
        this.overflow,
        this.textScaleFactor,
        this.maxLines,
        this.semanticsLabel,
      }) : assert(data != null),
           textSpan = null,
           super(key: key);
    

    1. style及構造函數

    style對文本的樣式,顏色,字體大小等有更加詳盡的定制,如果省略該參數則使用DefaultTextStyle

    const TextStyle({
        this.inherit = true,
        this.color,
        this.fontSize,
        this.fontWeight,
        this.fontStyle,
        this.letterSpacing,
        this.wordSpacing,
        this.textBaseline,
        this.height,
        this.locale,
        this.foreground,
        this.background,
        this.shadows,
        this.decoration,
        this.decorationColor,
        this.decorationStyle,
        this.debugLabel,
        String fontFamily,
        List<String> fontFamilyFallback,
        String package,
      }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
           _fontFamilyFallback = fontFamilyFallback,
           _package = package,
           assert(inherit != null),
           assert(color == null || foreground == null, _kColorForegroundWarning);
    
    • inherit 是否將null值替換為祖先文本樣式中的值(例如,在TextSpan樹中)。如果為false,則沒有顯式值的屬性將恢復為默認值:白色,字體大小為10像素,采用無襯線字體。
    • color 字體的顏色
    • fontSize 文字大小,單位為像素,如果沒有指定大小則默認為14像素,可以乘以textScaleFactor來增加字體大小以便用戶更加方便的閱讀
    • fontWeight 字體厚度,可以使文本變粗或變細
    • fontStyle 字體變形,有兩種 FontStyle.normal(字體直立), FontStyle.italic(字體傾斜)
    • letterSpacing 字母間距,整數拉開字母距離,若是負數則拉近字母距離
    • wordSpacing,單詞間距,同上
    • textBaseline 用于對齊文本的水平線
    • height 文本行高,為字體大小的倍數
    • locale 用于選擇區域特定符號的區域設置
    • foreground 這個未知
    • background 文本的背景顏色
    • shadows 文本的陰影可以利用列表疊加處理,例如shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color即陰影的顏色, offset即陰影相對文本的偏移坐標,blurRadius即陰影的模糊程度,越小越清晰
    • decoration 文字的線性裝飾,比如 underline 下劃線, lineThrough刪除線
    • decorationColor 文本裝飾線的顏色
    • decorationStyle 文本裝飾線的樣式,比如 dashed 虛線
    • debugLabel 這種文本樣式的可讀描述,此屬性僅在調試構建中維護。

    簡單使用案例:

    import 'package:flutter/material.dart';
    void main() => runApp(MyApp());
    // Text詳解
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter_Wieghts',
          home: Scaffold(
            appBar: AppBar(
            title: Text('Text Learn'),
          ),
          body: Center(
            child: Text('Hello World'*4,
            style: TextStyle(
              inherit: true,
              color: Colors.white,
              fontSize: 30.0,
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.italic,
              letterSpacing: 5,
              wordSpacing: 20,
              textBaseline: TextBaseline.alphabetic,
              height: 1.2,
              locale: Locale('fr', 'CH'),
              background: Paint() ..color = Colors.blue,
              shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)],
              decoration: TextDecoration.underline,
              decorationColor: Colors.black54,
              decorationStyle: TextDecorationStyle.dashed,
              debugLabel: 'test',
            ),
            ),
           ),
          )
        );
      }
    }
     
    

    示例效果:

    image.png

    版權聲明:本文為Karven_原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/Karven_/article/details/89483906

    智能推薦

    Flutter Widgets 之 Wrap

    注意:無特殊說明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Wrap可以為子控件進行水平或者垂直方向布局,且當空間用完時,Wrap會自動換行,也是常說的流式?布局。 創建多個子控件做為Wrap的子控件,代碼如下: 效果如圖: 布局方向 direction屬性控制布局方向,默認為水平方向,設置方向為垂直代碼如下: 效果...

    Flutter Widgets 之 SafeArea

    注意:無特殊說明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 現如今的手機已經不能提供給應用程序規整的矩形界面了,一些帶圓角或者是劉海屏讓應用程序的布局更加復雜,甚至是需要單獨適配,這對開發者來來太糟糕了。 因此SafeArea控件應用而生,SafeArea通過MediaQuery檢測屏幕的尺寸使應用程序的大小與屏幕適...

    HTML中常用操作關于:頁面跳轉,空格

    1.頁面跳轉 2.空格的代替符...

    freemarker + ItextRender 根據模板生成PDF文件

    1. 制作模板 2. 獲取模板,并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意,都是關于獲取文件路徑的問題,由于項目部署的時候是打包成jar包形式,所以在開發過程中時直接安照傳統的獲取方法沒有一點文件,但是當打包后部署,總是出錯。于是參考網上文章,先將文件讀出來到項目的臨時目錄下,然后再按正常方式加載該臨時文件; 還有一個問題至今沒有解決,就是關于生成PDF文件...

    電腦空間不夠了?教你一個小秒招快速清理 Docker 占用的磁盤空間!

    Docker 很占用空間,每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時,我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾,咱們就一起看一下 Docker 是如何使用磁盤空間的,以及如何回收。 docker 占用的空間可以通過下面的命令查看: TYPE 列出了docker 使用磁盤的 4 種類型: Images:所有鏡像占用的空間,包括拉取下來的鏡像,和本地構建的。 Con...

    猜你喜歡

    requests實現全自動PPT模板

    http://www.1ppt.com/moban/ 可以免費的下載PPT模板,當然如果要人工一個個下,還是挺麻煩的,我們可以利用requests輕松下載 訪問這個主頁,我們可以看到下面的樣式 點每一個PPT模板的圖片,我們可以進入到詳細的信息頁面,翻到下面,我們可以看到對應的下載地址 點擊這個下載的按鈕,我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先,查看網頁的源代碼,我們可以看到每一...

    Linux C系統編程-線程互斥鎖(四)

    互斥鎖 互斥鎖也是屬于線程之間處理同步互斥方式,有上鎖/解鎖兩種狀態。 互斥鎖函數接口 1)初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

    統計學習方法 - 樸素貝葉斯

    引入問題:一機器在良好狀態生產合格產品幾率是 90%,在故障狀態生產合格產品幾率是 30%,機器良好的概率是 75%。若一日第一件產品是合格品,那么此日機器良好的概率是多少。 貝葉斯模型 生成模型與判別模型 判別模型,即要判斷這個東西到底是哪一類,也就是要求y,那就用給定的x去預測。 生成模型,是要生成一個模型,那就是誰根據什么生成了模型,誰就是類別y,根據的內容就是x 以上述例子,判斷一個生產出...

    styled-components —— React 中的 CSS 最佳實踐

    https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種,它既具備了 css-in-js 的模塊化與參數化優點,又完全使用CSS的書寫習慣,不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫,首先總結了前端組件化樣式中的最佳實踐原則,然后在此基...

    精品国产乱码久久久久久蜜桃不卡