Flutter實(shí)現(xiàn)Text完美封裝
使用慣了android的布局,對Flutter的組件和布局簡直深惡痛絕啊,于是下定決心,一點(diǎn)一點(diǎn)封裝Flutter的基礎(chǔ)組件,今天封裝的是Text組件,自認(rèn)為封裝的非常完美,完全可以用android布局的寫法來寫Text了,而且可以直接設(shè)置margin,padding,color,font,等等所有的屬性,只需要一行代碼就能實(shí)現(xiàn),廢話不多說,先看效果
我們可以看到,顏色,邊框,圓角通通都設(shè)置完成了,還有其他的屬性,就不都一一展示了,實(shí)現(xiàn)這個(gè)效果需要哪些代碼呢?看下面
TextView( "自定義textview自定義textview自定義textview自定義textview自定義textview", backgroundColor: Colors.red, textColor: Colors.white, padding: 10, cornerRadius: 10, borderColor: Colors.yellow, borderWidth: 1, marginTop: 5, singleLine: false, )
是的,跟android布局的方法完全一樣,再也不用嵌套container再也不要寫什么style了!??!
具體的封裝實(shí)體類如下,為了紀(jì)念android,我叫他TextView,具體屬性參考代碼里面,應(yīng)該都很簡單易懂吧
import 'package:flutter/material.dart'; class TextView extends StatelessWidget { double? padding = 0; double? margin = 0; double? paddingLeft = 0; double? paddingRight = 0; double? paddingTop = 0; double? paddingBottom = 0; double? marginLeft = 0; double? marginRight = 0; double? marginTop = 0; double? marginBottom = 0; double? fontSize = 0; Color? textColor = Colors.black; Color? backgroundColor = Colors.white; AlignmentGeometry? alignment = Alignment.center; double? cornerRadius = 0; double? borderWidth = 0; Color? borderColor = Colors.white; String content = ""; bool? singleLine = false; bool? isBold = false; TextView(this.content, {this.textColor, this.backgroundColor, this.padding, this.paddingTop, this.paddingBottom, this.paddingRight, this.paddingLeft, this.cornerRadius, this.borderColor, this.borderWidth, this.marginBottom, this.marginLeft, this.marginRight, this.marginTop, this.margin, this.fontSize, this.singleLine, this.isBold}) { if (padding != null) { if (padding != null && padding! > 0) { paddingLeft = padding; paddingRight = padding; paddingBottom = padding; paddingTop = padding; } } if (margin != null) { if (margin != null && margin! > 0) { marginLeft = margin; marginTop = margin; marginRight = margin; marginBottom = margin; } } } @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.fromLTRB(this.marginLeft ?? 0, this.marginTop ?? 0, this.marginRight ?? 0, this.marginBottom ?? 0), decoration: new BoxDecoration( border: new Border.all( width: this.borderWidth ?? 0, color: this.borderColor ?? Colors.white), color: this.backgroundColor, borderRadius: new BorderRadius.all(new Radius.circular(this.cornerRadius ?? 0)), ), padding: EdgeInsets.fromLTRB(this.paddingLeft ?? 0, this.paddingTop ?? 0, this.paddingRight ?? 0, this.paddingBottom ?? 0), child: Text( content, style: TextStyle( color: this.textColor, fontSize: this.fontSize ?? 14, fontWeight: this.isBold ?? false ? FontWeight.bold : FontWeight.normal, overflow: this.singleLine ?? false ? TextOverflow.ellipsis : TextOverflow.clip), ), ); } }
到此這篇關(guān)于Flutter完美封裝Text的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
簡單掌握Android Widget桌面小部件的創(chuàng)建步驟
這篇文章主要介紹了簡單掌握Android Widget桌面小部件的創(chuàng)建步驟,Widget一般采用web前端技術(shù)進(jìn)行開發(fā),需要的朋友可以參考下2016-03-03viewPager+fragment刷新緩存fragment的方法
這篇文章主要介紹了viewPager+fragment刷新緩存fragment的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03Android 進(jìn)度條顯示在標(biāo)題欄的實(shí)現(xiàn)方法
android進(jìn)度條顯示在標(biāo)題欄的實(shí)現(xiàn)方法,大概分文xml文件和java文件,具體代碼內(nèi)容大家可以通過本文學(xué)習(xí)下2017-01-01Android 5.0+ 屏幕錄制實(shí)現(xiàn)的示例代碼
這篇文章主要介紹了Android 5.0+ 屏幕錄制實(shí)現(xiàn)的示例代碼,從 5.0 開始,系統(tǒng)提供給了 app 錄制屏幕的一系列方法,不需要 root 權(quán)限,只需要用戶授權(quán)即可錄屏,相對來說較為簡單,感興趣的小伙伴們可以參考一下2018-05-05Android Drawerlayout側(cè)拉欄事件傳遞問題的解決方法
這篇文章主要為大家詳細(xì)介紹了Android Drawerlayout側(cè)拉欄事件傳遞問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Android使用AlertDialog實(shí)現(xiàn)的信息列表單選、多選對話框功能
在使用AlertDialog實(shí)現(xiàn)單選和多選對話框時(shí),分別設(shè)置setSingleChoiceItems()和setMultiChoiceItems()函數(shù)。具體實(shí)現(xiàn)代碼大家參考下本文吧2017-03-03Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(一)
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)動(dòng)畫效果的第一篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08