【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
    

• 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(
    
            onPressed: () {},
    
            child: Text(
    
              "FlatBtn",
    
              style: TextStyle(fontSize: , color: Colors.deepPurple),
    
            ));

  • 效果

    

• IconButton

图标按钮，按下时会产生水波纹效果。

• 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 = ,
    
    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[];
    
    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")
    
       ], 
      );
    
     }
    
    }

  • 效果