Flutter 之 裝飾容器DecoratedBox （四十四）

DecoratedBox可以在其子組件繪制前(或后)繪制一些裝飾（Decoration），如背景、邊框、漸變等。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)都蘭,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

DecoratedBox定義如下：

我們通常會直接使用BoxDecoration類，它是一個Decoration的子類，實現(xiàn)了常用的裝飾元素的繪制。

圓形頭像

圓角頭像

Flutter TextField 文本輸入框的基本屬性及詳解

源碼分析：

分析源碼可得，TextField 是有狀態(tài) StatefulWidget，有豐富的屬性，自定義化較高，實踐中需要合理利用各種回調(diào)；

1、光標(biāo)的相關(guān)屬性；cursorColor 為光標(biāo)顏色，cursorWidth 為光標(biāo)寬度，cursorRadius 為光標(biāo)圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；

2、textAlign 為文字起始位置，可根據(jù)業(yè)務(wù)光標(biāo)居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內(nèi)容方向，從左向右或從右向左；

3、maxLength 為字符長度，設(shè)置時默認(rèn)是展示一行，且右下角有編輯長度與整體長度對比；與 maxLengthEnforced 配合，maxLengthEnforced 為 true 時達(dá)到最大字符長度后不可編輯；為 false 時可繼續(xù)編輯展示有差別；

4、設(shè)置 maxLength 之后右下角默認(rèn)有字符計數(shù)器，設(shè)置 TextField.noMaxLength 即可只展示輸入字符數(shù)；

5、maxLines 為允許展現(xiàn)的最大行數(shù)，在使用 maxLength 時內(nèi)容超過一行不會自動換行，因為默認(rèn) maxLines=1，此時設(shè)置為 null 或固定展示行數(shù)即可自動換行；區(qū)別在于 null 會展示多行，而 maxLines 最多只展示到設(shè)置行數(shù)；

6、obscureText 是否隱藏編輯內(nèi)容，常見的密碼格式；

7、enableInteractiveSelection 長按是否出現(xiàn)【剪切/復(fù)制/粘貼】菜單；不可為空；

8、keyboardAppearance 為鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設(shè)備；

9、textCapitalization 文字大小寫；理論上 sentences 為每句話第一個字母大寫；characters為每個字母大寫；words 為每個單詞首字母大寫；但該屬性僅限于 text keybord，和尚在本地更換多種方式并未實現(xiàn)，有待研究；

10、keyboardType 為鍵盤類型，和尚理解整體分為數(shù)字鍵盤和字母鍵盤等；根據(jù)設(shè)置的鍵盤類型，鍵盤會有差別；

a. 數(shù)字鍵盤

--1-- datetime 鍵盤上可隨時訪問 : 和 /；

--2-- phone 鍵盤上可隨時訪問 # 和 *；

--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤

--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .；

--2-- url 鍵盤上可隨時訪問 / 和 .；

--3-- multiline 適用于多行文本換行；

--4-- text 默認(rèn)字母鍵盤；

11、textInputAction 通常為鍵盤右下角操作類型，類型眾多，建議多多嘗試；

12、autofocus 是否自動獲取焦點，進入頁面優(yōu)先獲取焦點，并彈出鍵盤，若頁面中有多個 TextField 設(shè)置 autofocus 為 true 則優(yōu)先獲取第一個焦點；

13、focusNode 手動獲取焦點，可配合鍵盤輸入等減少用戶操作次數(shù)，直接獲取下一個 TextField 焦點；

14、enabled 設(shè)為 false 之后 TextField 為不可編輯狀態(tài)；

15、decoration 為邊框修飾，可以借此來調(diào)整 TextField 展示效果；可以設(shè)置前置圖標(biāo)，后置圖片，邊框?qū)傩裕瑑?nèi)容屬性等，會在后續(xù)集中嘗試；若要完全刪除裝飾，將 decoration 設(shè)置為空即可；

16、inputFormatters 為格式驗證，例如原生 Android 中通常會限制輸入手機號或其他特殊字符，在 Flutter 中也可以借此來進行格式限制，包括正則表達(dá)式；使用時需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長字符；

b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符；如 digitsOnly 僅支持?jǐn)?shù)字 [0-9]；

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強制輸入單行；

分析源碼 RegExp("[/]") 可以設(shè)置正則表達(dá)式；

17、onChanged 文本內(nèi)容變更時回調(diào)，可實時監(jiān)聽 TextField 輸入內(nèi)容；

18、controller 文本控制器，監(jiān)聽輸入內(nèi)容回調(diào)；

19、onTap 點擊 TextField時回調(diào)；

20、onEditingComplete 在提交內(nèi)容時回調(diào)，通常是點擊回車按鍵時回調(diào)；

21、onSubmit 在提交時回調(diào)，不可與 onEditingComplete 同時使用，區(qū)別在于 onSubmit 是帶返回值的回調(diào)；

問題小結(jié)：

當(dāng) TextField 設(shè)置 enableInteractiveSelection 屬性后長按會出現(xiàn)菜單，默認(rèn)為英文，可通過設(shè)置 Flutter 國際化來處理；

（1）在 pubspec.yaml 中集成 flutter_localizations；

2）在 MaterialApp 中設(shè)置本地化代理和支持的語言類型；

（1）將 maxLength 設(shè)置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符；

（2）設(shè)置 InputDecoration 中 decoration 屬性為空；但是底部有空余，只是隱藏而并非消失；

Flutter-Text文本組件

在開發(fā)中，文本是我們最常接觸的控件。這篇博客來分享一下 Flutter 中的 Text 文本組件，我們展示的文本都可以用這個組件來展示，希望看文章的小伙伴有所幫助。

這樣我們就可以在界面當(dāng)中顯示一個文本，顯示是 Hello Flutter 。下面我們來說說 Text 組件的屬性：

設(shè)置文本顏色：

設(shè)置文本大小：

設(shè)置文本樣式-加粗：

設(shè)置文本樣式-斜體：

設(shè)置文本位置：

TextAlign可選屬性： center 、 end 、 start 、 justify 、 left 、 right 。

設(shè)置文本高度：

設(shè)置文本最大行數(shù)：

設(shè)置文本有下劃線：

設(shè)置文本有虛線類型下劃線：

設(shè)置文字間隔：

文本超過最大行數(shù)設(shè)置 ... ：

Flutter（6）：基礎(chǔ)組件之Image

Image是一個用于展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image.asset - 用于從資源目錄的顯示圖片,需要在 pubspec.yaml 文件中聲明。

Image.network - 用于從網(wǎng)絡(luò)上顯示圖片。

Image.file - 用于從文件里顯示圖片。

Image.memory - 用于從內(nèi)存里（Uint8List）顯示圖片。

alignment → AlignmentGeometry - 圖像邊界內(nèi)對齊圖像。

centerSlice → Rect - 九片圖像的中心切片。

color → Color - 該顏色與每個圖像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用。

fit → BoxFit - 圖像在布局中分配的空間。

gaplessPlayback → bool - 當(dāng)圖像提供者發(fā)生變化時，是繼續(xù)顯示舊圖像（true）還是暫時不顯示（false）。

image → ImageProvider - 要顯示的圖像。

matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。

repeat → ImageRepeat - 未充分容器時，是否重復(fù)圖片。

height → double - 圖像的高度。

width → double - 圖像的寬度。

加載資源圖片需要將圖片資源放入工程中，例如：新建images文件夾，將圖片放在該文件夾下，圖片適配則是使用ios的方式1X，2X，3X：

然后在pubspec.yaml中配置assets：

加載資源/網(wǎng)絡(luò)/本地文件圖片/內(nèi)存圖片：

占位圖加載圖片：

圓形圖片：1.裁剪實現(xiàn) 2.CircleAvatar實現(xiàn) 3.Container邊框?qū)崿F(xiàn)

圓角圖片：1.裁剪實現(xiàn) 2.Container邊框?qū)崿F(xiàn)

BoxFit.contain 全圖居中顯示但不充滿，顯示原比例

BoxFit.cover 圖片可能拉伸，也可能裁剪，但是充滿容器

BoxFit.fill 全圖顯示且填充滿，圖片可能會拉伸

BoxFit.fitHeight 圖片可能拉伸，可能裁剪，高度充滿

BoxFit.fitWidth 圖片可能拉伸，可能裁剪，寬度充滿

BoxFit.scaleDown 效果和contain差不多， 但是只能縮小圖片，不能放大圖片

下一節(jié)學(xué)習(xí)基礎(chǔ)組件之Text

Flutter基礎(chǔ)Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中給我們預(yù)先定義好了一些按鈕控件給我們用，常用的按鈕如下

我們先來看看MaterialButton中的屬性，可以看到能設(shè)置的屬性還是很多的。

下面我們來看看常用屬性

而在Android中如果我們要修改按鈕樣式的話，需要通過selector和Shape等方式進行修改，相比較Flutter來說是要麻煩不少的

RaisedButton的構(gòu)造方法如下，由于繼承自MaterialButton，所以MaterialButton中的大多數(shù)屬性這邊都能用，且效果一致，這里就不在贅述了

下面我們來看一下屬性

接收一個方法，點擊按鈕時回調(diào)該方法。如果傳null，則表示按鈕禁用

如下圖所示

按鈕文本控件，一般都是傳一個Text Widget

按鈕顏色

按鈕的文本顏色

點擊按鈕時水波紋顏色

高亮顏色，點擊（長按）按鈕后的顏色

陰影范圍，一般不會設(shè)置太大

內(nèi)邊距,使用

或者

shape用來設(shè)置按鈕的形狀，其接收值是ShapeBorder類型，ShapeBorder是一個抽象類，我們來看看有哪些實現(xiàn)類

可以看到，實現(xiàn)類還是很多的，我們主要來看看常用的即可。

borderRadius 接收一個BorderRadius類型的值，常用方法如下

我們可以把borderRadius分為上下左右四個方向，下面的方法都是對這四個方向進行設(shè)置，

帶斜角的長方形邊框

圓形邊框

圓角矩形

兩端是半圓的邊框

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

注意，OutlineButton是一個有默認(rèn)邊線且背景透明的按鈕，也就是說我們設(shè)置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來使用

效果如下：

IconButton是直接繼承自StatelessWidget的，默認(rèn)沒有背景

我們來看一下他的構(gòu)造方法

可以看到，icon是必填參數(shù)

icon接收一個Widget，但是一般我們都是傳入一個Icon Widget

其他屬性跟MaterialButton中的屬性用法基本一致

我們來用一下

效果如下：

我們也可以傳一個Text或其他Widget，這個大家自行嘗試吧

如果我們需要設(shè)置按鈕的最小寬度以及高度，button屬性中并沒有提供對應(yīng)的設(shè)置方法

使用如下：

Flutter中Button內(nèi)容大概就是這些

Flutter用邊框?qū)崿F(xiàn)三角形 2022-06-06 周一

Flutter和前端一樣，采用盒模型。

前端中有用CSS，只用邊框?qū)崿F(xiàn)三角形的案例，這個可以借鑒過來

2018-04-14 借助邊框特性實現(xiàn)邊框三角形

flutter 中用邊框?qū)崿F(xiàn)三角形

web前端入門到實戰(zhàn)：通過CSS邊框?qū)崿F(xiàn)三角形和箭頭

當(dāng)前文章：flutter邊框虛線,白色虛線框
標(biāo)題網(wǎng)址：http://chinadenli.net/article3/dsigpis.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、手機網(wǎng)站建設(shè)、微信小程序、全網(wǎng)營銷推廣、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)