flutter筆記匯總

flutter提供了以下幾種按鈕
RaisedButton 、OutlineButton 、FlatButton 、IconButton 、FloatingActionButton 、MaterialButton
其中IconButton在flutter筆記（五）-----圖標(biāo)Icon里已經(jīng)說過了，這里就不重復(fù)了。
接下來挨個看一下。

1、MaterialButton

懸浮按鈕自帶灰色背景和灰色陰影，按下時陰影變大。
首先還是看一下constructor。

const MaterialButton({
  Key key,
  @required VoidCallback onPressed,              //點擊按鈕的回調(diào)函數(shù)
  ValueChanged<bool> onHighlightChanged,         //高亮變化的回調(diào)
  ButtonTextTheme textTheme,                     //按鈕的字體主題
  Color textColor,                               //字體顏色
  Color disabledTextColor,                      //禁用時的字體顏色
  Color color,                                  //按鈕背景色
  Color disabledColor,                          //禁用時的背景色
  Color focusColor,                              //聯(lián)動節(jié)點獲得焦點時的顏色
  Color hoverColor,                              //鼠標(biāo)懸停時的顏色
  Color highlightColor,                          //按下背景顏色（長按，不是點擊）
  Color splashColor,                            //水波紋顏色
  Brightness colorBrightness,                   //按鈕亮度
  double elevation,                              //陰影尺寸
  double focusElevation,                        //聯(lián)動節(jié)點獲得焦點時的陰影尺寸
  double hoverElevation,                        //鼠標(biāo)懸停時陰影尺寸
  double highlightElevation,                    //長按陰影尺寸
  double disabledElevation,                    //禁用時的陰影尺寸
  EdgeInsetsGeometry padding,                  //內(nèi)邊距
  ShapeBorder shape,                            //按鈕的形狀
  Clip clipBehavior: Clip.none,                //裁剪
  FocusNode focusNode,                         //聯(lián)動節(jié)點
  MaterialTapTargetSize materialTapTargetSize,  //有效的點擊區(qū)域大小
  Duration animationDuration,                  //動畫時間  
  double minWidth,                              //最小寬
  double hight,                                //高度
  Widget child                                  //子節(jié)點
})

下面看demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: new MaterialButton(
            child: new Text('Button'),
            textTheme: ButtonTextTheme.primary,
            textColor: Colors.red,
            highlightColor: Colors.yellow,
            color: Colors.green,
            splashColor: Colors.purple,
            elevation: 10.0,
            highlightElevation: 20.0,
            padding: EdgeInsets.all(20.0),
            onHighlightChanged: (data) {
              print(data);
            },
            onPressed: () {
              print(1);
            },
          )
        )
      )
    );
  }
}

一個花里胡哨的按鈕，下面挨個屬性看一下，看效果的話不要像上邊一樣同時寫太多，建議每次只寫一個。

onPressed

這個沒啥說的，按鈕的回調(diào)，手指抬起時觸發(fā)，點擊或者長按都會觸發(fā)。
********特別提醒，值為null的時候，按鈕為禁用狀態(tài)。

onHighlightChanged

和onPressed不同，這個按下按鈕和松開按鈕都會觸發(fā)，有一個參數(shù)，按下為true，松開為false。

textTheme

有三個值
normal：沒看出來有啥效果。
primary：沒看出來有啥效果+1。
accent：字體變成了主題同一顏色。

textColor

字體顏色，如果Text的style設(shè)置了color，則顯示為Text設(shè)置的值。

color

背景色

focusColor& focusElevation& focusNode

還沒試，看文檔的意思是需要一個聯(lián)動元素，比如輸入框，獲得焦點的時候按鈕改變狀態(tài)。

disabledTextColor& disabledTextColor& disabledElevation

禁用時按鈕的狀態(tài)，不挨個說了，和非禁用狀態(tài)寫法一樣。
按鈕是否禁用，沒有單獨的屬性，看onPressed，如果為null，或者不寫onPressed則為禁用。

hoverColor

推測是桌面端和web端用的，移動端不知道怎么觸發(fā)hover。

highlightColor

按鈕按下的背景色，不是點擊是長按。

splashColor

水波紋的顏色，這個是點擊

colorBrightness

亮度
有兩個值
Brightness.light：默認的狀態(tài)，文字黑色，splashColor&highlightColor都是灰色。
Brightness.dark：文字白色，splashColor&highlightColor變亮了？？？
你沒看錯，是不是寫反了，這是個bug？
這不是個bug，這里的colorBrightness是整個主題的亮度，當(dāng)app主題亮度為Brightness.light的時候，在這里也設(shè)成light，按鈕會變暗；相反如果主題亮度為Brightness.dark，這里也設(shè)成dark，按鈕會變亮。
這是個坑。。。從字面意思來看，誰能看出來這是主題亮度。

elevation& highlightElevation

double類型，陰影和按下按鈕狀態(tài)下的陰影尺寸。

padding

這個之前介紹過，就不重復(fù)了。

shape

基于ShapeBorder的類有四個，下面看一下這四個類。

//圓形
const CircleBorder({
  BorderSide side: BorderSide.none
})
//斜角（了解過機械的話可以理解成倒角）
const BeveledRectangleBorder({
  BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero
})
//圓角
const RoundedRectangleBorder({
  BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero
})
//也是圓角，但是和RoundedRectangleBorder不同，有最大值，超過最大值以最大值顯示。
const ContinuousRectangleBorder({
  BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero
})

可以看見，除了CircleBorder其他三個都是一樣的，為啥這個特殊，少了個屬性？
因為CircleBorder是設(shè)置按鈕為圓形，borderRadius是圓角，根本不需要。。。
下面看一下怎么用：
borderRadius之前的筆記介紹過flutter筆記（三）-----容器組件Container，這里就不重復(fù)了，看一下demo。

new RaisedButton(
  child: new Text('button'),
  color: Colors.grey[200],
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
   ),
   onPressed: () {
     print(1);
  },
)

這樣就給按鈕加了圓角。
下面看一下BorderSide

const BorderSide({
  Color color: const Color(0xFF000000),
  double width: 1.0,
  BorderStyle style: BorderStyle.solid
})

這個就比較簡單了，之前的也都介紹過這幾個屬性。

clipBehavior

裁剪，有四個值antiAlias、antiAliasWithSaveLayer 、hardEdge、none，都是對邊緣的處理，看文檔說antiAlias處理速度要比antiAliasWithSaveLayer快，但是要比hardEdge慢，還沒整明白怎么用，以后補充。

materialTapTargetSize

padded：有效點擊區(qū)域最小為48px * 48px。
shrinkWrap：可點擊組件的大小。

animationDuration

設(shè)置shape和elevation的動畫時間，看一下怎么用。

new MaterialButton(
  child: new Text('button'),
  color: Colors.grey[200],
  animationDuration: new Duration(seconds: 10),
  highlightElevation: 200.0,
  textTheme: ButtonTextTheme.accent,
  onPressed: () {
    print(1);
  },
)

這里為了效果明顯值寫的都比較大，按住按鈕不要松手可以看到陰影逐漸變大。
Duration不只可以寫seconds，days、hours、minutes、seconds、milliseconds、microseconds都可以。
想不出來在什么情況下一個動畫會以天為時間單位。。。

minWidth&height

最小寬度和高度。

child

子節(jié)點。

2、OutlineButton

默認有一個邊框，不帶陰影且背景透明。按下后，邊框顏色會變亮、同時出現(xiàn)背景和陰影(較弱)。
看一下constructor

const OutlineButton({
  Key key,
  @required VoidCallback onPressed,
  ButtonTextTheme textTheme,
  Color textColor,     
  Color disabledTextColor,    
  Color color,  
  Color focusColor,  
  Color hoverColor,   
  Color highlightColor,
  Color splashColor,  
  double highlightElevation, 
  BorderSide borderSide,
  Color disabledBorderColor,
  Color highlightedBorderColor,
  EdgeInsetsGeometry padding, 
  ShapeBorder shape, 
  Clip clipBehavior,
  FocusNode focusNode, 
  Widget child 
})

和RaisedButton相同的就不說了，這里說一下RaisedButton沒有的。
啥是RaisedButton沒有的，自己寫一下就知道了，多了個邊框。。。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: new Container(
          alignment: Alignment.center,
          child: new OutlineButton(
            child: new Text('Button'),
            borderSide: BorderSide(color: Colors.red, width: 4.0, style: BorderStyle.solid),
//            disabledBorderColor: Colors.blue,
            onPressed: () {
              print(1);
            }
          )
        )
      )
    );
  }
}

disabledBorderColor

禁用時邊框顏色，默認為灰色。

borderSide

邊框樣式，color和width沒啥說的，一個顏色一個寬度，style要說一下，這個只有solid和none，也就是說只有實線邊框和沒有邊框。

另外這個按鈕和MaterialButton相比少了幾個屬性，對比看吧這里就不列出來了。

3、RaisedButton

和MaterialButton默認樣式不同，默認帶有陰影和灰色背景。按下后，陰影會變大沒有height和minWidth。

4、FlatButton

扁平按鈕，默認背景透明并不帶陰影。按下后，會有背景色。
和MaterialButton相比少了以下屬性：elevation、focusElevation 、hoverElevation 、highlightElevation 、disabledElevation 、animationDuration 、minWidth 、height。

5、FloatingActionButton

頁面的懸浮按鈕。
看一下constructor

const FloatingActionButton({
  Key key,
  Widget child,
  String tooltip,
  Color foregroundColor,          //前景色，不會覆蓋文字，加了之后改變了文字的顏色
  Color backgroundColor,        //背景色
  Color focusColor,
  Color hoverColor,
  Object heroTag: const _DefaultHeroTag(),      //動畫效果
  double elevation,
  double focusElevation, 
  double hoverElevation, 
  double highlightElevation,  
  double disabledElevation,   
  @required VoidCallback onPressed,
  bool mini: false,                    //為true時按鈕尺寸會變小
  ShapeBorder shape,
  Clip clipBehavior: Clip.none,
  FocusNode focusNode, 
  MaterialTapTargetSize materialTapTargetSize,
  bool isExtended: false              //是否擴展
})

什么前景色背景色就不說了，說一下沒見過的。

heroTag

設(shè)置為null，則不啟用過渡動畫，如果懸浮按鈕在兩個頁面內(nèi)的位置不同，頁面切換時動作生硬。不設(shè)置的話為默認值，平滑過渡。

mini

為true時為按鈕會縮小，但是要注意的是，這個縮小只是尺寸縮小，不是整體縮放，內(nèi)容大小還是需要手動設(shè)置。

isExtended

是否擴展，默認為false。
不知道怎么用，但是發(fā)現(xiàn)個特性。

把FloatingActionButton寫在Container里，同時Container不寫alignment，并且Container設(shè)有width和height。
false：按鈕會盡量放大到寬高為width&height之中小的那個尺寸，并保持圓形。
true：按鈕寬高會變成Container的寬高，不會保持圓形，但是有圓角。
為啥要說寫在Container里，因為這貨就不是用在Container里的。。。
怎么用往下看

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
             print(1);
          },
          child: Icon(Icons.add)
        ),
      )
    );
  }
}

這才是常規(guī)用法，默認懸浮在右下角，不影響布局。
你說不想放右下角？可以，放哪都行，但是我不打算在這寫，因為這個位置不是在按鈕這設(shè)置的。

如有錯誤歡迎指出，很多不足歡迎補充。