【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")
       ], 
      );
     }
    }

  • 效果