Flutter控件--MaterialButton、RaisedButton、FlatButton、IconButton 和 PopupMenuButton

時間 2019-11-06

標籤 flutter 控件 materialbutton raisedbutton flatbutton iconbutton popupmenubutton 简体版

原文原文鏈接

flutter控件練習demo地址：githubandroid

button種類

所謂的 button 就是都有 onPressed 屬性，能夠點擊響應事件的，有點擊的效果，若是 onPressed 設置爲 null 的話，button 都是 disable 的，同時 button 有 disable 的樣式，按下時有高亮顯示ios

MaterialButton 有主題的button，官網不推薦使用此控件，推薦使用它的子類，下面的就是他們的子類，默認大小是 88 * 36 的大小
- RaisedButton 有陰影，圓角的button
- FlatButton 沒有陰影沒有圓角沒有邊框，背景透明
- OutlineButton 沒有陰影，有圓角邊框的
IconButton 只有一個Icon的button
- BackButton 一個 Icon 是返回鍵頭的IconButton，點擊會調用 Navigator.maybePop 返回上一個路由，默認長按提示是 back ，且不可去掉
- CloseButton 一個 Icon 是 x（關閉）的IconButton，點擊會調用 Navigator.maybePop 返回上一個路由，默認長按提示是 back ，且不可去掉
RawMaterialButton 不適用當前Theme或者ButtonTheme的控件，若是自定義，官方推薦使用這個
PopupMenuButton 菜單，至關於 android 中的 PopupMenu 和 ios 中的 UIMenuController
DropdownButton 下拉列表，至關於 android 中的 Spinner

一。 MaterialButton

默認的是一個最小寬度爲88，高度爲36,有圓角，有陰影，點擊的時候高亮，有 onpress 屬性的一個控件。能夠響應用戶點擊事件。可是：官方不推薦使用這個，推薦使用它的子類 RaisedButton、FlatButton 和 OutlineButton，若是自定義 button 推薦使用 RawMaterialButtongit

1.1 屬性

onPressed: 按下以後鬆開的回調，也就是所謂的點擊事件。實際上是當用戶手擡起來時的動做
onHighlightChanged: onPressed!=null 的時候能夠看出至關於用戶按下時（高亮）或者鬆開時（不高亮）的監聽。
textColor: 裏面文本的顏色
disabledTextColor: 當狀態爲 disable的時候文本的顏色，onpress=null 爲disable
注意點 在這裏無效在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
color: // 當是 enable （onpress != null）背景色
disabledColor: //onpress = null 的時候的顏色（不知道爲何測試無論用）
注意點 在這裏無效在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
highlightColor: 當用戶按下高亮時的顏色
elevation: Z軸陰影默認是2 ，當 enable 的時候的陰影
highlightElevation: 高亮時的陰影默認是 8 button 被按下的時候
disabledElevation: 當 disabled （onpress = null）的陰影默認是0 ，測試的時候陰影仍是爲0.0,也就是說無論用
注意點 在這裏無效在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
minWidth: 最小的寬度默認是 88 。在 ButtonTheme 規定的
height: 高度，默認是 36 也是在 ButtonTheme 規定的
child: 包括的子控件
shape 邊框樣式
注意點 在這裏無效在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            MaterialButton(
              // onPressed不能設置null  至關於用戶按下時（高亮） 或者 鬆開時（不高亮）的監聽。 也就是 MaterialButton 樣式改變時
//              onHighlightChanged: (boo) {
//                Fluttertoast.showToast(
//                    msg: "onHighlightChanged改變了", textColor: Colors.white);
//              },
              child: Text("MaterialButton"),
              // 按下以後鬆開的回調，也就是所謂的點擊事件。實際上是當用戶手擡起來時的動做
              onPressed: () {
                Fluttertoast.showToast(
                    msg: "點擊MaterialButton", textColor: Colors.white);
              },
//              onPressed: null,
              // 裏面文本的顏色
//              textColor: Colors.red,
              // 當狀態爲 disable的時候 文本的顏色，onpress=null 爲disable
              // 在這裏we；
              //在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
//              disabledTextColor: Colors.black,
              // 設置邊框樣式 , 在MaterialButton這裏沒用 在它子類裏面有用
//              shape: Border.all(
//                width: 10,
//                color:Color(0xFFFF0000),
//                style: BorderStyle.solid,
//              ),
              // 當是 enable （onpress != null） 背景 ，有陰影，有圓角
              //在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
              shape:  Border.all(color: Color(0xFFFF0000),style: BorderStyle.solid,width: 2),
              color: Colors.grey,
              // onpress = null 的時候的顏色（不知道爲何無論用）
              // 我測試的結果是 當onPress = null 的時候 ，仍是 上面 color 屬性的顏色， 只不過是沒有陰影，沒有圓角而已
              // 在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
//              disabledColor: Colors.amberAccent,
              // 當用戶 按下高亮時 的顏色
//              highlightColor: Colors.red,
//              splashColor: Colors.deepPurple,
//              colorBrightness: Brightness.light,
              // 高度， 陰影 默認是2
              elevation: 2,
              // 高亮時的陰影 默認是 8  button 被按下的時候
//              highlightElevation: 14,
              // 當 disabled （onpress = null） 的陰影   默認是0
              // 測試的時候 陰影仍是 爲0.0
              //在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
//              disabledElevation: 20,
//              padding: EdgeInsets.all(20),
              // 最小的寬度 默認是 88 。 在 ButtonTheme 規定的
//              minWidth: 187,
              //  高度， 默認是 36 也是在 ButtonTheme 規定的
//              height: 1,
            )
          ],
        ),
      ),
    );
  }
}

複製代碼

1.2 RaisedButton

RaisedButton： 屬性基本上和上面的父類同樣，The [elevation], [highlightElevation], [disabledElevation], 和 [clipBehavior] 必須非空.github

1.2.1 構造方法

RaisedButton()
RaisedButton.icon(onPressed,icon,label)// 其實主要是爲了讓用戶弄成左邊一個icon 右面一個文字固然了這兩個都是 Wight，因此均可以

1.2.2 屬性

在上面我們知道 disabledTextColor、disabledColor、disabledElevation 和 shape 在這裏設置纔有效。如今主要講一下 shape （邊框）bash

1.3 FlatButton

FlatButton： 扁平按鈕，通常沒有陰影，沒有邊框，且大部分用在 toolbar，dialogs ，或者其餘內容中 注意點: 必定要設置onPress屬性，不然他就是不可點擊的app

1.3.1 構造方法

FlatButton()
FlatButton.icon(onPressed,icon,label)// 其實主要是爲了讓用戶弄成左邊一個icon 右面一個文字固然了這兩個都是 Wight，因此均可以

1.4 OutlineButton

OutlineButton： 默認有細灰色圓角邊框，無陰影，且背景透明，當按下的時候，有默認highlightElevation 和 highColor 。less

1.3.1 構造方法

OutlineButton()
OutlineButton.icon(onPressed,icon,label)// 其實主要是爲了讓用戶弄成左邊一個icon 右面一個文字固然了這兩個都是 Wight，因此均可以

1.3.2 獨有的屬性

highlightedBorderColor // 按鈕高亮時的邊框顏色
disabledBorderColor: // 按鈕不可點擊時的邊框顏色

二。 IconButton

通常用在AppBar.actions 中，固然其餘地方也可使用， [icon] 屬性必須指定，通常都 Icon 或者 ImageIcon 。響應點擊的時候，是一個大圓ide

2.1 屬性

iconSize = 24.0icon的大小
padding = const EdgeInsets.all(8.0) 圍繞在 icon 周圍的 padding ，周圍的padding也能夠響應點擊事件，手勢事件
alignment = Alignment.centericon 在 IconButton 中的位置
icon必須的參數通常是 Icon 或者是 ImageIcono
coloricon的顏色。注意不是背景色，就是icon的顏色
highlightColor 高亮時的背景顏色
splashColor按下瞬間的顏色加入從手指按下以後先是 splashColor而後再是 highlightColor
disabledColor 當disable的時候 icon 顏色
onPressed 點擊事件
tooltip 長按的提示

三 PopupMenuButton

PopupMenuButton 至關於 android 中的 PopupMenu 和 ios 中的 UIMenuController ,測試

3.1 屬性

itemBuilder 每一個條目
initialValue // 初始的value ，就是打開的時候，在這個value 裏面會有不一樣的樣式，讓你知道當前值
onSelected選擇時的回調
onCanceled點擊返回鍵，或者是點擊外部， popupmenu關閉時的回調
tooltip 默認有長按tip 是
elevation = 8.0 彈出來的時候的陰影高度
padding = const EdgeInsets.all(8.0)
child icon 和 child 不能同時設置，不然報錯
icon icon 和 child 不能同時設置，不然報錯
offset = Offset.zero 根據當前控件，向右向下平移。默認是跟當前控件的左上角對齊

3.2 注意點

icon 和 child 不能同時設置，不然報錯，若是都沒有設置，flutter會根據不一樣的平臺給一個icon ，android 中是三個點，child 不要設置有（onpress屬性）點擊事件的控件,好比 FlatButton 等等，由於影響 PopupMenuButton的點擊事件ui

三總體demo圖片

四總體代碼

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class ButtonDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return Scaffold(
     appBar: AppBar(
       title: Text("Button"),
       centerTitle: true,
     ),
     body: Padding(
       padding: EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           MaterialButton(
             // onPressed不能設置null  至關於用戶按下時（高亮） 或者 鬆開時（不高亮）的監聽。 也就是 MaterialButton 樣式改變時
//              onHighlightChanged: (boo) {
//                Fluttertoast.showToast(
//                    msg: "onHighlightChanged改變了", textColor: Colors.white);
//              },
             child: Text("MaterialButton"),
             // 按下以後鬆開的回調，也就是所謂的點擊事件。實際上是當用戶手擡起來時的動做
             onPressed: () {
               Fluttertoast.showToast(
                   msg: "點擊MaterialButton", textColor: Colors.white);
             },
//              onPressed: null,
             // 裏面文本的顏色
//              textColor: Colors.red,
             // 當狀態爲 disable的時候 文本的顏色，onpress=null 爲disable
             // 在這裏we；
             //在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
//              disabledTextColor: Colors.black,
             // 設置邊框樣式 , 在MaterialButton這裏沒用 在它子類裏面有用
//              shape: Border.all(
//                width: 10,
//                color:Color(0xFFFF0000),
//                style: BorderStyle.solid,
//              ),
             // 當是 enable （onpress != null） 背景 ，有陰影，有圓角
             //在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
             shape: Border.all(
                 color: Color(0xFFFF0000), style: BorderStyle.solid, width: 2),
             color: Colors.grey,
             // onpress = null 的時候的顏色（不知道爲何無論用）
             // 我測試的結果是 當onPress = null 的時候 ，仍是 上面 color 屬性的顏色， 只不過是沒有陰影，沒有圓角而已
             // 在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
//              disabledColor: Colors.amberAccent,
             // 當用戶 按下高亮時 的顏色
//              highlightColor: Colors.red,
//              splashColor: Colors.deepPurple,
//              colorBrightness: Brightness.light,
             // 高度， 陰影 默認是2
             elevation: 2,
             // 高亮時的陰影 默認是 8  button 被按下的時候
//              highlightElevation: 14,
             // 當 disabled （onpress = null） 的陰影   默認是0
             // 測試的時候 陰影仍是 爲0.0
             //在這裏無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
//              disabledElevation: 20,
//              padding: EdgeInsets.all(20),
             // 最小的寬度 默認是 88 。 在 ButtonTheme 規定的
//              minWidth: 187,
             //  高度， 默認是 36 也是在 ButtonTheme 規定的
//              height: 1,
           )
         ],
       ),
     ),
   );
 }
}

class RaiseButtonDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return Scaffold(
     appBar: AppBar(
       title: Text("Button"),
       centerTitle: true,
     ),
     body: Padding(
       padding: EdgeInsets.all(20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           MaterialButton(
             child: Text("MaterialButton"),
             // 按下以後鬆開的回調，也就是所謂的點擊事件。實際上是當用戶手擡起來時的動做
             onPressed: () {
               Fluttertoast.showToast(
                   msg: "點擊MaterialButton", textColor: Colors.white);
             },
//              shape: Border.all(
//                // 設置邊框樣式
//                width: 10,
//                color:Color(0xFFFF0000),
//                style: BorderStyle.solid,
//              ),
             shape: Border.all(
                 color: Color(0xFFFF0000),
                 style: BorderStyle.solid,
                 width: 10),
             color: Colors.grey,
             elevation: 2,
           ),
           RaisedButton(
             disabledColor: Colors.blue,
             onPressed: () {
               Fluttertoast.showToast(
                   msg: "點擊RaisedButton", textColor: Colors.white);
             },
             child: Text("RaisedButton 方式1"),
           ),
           Row(
             children: <Widget>[
               RaisedButton(
                 onPressed: () {},
                 child: Text("1"),
                 shape: Border.all(
                     color: Colors.red, width: 2, style: BorderStyle.solid),
               ),
               RaisedButton(
                 onPressed: () {},
                 child: Text("1"),
                 shape: RoundedRectangleBorder(
                     side: BorderSide(
                         color: Colors.red,
                         width: 2,
                         style: BorderStyle.solid),
                     borderRadius: BorderRadius.all(Radius.circular(5))),
               ),
               RaisedButton(
                 onPressed: () {},
                 child: Text("1"),
                 shape: StadiumBorder(
                   side: BorderSide(
                       color: Colors.red, width: 2, style: BorderStyle.solid),
                 ),
               ),
               RaisedButton(
                   onPressed: () {},
                   child: Text("1"),
                   shape: UnderlineInputBorder(
                       borderSide: BorderSide(
                           color: Colors.red,
                           style: BorderStyle.solid,
                           width: 2))),
             ],
           ),
           RaisedButton.icon(
               onPressed: () {
                 Fluttertoast.showToast(
                     msg: "點擊RaisedButton", textColor: Colors.white);
               },
               icon: Icon(Icons.add),
               label: Text("RaisedButton.icon的方式"),
               // 一個矩形邊框
//              shape: Border.all(
//                width: 2,
//                color: Colors.red,
//                style: BorderStyle.solid,
//              ),
               // 能夠設置四個角的弧度的邊框
//              shape: RoundedRectangleBorder(
//                side: BorderSide(
//                  width: 2,
//                  color: Colors.red,
//                  style: BorderStyle.solid,
//                ),
//                borderRadius: BorderRadius.all(Radius.circular(5)),
//              ),
               // 只有下面一個邊框
//              shape:  UnderlineInputBorder( borderSide:BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2)),
               // 圓形邊框（這裏會裁剪他）
//                shape: CircleBorder(side: BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2))
               // 把高或者寬弄成半圓
//            shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))),
               // 剪切四個角
               shape: BeveledRectangleBorder(
                   borderRadius: BorderRadius.all(Radius.circular(10)),
                   side: BorderSide(
                       color: Colors.red,
                       style: BorderStyle.solid,
                       width: 2))),
           FlatButton(
               child: Text("flatbutton"),
               color: Colors.blue,
               onPressed: () {}),
           OutlineButton(
             disabledBorderColor: Colors.grey,
             highlightedBorderColor: Colors.red,
             child: Text("outlinebuton"),
             onPressed: () {},
           ),
           Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: <Widget>[
               IconButton(
                   // 必須的參數 通常是 Icon 或者是 ImageIcono
//                icon: Icon(Icons.add),
                   icon: Icon(Icons.add),
                   // 點擊事件
                   onPressed: () {},
                   // 按鈕不可點擊時的顏色
                   disabledColor: Colors.red,
                   //icon 的大小
                   iconSize: 40,
                   //   圍繞在 icon 周圍的  padding ， 周圍的padding也能夠響應點擊事件，手勢事件
                   padding: EdgeInsets.all(0),
                   // icon 在 IconButton 中的位置
                   alignment: Alignment.center,
                   // icon 的顏色  若是裏面是 Text ，text的顏色不會改變 注意 不是背景色， 就是icon的顏色
                   color: Colors.red,
                   // 高亮時的背景顏色
                   highlightColor: Colors.blue,
                   // 按下瞬間的顏色 加入從手指按下以後 先是 splashColor而後再是 highlightColor
                   splashColor: Colors.black,
                   // 默認沒有長按提示
                   tooltip: "長按的提示"),
               // 就是一個iconbutton 設置了一返回箭頭的icon
               BackButton(),
               // 就是一個iconbutton 設置了一 x 關閉的icon
               CloseButton(),
             ],
           ),
           PopupMenuButton(
               // 初始的value ， 就是打開的時候， 在這個value 裏面會有不一樣的樣式，讓你知道當前值
//                initialValue: "item1",
               // 點擊返回鍵，或者是點擊外部， popupmenu關閉時的回調
               onCanceled: () {
                 Fluttertoast.showToast(msg: "取消選擇了", textColor: Colors.white);
               },
               // 選擇時的回調
               onSelected: (String value) {
                 Fluttertoast.showToast(
                     msg: "選擇的值是：$value", textColor: Colors.white);
               },
               // 若是 icon 和 child 屬性都沒有設置值，flutter會根據不一樣的平臺 給一個icon ，android 中是三個點
               // icon 和 child 不能同時設置， 不然報錯
               icon: Icon(Icons.menu),
//                child: Text("打開"), 不要設置有點擊事件的 控件,好比 FlatButton 等等，由於影響 PopupMenuButton的點擊事件
               // 當前 控件 向左 向下平移
               offset: Offset(-20, 50.0),
               itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                     PopupMenuItem(
                         value: "item1",
                         child: Row(children: <Widget>[
                           Icon(Icons.delete),
                           Text("刪除")
                         ])),
                     PopupMenuItem(
                       value: "item2",
                       child: Row(
                           children: <Widget>[Icon(Icons.add), Text("加好友")]),
                       //是否能夠選擇
                       enabled: true,
                     ),
                   ]),
         ],
       ),
     ),
   );
 }
}

複製代碼