一，概述

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

效果

總結

以上是生活随笔為你收集整理的【Flutter学习】之button按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。