Flutter文本Text和輸入框TextField組件使用示例
一:文本組件Text
//文本 const Text( String this.data, {//data必填項(xiàng)文本信息 Key? key, this.style,//文本樣式 this.strutStyle,//文本字體樣式 this.textAlign,//文本應(yīng)如何水平對(duì)齊 this.textDirection,//相對(duì)TextAlign中的start、end而言有用(當(dāng)start使用了ltr相當(dāng)于end使用了rtl,也相當(dāng)于TextAlign使用了left) this.locale, this.softWrap,//某一行中文本過長,是否需要換行。默認(rèn)為true, this.overflow,//如何處理視覺溢出//TextOverflow.fade:將溢出的文本淡化為透明。TextOverflow.clip:剪切溢出的文本以修復(fù)其容器。TextOverflow.ellipsis:使用省略號(hào)表示文本已溢出。 this.textScaleFactor,//每個(gè)邏輯像素的字體像素?cái)?shù) this.maxLines,//本要跨越的可選最大行數(shù) this.semanticsLabel, this.textWidthBasis, this.textHeightBehavior, }) : assert( data != null, 'A non-null String must be provided to a Text widget.', ), textSpan = null, super(key: key); //富文本 const Text.rich( InlineSpan this.textSpan, { Key? key, this.style, this.strutStyle, this.textAlign, this.textDirection, this.locale, this.softWrap, this.overflow,//如何處理視覺溢出//TextOverflow.fade:將溢出的文本淡化為透明。TextOverflow.clip:剪切溢出的文本以修復(fù)其容器。TextOverflow.ellipsis:使用省略號(hào)表示文本已溢出。 this.textScaleFactor,//textScaleFactor字體顯示倍率 this.maxLines,//maxLines文字顯示最大行數(shù) this.semanticsLabel, this.textWidthBasis, this.textHeightBehavior, }) : assert( textSpan != null, 'A non-null TextSpan must be provided to a Text.rich widget.', ), data = null, super(key: key);
文本樣式屬性TextStyle
const TextStyle({ this.inherit = true,//是否將null值替換為祖先文本樣式中的值(例如,在TextSpan樹中)。如果為false,則沒有顯式值的屬性將恢復(fù)為默認(rèn)值:白色,字體大小為10像素,采用無襯線字體。 this.color,//文本顏色。如果指定了foreground,則此值必須為null。如自定義顏色:Color.fromRGBO(155, 155, 155, 1) 也可以使用Colors類里面自帶的屬性 this.backgroundColor,//文本的背景顏色 this.fontSize,//字體大小,默認(rèn)14像素 this.fontWeight,//字體厚度,可以使文本變粗或變細(xì) //FontWeight.bold 常用的字體重量比正常重。即w700 //FontWeight.normal 默認(rèn)字體粗細(xì)。即w400 //FontWeight.w100 薄,最薄 //FontWeight.w200 特輕 //FontWeight.w300 輕 //FontWeight.w400 正常/普通/平原 //FontWeight.w500 較粗 //FontWeight.w600 半粗體 //FontWeight.w700 加粗 //FontWeight.w800 特粗 //FontWeight.w900 最粗 this.fontStyle,//字體風(fēng)格: //FontStyle.italic 使用斜體 //FontStyle.normal 使用直立 this.letterSpacing,//水平字母之間的空間間隔(邏輯像素為單位)??梢允褂秘?fù)值來讓字母更接近。 this.wordSpacing,//單詞之間添加的空間間隔(邏輯像素為單位)??梢允褂秘?fù)值來使單詞更接近。 this.textBaseline,//對(duì)齊文本的水平線: //TextBaseline.alphabetic:文本基線是標(biāo)準(zhǔn)的字母基線 //TextBaseline.ideographic:文字基線是表意字基線; //如果字符本身超出了alphabetic 基線,那么ideograhpic基線位置在字符本身的底部。 this.height,//文本行與行的高度,作為字體大小的倍數(shù)(取值1~2,如1.2) this.leadingDistribution, this.locale, this.foreground, this.background, this.shadows,//文本的陰影可以利用列表疊加處理,例如shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color即陰影的顏色, offset即陰影相對(duì)文本的偏移坐標(biāo),blurRadius即陰影的模糊程度,越小越清晰 this.fontFeatures, this.decoration,//文字的線性裝飾,比如 TextDecoration.underline 下劃線, //TextDecoration.lineThrough刪除線 this.decorationColor,//文本裝飾線的顏色 this.decorationStyle,//文本裝飾線的風(fēng)格 this.decorationThickness, this.debugLabel, String? fontFamily, List<String>? fontFamilyFallback, String? package, this.overflow, }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily', _fontFamilyFallback = fontFamilyFallback, _package = package, assert(inherit != null), assert(color == null || foreground == null, _kColorForegroundWarning), assert(backgroundColor == null || background == null, _kColorBackgroundWarning);
textAlign
文本應(yīng)如何水平對(duì)齊enum:
可選值 | 說明 |
---|---|
TextAlign.center | 將文本對(duì)齊容器的中心 |
TextAlign.end | 對(duì)齊容器后緣上的文本 |
TextAlign.start | 對(duì)齊容器前緣上的文本 |
TextAlign.justify | 拉伸以結(jié)束的文本行以填充容器的寬度。即使用了decorationStyle才起效 |
TextAlign.left | 對(duì)齊容器左邊緣的文本 |
TextAlign.right | 對(duì)齊容器右邊緣的文本 |
栗子:
return Scaffold( body: Center( child: Text("人生,是一條漫長的路。無論是陽關(guān)大道,還是羊腸小道;無論是春花爛漫的日子,還是冬雪紛飛的季節(jié);我們都要一路心存美好和希望,不卑不亢,不急不躁,長長的路,慢慢地走得之我幸,失之我命,有些時(shí)候,有些東西,不屬于咱,就未必永遠(yuǎn)不屬于咱,不要去爭,不用去搶,讓冥冥之中的浩瀚軌跡來預(yù)訂。淡泊明志,才能寧靜致遠(yuǎn)。", style: TextStyle( fontSize: 16, fontWeight: FontWeight.w500,//字體厚度 fontStyle: FontStyle.italic,//斜體 color: Color.fromRGBO(155, 155, 155, 1),//字體顏色 height: 2,//文本行與行的高度,作為字體大小的倍數(shù)(取值1~2,如1.2) decoration: TextDecoration.underline,//下劃線 decorationColor: Colors.orange, decorationStyle: TextDecorationStyle.dashed//虛線 ), textAlign: TextAlign.center,//對(duì)齊方式,居中對(duì)齊 ), ), );
在上面的例子中,Text的所有文本內(nèi)容只能按同一種樣式,如果我們需要對(duì)一個(gè)Text內(nèi)容的不同部分按照不同的樣式顯示,這時(shí)就可以使用TextSpan,它代表文本的一個(gè)“片段”。
TextSpan的定義
TextSpan用于指定文本片段的風(fēng)格及手勢交互
const TextSpan({ this.text,//顯示文本的組件 this.children,////子組件 TextStyle? style,//文本的樣式 this.recognizer,//指定手勢交互 recognizer: TapGestureRecognizer()..onTap = () {},可以監(jiān)聽點(diǎn)擊事件 MouseCursor? mouseCursor, this.onEnter, this.onExit, this.semanticsLabel, this.locale, this.spellOut, }) : mouseCursor = mouseCursor ?? (recognizer == null ? MouseCursor.defer : SystemMouseCursors.click), assert(!(text == null && semanticsLabel != null)), super(style: style);
栗子:
return Scaffold( body: Center( child: RichText( textScaleFactor: 5,//字體顯示倍率 overflow: TextOverflow.fade,//TextOverflow.fade:將溢出的文本淡化為透明。TextOverflow.clip:剪切溢出的文本以修復(fù)其容器。TextOverflow.ellipsis:使用省略號(hào)表示文本已溢出。 textDirection: TextDirection.ltr, textAlign: TextAlign.left,//對(duì)齊方式 text: TextSpan( children: [ TextSpan( text: "保證不對(duì)外公開或向第三方提供單個(gè)用戶的注冊(cè)資料及用戶在使用網(wǎng)絡(luò)服務(wù)時(shí)存儲(chǔ)", style: TextStyle( color: Colors.black, ), recognizer: TapGestureRecognizer()..onTap = () {}), TextSpan(text: "安全協(xié)議", style: TextStyle( color: Colors.red, ), //點(diǎn)擊事件 recognizer: TapGestureRecognizer()..onTap = () { print("點(diǎn)擊了安全協(xié)議"); }) ] ), ), ), ) ----------------------------------------------------- //另一種方式實(shí)現(xiàn)父文本文本組裝使用Text.rich() //InlineSpan 是默認(rèn)必須得加的 InlineSpan span = TextSpan(children: [ TextSpan( text: "保證不對(duì)外公開或向第三方提供單個(gè)用戶的注冊(cè)資料及用戶在使用網(wǎng)絡(luò)服務(wù)時(shí)存儲(chǔ)", style: TextStyle( color: Colors.black, ), recognizer: TapGestureRecognizer()..onTap = () {}), TextSpan( text: "安全協(xié)議", style: TextStyle( color: Colors.red, ), //點(diǎn)擊事件 recognizer: TapGestureRecognizer() ..onTap = () { print("點(diǎn)擊了安全協(xié)議"); }) ]); return Scaffold( body: Center( child: Text.rich( span, textScaleFactor: 5, //字體顯示倍率 overflow: TextOverflow.fade, //TextOverflow.fade:將溢出的文本淡化為透明。TextOverflow.clip:剪切溢出的文本以修復(fù)其容器。TextOverflow.ellipsis:使用省略號(hào)表示文本已溢出。 textDirection: TextDirection.ltr, textAlign: TextAlign.left, //對(duì)齊方式 ), ), );
TextRich實(shí)現(xiàn)富文本和Text.rich()都能實(shí)現(xiàn)富文本
二:輸入框TextField
const TextField({ Key? key, this.controller,//控制器,通過它可以獲取文本內(nèi)容,監(jiān)聽編輯文本事件,大多數(shù)情況下我們需要主動(dòng)提供一個(gè)控制器 this.focusNode,//焦點(diǎn)控制 this.decoration = const InputDecoration(),//用于控制文本的外觀,如提示文本、背景色、邊框等 TextInputType? keyboardType,//用于設(shè)置輸入框的默認(rèn)鍵盤類型 this.textInputAction,//鍵盤動(dòng)作圖標(biāo)按鈕,他是一個(gè)枚舉值 this.textCapitalization = TextCapitalization.none,//大小寫 this.style,//樣式 this.strutStyle, this.textAlign = TextAlign.start,//文本框的在水平方向的對(duì)齊方式 this.textAlignVertical, this.textDirection, this.readOnly = false,//只讀屬性默認(rèn)false ToolbarOptions? toolbarOptions,//長按彈出按鈕設(shè)置 this.showCursor,//是否顯示光標(biāo)默認(rèn)true this.autofocus = false,//是否自動(dòng)獲取焦點(diǎn) this.obscuringCharacter = '?', this.obscureText = false,//是否隱藏正在編輯的文本,用于密碼輸入場景 this.autocorrect = true, SmartDashesType? smartDashesType, SmartQuotesType? smartQuotesType, this.enableSuggestions = true, this.maxLines = 1,//輸入框的最大行數(shù) this.minLines,//最小行數(shù) this.expands = false, this.maxLength,//文本框的最大長度 @Deprecated( 'Use maxLengthEnforcement parameter which provides more specific ' 'behavior related to the maxLength limit. ' 'This feature was deprecated after v1.25.0-5.0.pre.', ) this.maxLengthEnforced = true, this.maxLengthEnforcement,//當(dāng)文本長度超出文本框長度時(shí)如何處理 this.onChanged,//輸入框改變時(shí)候的回調(diào)函數(shù),也可以通過controller來監(jiān)聽 this.onEditingComplete,//輸入完后觸發(fā)的回調(diào)函數(shù),不接受參數(shù) this.onSubmitted,//接收ValueChanged<String>的參數(shù) this.onAppPrivateCommand, this.inputFormatters,//用于指定輸入格式,可以用于檢驗(yàn)格式 this.enabled,//為bool時(shí),輸入框?qū)⒆優(yōu)榻脿顟B(tài) this.cursorWidth = 2.0,//用于自定義輸入框光標(biāo)寬度 this.cursorHeight,//用于自定義輸入框光標(biāo)高度 this.cursorRadius,//用于自定義輸入框光標(biāo)圓角 this.cursorColor,//用于自定義輸入框光標(biāo)顏色 this.selectionHeightStyle = ui.BoxHeightStyle.tight, this.selectionWidthStyle = ui.BoxWidthStyle.tight, this.keyboardAppearance,//鍵盤外觀 this.scrollPadding = const EdgeInsets.all(20.0), this.dragStartBehavior = DragStartBehavior.start, this.enableInteractiveSelection = true, this.selectionControls, this.onTap,//點(diǎn)擊事件 this.mouseCursor,//鼠標(biāo)懸停。web可以了解 this.buildCounter,//inputDecorator.counter自定義小工具 this.scrollController,//滾動(dòng)控制器 this.scrollPhysics,//滾動(dòng)物理效果 this.autofillHints = const <String>[],//自動(dòng)填充 this.clipBehavior = Clip.hardEdge, this.restorationId, this.enableIMEPersonalizedLearning = true, }) : assert(textAlign != null), assert(readOnly != null), assert(autofocus != null), assert(obscuringCharacter != null && obscuringCharacter.length == 1), assert(obscureText != null), assert(autocorrect != null), smartDashesType = smartDashesType ?? (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled), smartQuotesType = smartQuotesType ?? (obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled), assert(enableSuggestions != null), assert(enableInteractiveSelection != null), assert(maxLengthEnforced != null), assert( maxLengthEnforced || maxLengthEnforcement == null, 'maxLengthEnforced is deprecated, use only maxLengthEnforcement', ), assert(scrollPadding != null), assert(dragStartBehavior != null), assert(selectionHeightStyle != null), assert(selectionWidthStyle != null), assert(maxLines == null || maxLines > 0), assert(minLines == null || minLines > 0), assert( (maxLines == null) || (minLines == null) || (maxLines >= minLines), "minLines can't be greater than maxLines", ), assert(expands != null), assert( !expands || (maxLines == null && minLines == null), 'minLines and maxLines must be null when expands is true.', ), assert(!obscureText || maxLines == 1, 'Obscured fields cannot be multiline.'), assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0), // Assert the following instead of setting it directly to avoid surprising the user by silently changing the value they set. assert( !identical(textInputAction, TextInputAction.newline) || maxLines == 1 || !identical(keyboardType, TextInputType.text), 'Use keyboardType TextInputType.multiline when using TextInputAction.newline on a multiline TextField.', ), assert(clipBehavior != null), assert(enableIMEPersonalizedLearning != null), keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline), toolbarOptions = toolbarOptions ?? (obscureText ? const ToolbarOptions( selectAll: true, paste: true, ) : const ToolbarOptions( copy: true, cut: true, selectAll: true, paste: true, )), super(key: key);
1.keyboardType 為鍵盤類型
和尚理解整體分為數(shù)字鍵盤和字母鍵盤等;根據(jù)設(shè)置的鍵盤類型,鍵盤會(huì)有差別;
a. 數(shù)字鍵盤
--1-- datetime 鍵盤上可隨時(shí)訪問 : 和 /;
--2-- phone 鍵盤上可隨時(shí)訪問 # 和 *;
--3-- number 鍵盤上可隨時(shí)訪問 + - * /
b. 字母鍵盤
--1-- emailAddress 鍵盤上可隨時(shí)訪問 @ 和 .;
--2-- url 鍵盤上可隨時(shí)訪問 / 和 .;
--3-- multiline 適用于多行文本換行;
--4-- text 默認(rèn)字母鍵盤;
2.textInputAction
通常為鍵盤右下角操作類型,類型眾多,建議多多嘗試
* none 為不彈出鍵盤
* unspecified 換行
* none 為不彈出鍵盤
* done 完成或者done
* go 前往或者go
* search 搜索或者search
* send 發(fā)送或者send
* next 下一項(xiàng)或者next
* previous
* continueAction 繼續(xù)或者 continue
* join 加入或者join
* route 路線或者route
* emergencyCall 緊急電話
* newline 換行或者newline
栗子:
//定義一個(gè)controller TextEditingController _unameController = TextEditingController(); _unameController.addListener(() { print("你輸入的內(nèi)容為${_unameController.text}"); }); return Scaffold( body: Center( child: TextField( //設(shè)置監(jiān)聽 controller: _unameController, autofocus: true, keyboardType: TextInputType.text, decoration: InputDecoration( icon: Icon(Icons.person), labelText: "用戶名", hintText: "請(qǐng)輸入手機(jī)號(hào)", // errorText: "沒有輸入任何內(nèi)容"), ), maxLines: 1, //注意執(zhí)行順序onTap->onChanged->onEditingComplete->onSubmitted onTap: (){ print("onTap"); }, onChanged: (string) { print("onChanged$string"); }, onEditingComplete: () { print("onEditingComplete"); }, onSubmitted: (string) { print("onSubmitted$string"); }, ), ));
輸出的結(jié)果:說明了執(zhí)行順序onTap->onChanged->onEditingComplete->onSubmitted
I/flutter (14614): onTap
I/flutter (14614): 你輸入的內(nèi)容為你好
I/flutter (14614): onChanged你好
I/flutter (14614): 你輸入的內(nèi)容為你好世界//這個(gè)是監(jiān)聽TextEditingController打印的和onChanged類似
I/flutter (14614): onChanged你好世界
I/flutter (14614): onEditingComplete
I/flutter (14614): onSubmitted你好世界
以上就是Flutter文本Text和輸入文本框TextField組件使用示例的詳細(xì)內(nèi)容,更多關(guān)于Flutter文本輸入文本框組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android 實(shí)現(xiàn)將Bitmap 保存到本地
這篇文章主要介紹了Android 實(shí)現(xiàn)將Bitmap 保存到本地,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android自定義View繪制隨機(jī)生成圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了Android自定義View繪制隨機(jī)生成圖片驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Android通過手機(jī)拍照或從本地相冊(cè)選取圖片設(shè)置頭像
微信、QQ、微博等社交類APP如何更換自己的頭像,這篇文章主要介紹了Android通過手機(jī)拍照或從本地相冊(cè)選取圖片設(shè)置頭像,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07android讀取Assets圖片資源保存到SD卡實(shí)例
本文為大家詳細(xì)介紹下android讀取Assets圖片資源保存到SD卡的具體實(shí)現(xiàn),感興趣的各位可以參考下哈,希望對(duì)大家有所幫助2013-07-07Android ToolBar整合實(shí)例使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android ToolBar整合實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android中GridView布局實(shí)現(xiàn)整體居中方法示例
最近在工作中遇到了GridView布局的相關(guān)問題,通過查找相關(guān)資料終于解決了,所以下面這篇文章主要給大家介紹了關(guān)于Android中GridView布局實(shí)現(xiàn)整體居中的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒。2017-09-09Android ChipGroup收起折疊效果實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Android ChipGroup收起折疊效果實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11