flutter組件封裝技巧

這段代碼是一個用于創建一個(GradeTag)組件的類。這個組件可以根據輸入的年級和顏色創建一個具有不同顏色和百分比顯示的標簽。

實現原理:

  1. 使用GradeTag.origin構造函數來創建一個包含默認顏色和百分比的字符串。這個構造函數使用了assert來確保輸入的年級在特定的集合中('SSR', 'SR', 'S', '普通')。
  2. 使用GradeTag工廠方法來創建不同級別的GradeTag。通過傳入不同的顏色參數,可以實現不同級別的標簽具有不同的顏色。
  3. build方法中,使用Row組件來創建標簽的布局。通過設置Container的邊框圓角半徑為6.0,可以實現標簽具有圓角邊框。
  4. 使用Text組件來顯示年級和百分比。通過設置字體樣式和顏色,可以實現不同的字體樣式和顏色顯示。

用途:

這個組件可以用于展示不同級別的成績標簽,例如SSR(高級)、SR(中級)和S(初級)等。同時,可以通過傳入不同的顏色參數來定制標簽的顏色。

注意事項:

  1. 確保在調用GradeTag.origin構造函數時,傳入的年級在特定的集合中。否則,將會拋出異常。
  2. 在使用GradeTag工廠方法時,可以傳入KeyColor參數,但不是必需的。如果未傳入,將使用默認值。
  3. build方法中,使用了const關鍵字來定義EdgeInsets和BorderRadius,這意味著這些值在組件加載時只計算一次,從而提高性能。
  4. 使用if條件語句來判斷是否顯示百分比。這樣可以控制只有當百分比參數不為空時才顯示百分比。
class GradeTag extends StatelessWidget {final String grade;final Color? color;final String? num;const GradeTag.origin(this.grade,{super.key, this.color, this.num = ''}): assert(grade == 'SSR' || grade == 'SR' || grade == 'S' || grade == '普通');factory GradeTag(String grade,{Key? key, Color color = Colors.grey, String number = ''}) {switch (grade) {case 'SSR':return GradeTag.origin(grade, color: Colors.red, num: number);case 'SR':return GradeTag.origin(grade, color: Colors.orange, num: number);case 'S':return GradeTag.origin(grade, color: Colors.orange, num: number);case '普通':return GradeTag.origin(grade, color: Colors.grey, num: number);default:return GradeTag.origin(grade, color: color, num: number);}}@overrideWidget build(BuildContext context) {return Row(children: [Container(padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 6),decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(6.0)),child: Text(grade,style: const TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0,color: Colors.white),),),if (num != '')Padding(padding: const EdgeInsets.only(left: 8.0),child: Text('$num%'),)],);}
}

構造函數工廠方法是兩種不同的對象創建模式,在面向對象編程中廣泛使用,它們之間有以下異同:

相同之處:

  1. 目的:兩者都用于創建對象實例。

不同之處:

構造函數(Constructor)
  • 定義:構造函數是一種特殊的方法,與類關聯,當通過?new?關鍵字創建類的新實例時自動調用。
  • 特點
    • 名稱與類名相同。
    • 構造函數可以有參數,用來初始化對象的狀態。
    • JavaScript 中構造函數通常首字母大寫,這是一種約定俗成的做法,便于區分普通函數。
    • 使用?new?關鍵字調用時,會創建一個新的對象,并將該對象的上下文(即?this)綁定到新創建的對象上。
工廠方法(Factory Method)
  • 定義:工廠方法是一種設計模式,它是一種用于創建對象的接口,讓子類決定實例化哪一個類。這里的解釋主要針對廣義上的工廠模式,包括簡單工廠、工廠方法模式、抽象工廠模式等。
  • 特點
    • 是一個獨立的函數或類方法,不局限于類內部。
    • 根據傳入的參數或其他邏輯,動態決定創建哪種類型的對象。
    • 工廠方法可以隱藏對象的具體創建過程,提供了更大的靈活性,可以返回父類引用指向子類對象,實現多態。
    • 在JavaScript中,工廠函數通常不會被new關鍵字調用,而是直接調用函數并返回新創建的對象。
    • 工廠函數不會自動調用,需要手動調用

具體到JavaScript中:

  • 構造函數舉例

    function Animal(type) {this.type = type;
    }
    var cat = new Animal('cat');
  • 工廠函數舉例

    function createAnimal(type) {let animal;switch (type) {case 'cat':animal = Object.create(Cat.prototype);animal.initialize(); // 初始化Cat對象break;case 'dog':animal = new Dog(); // 或者直接創建Dog對象break;default:animal = null;}return animal;
    }
    var myCat = createAnimal('cat');

總結來說,構造函數是類的一部分,負責初始化類的實例,而工廠方法是一種更靈活的設計模式,但與構造函數不同,它不返回一個新對象,而是返回一個已經存在的對象。工廠函數不會自動調用,需要手動調用。允許你根據輸入數據或環境條件創建不同類型的對象,它并不強制與類結構直接綁定。在JavaScript中,有時工廠函數也被用來模擬類似構造函數的行為,特別是當需要控制是否總是返回新對象,或者避免不小心忘記使用new關鍵字時。在構造函數中,this關鍵字引用當前創建的對象;在工廠函數中,this關鍵字引用的是函數的調用者。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/12822.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12822.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/12822.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

如何使用AspectJ做切面,打印jar包中方法的執行日記

最近在工作中遇到一個redis緩存中的hash key莫名其妙被刪除的問題,我們用了J2Cache,二級緩存用的是redis。hash key莫名其妙被刪除又沒有日志,就想到做一個切面在調用redis刪除hash key的方法的時候,打印日志,并且把調…

高德、百度開車導航APP是怎么知道紅綠燈倒計時的?

高德、百度開車導航APP之所以能夠知道紅綠燈的倒計時,這背后是一系列復雜的科技手段和數據分析的綜合運用。從交管部門提供的數據,到導航軟件自身通過大數據和算法進行的計算,每一個環節都為紅綠燈倒計時的準確呈現提供了支撐。 首先&#xf…

白酒:低酒精度白酒的消費特點與市場前景

低酒精度白酒的消費特點與市場前景是酒類市場的一個重要話題。隨著品質意識的提高和消費者口味的多樣化,低酒精度白酒逐漸受到越來越多的關注。云倉酒莊豪邁白酒作為白酒的品牌之一,其消費特點和市場前景值得深入探討。 首先,從消費特點來看…

基于YOLOv5的道路裂縫檢測,加入一種基于內容引導注意力(CGA)的混合融合提升2個多點

💡💡💡本文主要內容:詳細介紹道路裂縫檢測整個過程,從數據集到訓練模型到結果可視化分析。 💡💡💡通過加入一種基于內容引導注意力(CGA)的混合融合提升檢測性能, 特征融合創新 | 一…

WS2812C是一款將控制電路和RGB芯片集成在一個5050元器件封裝中的智能控制LED光源

一般說明 WS2812C是一款將控制電路和RGB芯片集成在一個5050元器件封裝中的智能控制LED光源。內部包括智能數字端口數據鎖存器和信號整形放大驅動電路。還包括一個精密的內部振蕩器和一個 12V電壓可編程恒流控制部分,有效保證像素點光源顏色高度一致。 …

決策規劃仿真平臺的搭建

以下內容筆記據來自于b站up主忠厚老實的老王,視頻;鏈接如下: 自動駕駛決策規劃算法第二章第一節 決策規劃仿真平臺搭建_嗶哩嗶哩_bilibili 使用到的軟件有matlab、prescan、carsim以及visual stadio。 我電腦上軟件的版本是matlab2022a&am…

2024.1IDEA 到2026年

鏈接:https://pan.baidu.com/s/1hjJEV5A5k1Z9JbPyBXywSw?pwd9g4i 提取碼:9g4i解壓之后,按照 操作說明.txt 操作; IntelliJ IDEA 2024.1 (Ultimate Edition) Build #IU-241.14494.240, built on March 28, 2024 Licensed to gurgles tumbles You have…

Python代碼:二、多行輸出

1、題目 將字符串 Hello World! 存儲到變量str1中,再將字符串 Hello Nowcoder! 存儲到變量str2中,再使用print語句將其打印出來(一行一個變量)。 2、代碼 import sys str1 Hello World! str2 Hello Nowcoder! print (str1,st…

詳細分清Session,Cookie和Token之間的區別,以及JWT是什么東西

Cookie Cookie是一種小型的文本文件,由網站在用戶訪問時存儲在其計算機或移動設備上,Cookie主要用于跟蹤、識別和存儲有關用戶的信息。 簡單來說Cookie就是用來存儲某些后端發送給前端的數據,例如我們登陸后,后端會返回一個登錄…

Vue3 + Avue中 Header slot寫法

avue示例 <template><avue-crud ref"crud":option"option":data"data"><template #name-header"{column}"><el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag></template><…

02、網絡協議、IP地址、網絡狀況、網絡異質性問題的解決

聲明&#xff1a;本教程不收取任何費用&#xff0c;歡迎轉載&#xff0c;尊重作者勞動成果&#xff0c;不得用于商業用途&#xff0c;侵權必究&#xff01;&#xff01;&#xff01; 目錄 前言 一、IP地址 二、網絡協議 三、網絡狀況【了解】 四、網絡異質性問題的解決 前…

C++ requires關鍵字簡介

requires 是 C20 中引入的一個新關鍵字&#xff0c;用于在函數模板或類模板中聲明所需的一組語義要求&#xff0c;它可以用來限制模板參數&#xff0c;類似于 typename 和 class 關鍵字。 requires關鍵字常與type_traits頭文件下類型檢查函數匹配使用&#xff0c;當requires后…

激光雷達技術:科技之眼,照亮前行

在科技與人文關懷的交響樂章中&#xff0c;一項名為“蝙蝠避障”使用了激光雷達技術原理及應用的創新成果&#xff0c;正悄然改變著視障朋友們的生活方式&#xff0c;為他們的日常出行鋪設了一條充滿希望的光明之路。今天&#xff0c;讓我們一起深入探討這項技術如何成為盲人出…

深化市場布局與產業鏈整合,三清互聯以創新為公司發展賦能

近年來&#xff0c;我國大力發展現代化電力體系&#xff0c;并不斷推進智能電網的發展&#xff0c;電力物聯網作為支撐電力行業數字化發展的關鍵基礎設施&#xff0c;迎來了快速發展黃金時期。作為電力物聯網領域領先企業之一&#xff0c;三清互聯憑借敏銳的市場洞察力和技術創…

探索軟件測試中的創新測試方法:測試左移

軟件測試中的測試左移方法 在當今競爭激烈的市場中&#xff0c;滿足客戶的期望和需求是所有公司在競爭中成為市場領導者的關鍵。這就是為什么越來越多的公司現在轉向測試左移&#xff0c;并將其應用于產品開發過程。 在本文中&#xff0c;我們將從初學者的角度來介紹測試左移…

cmd如何以管理員身份運行

打開開始菜單。 在搜索框中輸入cmd。 在搜索結果中&#xff0c;找到cmd&#xff0c;右鍵單擊&#xff0c;選擇“以管理員身份運行”。 參考&#xff1a; cmd如何以管理員身份運行

2024最新大廠C++面試真題合集,大廠面試百日沖刺 bay10

字節后端 什么叫進程&#xff1f;什么叫線程&#xff1f;他倆有什么區別和聯系&#xff1f; 進程是操作系統進行資源分配和調度的基本單位&#xff0c;是一個程序關于某數據集合上的一次運行活動&#xff0c;是系統進行資源分配和調度的獨立單位。 線程是進程的一個執行流&am…

刷題之字母異位詞(leetcode 哈希表)

https://leetcode.cn/problems/group-anagrams/ class Solution { public:vector<vector<string>> groupAnagrams(vector<string>& strs) {unordered_map<string,vector<string>>map;//哈希表鍵為排序后或者處理后的字符串&#xff0c;值為某…

(1)醫療圖像處理:MRI磁共振成像-基本原理--(楊正漢

一、基本原理 1.組成 對應了解 1&#xff09;主磁體&#xff1a; 基本構建&#xff0c;用于產生磁場&#xff0c;主要有兩種方式產生磁場永磁&#xff08;磁鐵&#xff09;、電磁&#xff08;給線圈通電&#xff09;。MR按主磁場的場強分類主要有四類&#xff0c;分類的原因…

5.14學習總結

java聊天室項目 分片上傳 將大文件切分為多個小的數據塊&#xff08;通常大小為1MB~10MB&#xff09;&#xff0c;然后將這些小數據塊分別上傳至服務器&#xff0c;最后由服務器將這些小塊組合成完整的文件。這種方式可以避免由于網絡中斷或超時而導致上傳失敗&#xff0c;并…