【Flutter學習】之button按鈕

一，概述

因爲Flutter是跨平臺的，因此有適用於Android和iOS的兩種風格的組件。一套是Google極力推崇的Material，一套是iOS的Cupertino風格的組件。不管哪一種風格，都是通用的。

二，Material與Cupertino風格比較

控件	Material	Cupertino
Button	RaisedButton	CupertinoButton
DatePick	showDatePicker	CupertinoDatePicker

從多年與設計師打交道來看，App更青睞於iOS，不少Android的App作的跟iOS同樣同樣的，就連設計個按鈕圖標啥的都是同樣。

三，Material Style

• RaisedButton(Material風格的按鈕)

  • 屬性　　

    RaisedButton({ Key key, //點擊按鈕的回調出發事件
     @required VoidCallback onPressed, //水波紋高亮變化回調
        ValueChanged<bool> onHighlightChanged, //按鈕的樣式（文字顏色、按鈕的最小大小，內邊距以及shape）[ Used with [ButtonTheme] and [ButtonThemeData] to define a button's base //colors, and the defaults for the button's minimum size, internal padding,and shape.]
     ButtonTextTheme textTheme, //文字顏色
     Color textColor, //按鈕被禁用時的文字顏色
     Color disabledTextColor, //按鈕的顏色
     Color color, //按鈕被禁用時的顏色 
     Color disabledColor, //按鈕的水波紋亮起的顏色
     Color highlightColor, //水波紋的顏色
     Color splashColor, //按鈕主題高亮
     Brightness colorBrightness, //按鈕下面的陰影長度
        double elevation, //按鈕高亮時的下面的陰影長度
        double highlightElevation, double disabledElevation, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior = Clip.none, MaterialTapTargetSize materialTapTargetSize, Duration animationDuration, Widget child, }

  • 一張圖瞭解RaisedButton
    

圖示RaisedButton

• • 示例代碼
    

    RaisedButton( textTheme: ButtonTextTheme.accent, color: Colors.teal, highlightColor: Colors.deepPurpleAccent, splashColor: Colors.deepOrangeAccent, colorBrightness: Brightness.dark, elevation: 50.0, highlightElevation: 100.0, disabledElevation: 20.0, onPressed: () { //TODO
     }, child: Text( 'RaisedButton', style: TextStyle(color: Colors.white, fontSize: 40), ), )

• FloatingActionButton(懸浮按鈕) 

  • 屬性
    

    FloatingActionButton({ Key key, // 按鈕上的組件，能夠是Text、icon, etc.
        this.child, //長按提示
        this.tooltip, // child的顏色（盡在child沒有設置顏色時生效）
        this.foregroundColor, //背景色，也就是懸浮按鍵的顏色
        this.backgroundColor, this.heroTag = const _DefaultHeroTag(), //陰影長度
        this.elevation = 6.0, //高亮時陰影長度
        this.highlightElevation = 12.0, //按下事件回調
        @required this.onPressed, //是小圖標仍是大圖標
        this.mini = false, //按鈕的形狀(例如：矩形Border，圓形圖標CircleBorder)
        this.shape = const CircleBorder(), this.clipBehavior = Clip.none, this.materialTapTargetSize, this.isExtended = false, })

  • 示例代碼

    FloatingActionButton( child: Icon(Icons.access_alarm), tooltip: "ToolTip", foregroundColor: Colors.white, backgroundColor: Colors.deepPurple, shape: const Border(), onPressed: () { //click callback
     }, )

• • 效果
         

• FlatButton

一個扁平的Material按鈕，屬性跟RaisedButton相似。

• • 屬性
    

    FlatButton({ Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color highlightColor, Color splashColor, Brightness colorBrightness, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior = Clip.none, MaterialTapTargetSize materialTapTargetSize, @required Widget child, })

• • 示例代碼


    FlatButton( onPressed: () {}, child: Text( "FlatBtn", style: TextStyle(fontSize: 20, color: Colors.deepPurple), ));

  • 效果
    
    

• IconButton

圖標按鈕，按下時會產生水波紋效果。

• • 屬性
    這幾個屬性跟前面講的幾個差很少，這裏就再也不講了。 
  • 示例代碼
    

    IconButton({
     Key key, this.iconSize = 24.0, this.padding = const EdgeInsets.all(8.0), this.alignment = Alignment.center, @required this.icon, this.color, this.highlightColor, this.splashColor, this.disabledColor, @required this.onPressed, this.tooltip })

  • 效果
    

• DropdownButton

Material Style 下拉菜單按鈕

• • DropdownButton使用

    DropdownButton({ Key key, //要顯示的列表
    List<DropdownMenuItem<T>> @required this.items, //下拉菜單選中的值（注意：在初始化時，要麼爲null，這時顯示默認hint的值； // 若是本身設定值，則值必須爲列表中的一個值，若是不在列表中，會拋出異常）
    T value, //默認顯示的值
    Widget hint, Widget disabledHint, //選中時的回調
    ValueChanged<T> @required this.onChanged, this.elevation = 8, this.style, this.iconSize = 24.0, this.isDense = false, this.isExpanded = false, })

  • items使用方法

    • 寫法一
      

      //返回城市列表，
      List<DropdownMenuItem> _getItems() { List<DropdownMenuItem> items = new List(); //value 表示DropdownButton.onChanged的返回值
      items.add(DropdownMenuItem(child: Text("北京"), value: "BJ")); items.add(DropdownMenuItem(child: Text("上海"), value: "SH")); items.add(DropdownMenuItem(child: Text("廣州"), value: "GZ")); items.add(DropdownMenuItem(child: Text("深圳"), value: "SZ")); return items; }

    • 寫法二

      //返回城市列表，
      List<DropdownMenuItem<String>> _getCityList() { var list = ["北京", "上海", "廣州", "深圳"]; return list.map((item) => DropdownMenuItem( value: item, child: Text(item), )).toList(); }

  • 使用方法

    因爲咱們在點擊每個條目後，展現的選中條目會變化，因此DropdownButton應當繼承StatefulWidget，在選中條目後也就是onChange的回調中使用setState((){})更新對象的狀態。

• • • DropdownButton
      

      class FlutterDropdownButtonStatefulWidget extends StatefulWidget { @override State<StatefulWidget> createState() {  return _DropdownState(); } }

    • _DropdownState

      //下劃線開頭表示私有
      class _DropdownState extends State<FlutterDropdownButtonStatefulWidget> { // 下拉菜單選中的值（注意：在初始化時，要麼爲null，這時顯示默認hint的值； // 若是本身設定值，則值必須爲列表中的一個值，若是不在列表中，會拋出異常）
      String selectValue; @override Widget build(BuildContext context) {  return DropdownButton(  //要顯示的條目
       items: _getItems(),  //默認顯示的值
        hint: Text("請選擇城市"),  //下拉菜單選中的值（注意：在初始化時，要麼爲null，這時顯示默認hint的值；  // 若是本身設定值，則值必須爲列表中的一個值，若是不在列表中，會拋出異常）
       value: selectValue, onChanged: (itemValue) {//itemValue爲選中的值
         print("itemValue=$itemValue"); _onChanged(itemValue); }, ); } _onChanged(String value) {  //更新對象的狀態
       setState(() { selectValue = value; }); } }

    • print log

    • 最終效果

• PopupMenuButton

  當菜單隱藏時，點擊而且調用onSelected時顯示一個彈出式菜單列表
  • 屬性
    

    PopupMenuButton({ Key key, //構建彈出式列表數據
    PopupMenuItemBuilder<T> @required this.itemBuilder, //初始值
    T initialValue, //選中時的回調
    PopupMenuItemSelected<T> onSelected;, //當未選中任何條目後彈窗消失時的回調
    final PopupMenuCanceled onCanceled;, // this.tooltip, //彈窗陰影高度
    this.elevation = 8.0, //邊距
    this.padding = const EdgeInsets.all(8.0), //彈窗的位置顯示的組件，默認爲三個點...
    this.child, //跟child效果一致
    this.icon, //彈窗偏移位置
    this.offset = Offset.zero, })

  • 示例demo
    

    import 'package:flutter/material.dart'; class FlutterPopupMenuButton extends StatefulWidget { @override State<StatefulWidget> createState() => _PopupMenuState(); } const List<String> models = const <String>['白天模式', '護眼模式', '黑夜模式']; class _PopupMenuState extends State<FlutterPopupMenuButton> { String title = models[0]; List<PopupMenuEntry<String>> _getItemBuilder() {  return models.map((item) => PopupMenuItem<String>( child: Text(item), value: item,//value必定不能少
     )).toList(); } void _select(String value) { setState(() { title = value; }); } @override Widget build(BuildContext context) {  return MaterialApp( home: Scaffold( appBar: AppBar( title: Text(title), actions: <Widget>[ PopupMenuButton<String>( onSelected: _select, itemBuilder: (BuildContext context) {  return _getItemBuilder(); }, ) ], ), ), ); } // List<PopupMenuEntry> _getItemBuilder() { // List<PopupMenuEntry> list = List(); // list.add(PopupMenuItem( // child: Text("白天模式"), // value: "Day", // )
    　 ); // list.add(PopupMenuItem( // child: Text("黑夜模式"), // value: "Night", // )
     ); // return list; // }
    }

  • 示例效果
    

• ButtonBar

  水平排列的按鈕組

  • 屬性　　

    const ButtonBar({ Key key, //子組件的間隔樣式
    this.alignment = MainAxisAlignment.end, this.mainAxisSize = MainAxisSize.max, //子children
    this.children = const <Widget>[], })

  • 示例代碼

    class FlutterButtonBar extends StatelessWidget { @override Widget build(BuildContext context) {  return ButtonBar(children: <Widget>[ Text("ButtonBar0"), Icon(Icons.ac_unit), Text("ButtonBar1") ], 
     ); } }

  • 效果