Flutter學習總結（十三、Flutter基本組件第三部分)

Flutter基本組件第三部分

一起從0開始學習Flutter!

上一篇我們一起學習了TabBar，TabBarView，Image，接下來一起來學習Button，TextField和Card。

1.Button

在Flutter中的Button從大的風格上來劃分，可以劃分爲MaterialButton(Google推薦的風格)和CupertinoButton(IOS推薦風格)，這篇主要是介紹MaterialButton，CupertinoButton是比較簡單的，可以直接參照它的構造進行了解。
MaterialButton是RaisedButton，FlatButton的父類，還有很多種類的Button，例如：DropdownButton，FloatingActionButton，IconButton，OutlineButton，我們一個個來介紹它們。
首先我們可以先了解下MaterialButton：

MaterialButton

我們先看下它的構造方法，發現它有着很多的參數：

const MaterialButton({
    Key key,
    @required this.onPressed,//按鈕的點擊事件被觸發調用此方法
    this.onLongPress,//按鈕長按事件被觸發調用此方法
    this.onHighlightChanged,//高亮狀態的變化通知，會返回是否高亮的bool值，一般在按下會返回True，鬆開會返回False
    this.textTheme,//參照下面詳解
    this.textColor,//設置的文字的顏色
    this.disabledTextColor,//當文字不可用時文字的顏色
    this.color,//設置的按鈕的顏色
    this.disabledColor,//按鈕不可用的時候的顏色
    this.focusColor,//按鈕獲取焦點時的顏色
    this.hoverColor,//是在H5的時候鼠標懸停的顏色
    this.highlightColor,//按下高亮時的顏色
    this.splashColor,//水波紋效果的顏色
    this.colorBrightness,//關於主題的亮度，Brightness.dark深色，Brightness.light淺色的
    this.elevation,//陰影的長度
    this.focusElevation,//獲取焦點時陰影的長度
    this.hoverElevation,//H5的鼠標懸浮焦點時陰影的長度
    this.highlightElevation,//高亮時的陰影高度
    this.disabledElevation,//禁用時的陰影高度
    this.padding,//內部填充空白大小
    this.shape,//設定的形狀,例如我們要創建一個圓形的按鈕：shape: CircleBorder()
    this.clipBehavior = Clip.none,//參照下面詳解，
    this.focusNode,//焦點的關聯組件
    this.autofocus = false,//是否自動獲取焦點
    this.materialTapTargetSize,//配置最小尺寸，參照前面的FloatingActionButton的配置
    this.animationDuration,//如果形狀和陰影發生變化的時候的持續時間
    this.minWidth,//按鈕的最小寬度
    this.height,//按鈕的高度
    this.enableFeedback = true,//是否提供輔助功能
    this.child,//可以在按鈕中的子控件，我們可以添加文字或者圖片作爲按鈕的樣式
  }) 

textTheme
根據主題裏的顏色設置文字顏色，默認值是ButtonTextTheme.normal。
ButtonTextTheme.normal 是黑色或者白色，根據ThemeData.brightness的設置不同有變化。
ButtonTextTheme.accent 文字的顏色同ThemeData.accentColor的設置一樣。
ButtonTextTheme.primary 文字的顏色同ThemeData.primaryColor的設置一樣。
可以看到上面的按鈕設置中雖然屬性衆多但是都是一些比較好理解的一些簡單屬性，所以不再多加贅述了。只需要根據需要進行設定就可以了。
clipBehavior
Clip.none 不進行設置
Clip.hardEdge 裁剪速度快，但容易失真，會有鋸齒。
Clip.antiAliasWithSaveLayer 裁剪後具有抗鋸齒特性並分配屏幕緩衝區，所有後續操作在緩衝區進行，然後再進行裁剪和合成，很少使用。
Clip.antiAlias 裁剪邊緣抗鋸齒，裁剪更平滑，裁剪速度比 Clip.antiAliasWithSaveLayer 快，但是比 Clip.hardEdge 慢，常用於圓形和弧形之類的形狀裁剪。

RaisedButton

因爲它是MaterialButton的子類，只是樣式略有區別，有了默認的樣式，所以不再多加贅述它的區別。

FlatButton

扁平化的按鈕，也是基於MaterialButton的子類，用法與MaterialButton一致。

DropdownButton

DropdownButton({
    Key key,
    @required this.items,//參照下面的詳解
    this.selectedItemBuilder,//參照下面的詳解
    this.value,//在items定義的value值中的一條，如果沒有符合的則會報錯
    this.hint,//提示文字
    this.disabledHint,//按鈕被禁用時的提示文字
    @required this.onChanged,//參照下面的詳解
    this.elevation = 8,//下方陰影的高度
    this.style,//設置顯示的文字樣式
    this.underline,//可以自己設置DropDownButton中的下劃線樣式
    this.icon,//右邊的下拉箭頭可以通過icon參數進行替換
    this.iconDisabledColor,//當button被禁用了的時候icon的顏色
    this.iconEnabledColor,//當button可以使用的時候icon的顏色
    this.iconSize = 24.0,//icon的大小
    this.isDense = false,//是否減少高度，如果是True則button裏的文字和下劃線之間沒有間隙，False則有間隙
    this.isExpanded = false,//是否要從當前位置開始橫向填充滿控件，True則會一直填充到父容器右邊
    this.itemHeight = kMinInteractiveDimension,//每一條目的高度，默認值爲48
    this.focusColor,//獲取焦點後的顏色
    this.focusNode,//焦點綁定
    this.autofocus = false,//自動獲取焦點
  }) 

items
需要傳入DropdownMenuItem的集合，我們先看下DropdownMenuItem能爲我們做什麼。

const DropdownMenuItem({
    Key key,
    this.value,//我們給這個條目定義的Value值
    @required Widget child,//每個條目裏添加的控件
  })

如果我們要做一個簡單的控件，則可以使用下面的方式來創建一個DropdownMenuItem的集合：

items: <String>['One', 'Two', 'Free', 'Four']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),

我們在以前的控件中也使用過map函數來幫忙我們快速的創建一組控件，這裏也是通過map函數來幫我們來快速創建了每一個DropdownMenuItem。
selectedItemBuilder
這裏返回的是選中後DropdownButton的顯示樣式，如果我們想要換一種樣式我們可以自定義每一個條目選中後的按鈕狀態。例如：

selectedItemBuilder: (BuildContext context) {
                  return items.map<Widget>((String item) {
                    return Text(item);
                  }).toList();
                }

onChanged
在下拉框出現後進行選擇完後的回調，會返回我們傳入的value的值，可以根據這裏返回的值來刷新DropdownButton顯示的item內容。例如：

 onChanged: (String newValue) {
                  setState(() {
                    dropdownValue = newValue;
                  });
                },

IconButton

帶有圖片的button，基本用法與其他的Button差不多，我們只看下它不同的地方。

const IconButton({
    Key key,
    this.iconSize = 24.0,//圖片按鈕的尺寸
    @required this.icon,//傳入進來的按鈕圖片
    @required this.onPressed,//點擊事件的觸發，如果沒有傳入該方法則認爲該按鈕不可用
    this.color,//只有在按鈕可用的時候纔會生效，也就是onPressed必須有值傳入
    ...
  })

OutlineButton

一個自帶邊框的按鈕，其他的屬性和普通的button差不多，我們只看它的差異部分。

const OutlineButton({
    Key key,
    this.borderSide,//參照下面的詳細解釋
    this.disabledBorderColor,//當按鈕不可用的時候的顏色
    this.highlightedBorderColor,//按鈕按下時的邊框顏色
    ...
  })

borderSide
用來設置邊框的顏色以及粗細，我們需要傳入BorderSide的對象

const BorderSide({
    this.color = const Color(0xFF000000),//邊框的顏色
    this.width = 1.0,//邊框的粗細程度
    this.style = BorderStyle.solid,//邊框的樣式
  })

2.TextField

用戶輸入框，屬性比較多，我們來先看看他們都代表什麼：

const TextField({
    Key key,
    this.controller,//參照下面的詳解
    this.focusNode,//關聯的光標下一個組件
    this.decoration = const InputDecoration(),//文本框的裝飾器，默認提供一個帶有下劃線的樣式，我們可以修改顏色，添加icon或者其他
    TextInputType keyboardType,//參照下面的詳解
    this.textInputAction,//參照下面的詳解
    this.textCapitalization = TextCapitalization.none,//設置大小寫鍵盤
    this.style,//設置文字的樣式
    this.strutStyle,//設置一個統一的文本樣式
    this.textAlign = TextAlign.start,//文字對齊方式
    this.textAlignVertical,//文字豎直方向的顯示方式，靠頂部，底部，居中
    this.textDirection,//文字的顯示方向
    this.readOnly = false,//是否可以進行編輯，True就是隻讀文字，不可更改
    ToolbarOptions toolbarOptions, //參照下面的詳解
    this.showCursor,//是否顯示編輯的光標
    this.autofocus = false,//自動獲取焦點
    this.obscureText = false,//是否隱藏顯示內容，密碼格式可以設置爲True
    this.autocorrect = true,//是否開啓自動糾正功能
    this.enableSuggestions = true,//是否開啓輸入推薦
    this.maxLines = 1,//最大輸入行數
    this.minLines,//最小輸入行數
    this.expands = false,//不理解意思
    this.maxLength,//允許輸入的最長字符長度
    this.maxLengthEnforced = true,//是否允許可以輸入的字符數超過最大長度
    this.onChanged,//文字變化的時候的回調
    this.onEditingComplete,//提交內容時候的回調，一般是點擊回車按鈕的時候回調
    this.onSubmitted,//在提交時候回調，不可與onEditingComplete同時使用,區別於onEditingComplete的是回調帶有參數。
    this.inputFormatters,//輸入的內容的格式驗證，可以傳入多組格式
    this.enabled,//是否啓用該輸入框
    this.cursorWidth = 2.0,//閃爍的光標的寬度
    this.cursorRadius,//光標的圓角弧度
    this.cursorColor,//輸入光標的顏色
    this.keyboardAppearance,//鍵盤的亮度
    this.scrollPadding = const EdgeInsets.all(20.0),//滾動時的內邊距,實際測試沒有發現有用
    this.dragStartBehavior = DragStartBehavior.start,//拖拽行爲的開始點,實際測試沒有發現有用
    this.enableInteractiveSelection = true,//長按的時候是否顯示覆制，剪切，粘貼這些功能
    this.onTap,//在點擊的時候的回調
    this.buildCounter,//如果我們設置了maxlength，則可以通過它來在右下角顯示字數
    this.scrollController,//設置內容滾動的監聽
    this.scrollPhysics,//
  }) 

controller
文本框內容變化需要回調，通過Controller來抓取監聽，Controller裏添加addListener來獲取內容的變化，例如：

controller.addListener((){
       print("text is ${controller.text}");//獲取文本輸入框內容
    });

keyboardType
選擇彈出的輸入框的類型。
text 普通的文本輸入類型
multiline 跟普通鍵盤一樣，只是允許輸入多行，也就是左下角的確認按鈕會變成回車按鈕。
number 數字鍵盤
phone 撥號鍵盤，帶有"*“和 “#”.
datetime 在安卓手機上顯示數字鍵盤加上”:“和”-"，ios上顯示默認鍵盤
emailAddress 已經加上"@" 和".“的普通鍵盤
url 已經加上”/" 和"."的普通鍵盤
visiblePassword 普通鍵盤

textInputAction
這裏控制最後回車按鈕的觸發事件，比如回車和發送按鈕。
none 默認狀態，回車符號
unspecified 安卓顯示 回車符號
done 完成按鈕
go 顯示GO按鈕
search 顯示搜索按鈕
send 顯示發送按鈕
next 顯示下一步按鈕
previous iOS顯示一個左轉箭頭，安卓顯示回車符號
continueAction android 不支持
join 顯示join按鈕
route 顯示Route按鈕
emergencyCall android 不支持
newline 回車按鈕
toolbarOptions
設置長按文字後出現的工具選擇框都有哪些功能，需要傳入ToolbarOptions實體。

const ToolbarOptions({
    this.copy = false,//是否顯示覆制按鈕
    this.cut = false,//是否顯示剪切按鈕，如果設置不可編輯則不顯示
    this.paste = false,//是否顯示粘貼按鈕，如果設置不可編輯則不顯示
    this.selectAll = false,//是否顯示選擇全部按鈕
  })

3.Card

卡片控件，可以設置顯示的陰影效果，只能傳入單一控件。我們先看下他需要的參數：

const Card({
    Key key,
    this.color, //卡片的顏色
    this.elevation, //設置陰影的大小
    this.shape, //參照下面的詳細說明
    this.borderOnForeground = true, //從文檔上來看是shape的邊是否要遮擋child，默認是遮擋的。實際沒有看出來效果
    this.margin, //設置外邊距
    this.clipBehavior, //參照Button 的clipBehavior屬性說明
    this.child, //需要填充到裏面的子控件
    this.semanticContainer = true,//判斷是否是語義容器，作爲系統的輔助功能的時候使用。
  }) 

shape
控制card的形狀，如果我們想要一個帶圓角的Card需要下面這樣設置：

shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))),

今天我們又學習了這幾個組件，主要是Button的部分比較多，按鈕的樣式比較複雜，還需要多加練習查看運行後的結果。

接下來我們還需要學習其他的新的組件