Flutter之按钮组件

1、常用按钮

常用按钮	介绍
RaisedButton	凸起的按钮，其实就是 Material Design 风格的 Button
FlatButton	扁平化的按钮
OutlineButton	线框按钮
IconButton	图标按钮
FloatingActionButton	浮动按钮
ButtonBar	按钮组

2、按钮中常用的属性 

属性名称	值类型	属性值
onPressed	VoidCallback ，一般接收一个 方法	必填参数，按下按钮时触发的回调，接收一个 方法，传 null 表示按钮禁用，会显示禁用相关 样式
child	Widget	文本控件
textColor	Color	文本颜色
color	Color	按钮的颜色
disabledColor	Color	按钮禁用时的颜色
disabledTextColor	Color	按钮禁用时的文本颜色
splashColor	Color	点击按钮时水波纹的颜色
highlightColor	Color	点击(长按)按钮后按钮的颜色
elevation	double	阴影的范围，值越大阴影范围越大
padding		内边距
shape		设置按钮的形状 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ) shape: CircleBorder(       side: BorderSide( color: Colors.white, ) )

import 'package:flutter/material.dart';

class ButtonPage extends StatelessWidget {
  ButtonPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: (){
            },
          )
        ],
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              RaisedButton(
                textColor: Colors.white,
                color: Colors.blue,
                child: Text("RaisedButton"),
                onPressed: () {
                  print("RaisedButton");
                },
              ),
              SizedBox(width: 10,),
              FlatButton(
                textColor: Colors.white,
                color: Colors.blue,
                child: Text("FlatButton"),
                onPressed: () {
                  print("FlatButton");
                },
              ),
              SizedBox(width: 10,),
              OutlineButton(
                textColor: Colors.blue,
                color: Colors.blue,
                child: Text("OutlineButton"),
                onPressed: () {
                  print("OutlineButton");
                },
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Expanded(child: Container(
                margin: EdgeInsets.all(10),
                child: RaisedButton(
                  textColor: Colors.white,
                  color: Colors.blue,
                  child: Text("自适应RaisedButton"),
                  onPressed: () {
                    print("RaisedButton");
                  },
                ),
              )),
            ],
          ),
          FloatingActionButton(
            onPressed: (){
            },
            child: Text("浮动"),
          ),
          ButtonBar(
            alignment:MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                textColor: Colors.white,
                color: Colors.blue,
                child: Text("ButtonBar1"),
                onPressed: () {
                  print("ButtonBar1");
                },
              ),
              RaisedButton(
                textColor: Colors.white,
                color: Colors.blue,
                child: Text("ButtonBar2"),
                onPressed: () {
                  print("ButtonBar2");
                },
              ),
              MyButton(hight: 30,width: 100,onPressed: "自定义按钮",color: Colors.yellow,),
            ],
          )
        ],
      ),
    );
  }
}

//自定义按钮
class MyButton extends StatelessWidget {
  final double hight;
  final double width;
  final buttonName;
  final onPressed;
  final Color color;
  MyButton({Key key, this.hight=20, this.width=20, this.buttonName="按钮", this.onPressed, this.color=Colors.blue}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: hight,
      width: width,
      child: RaisedButton(
        color: color,
        child: Text(buttonName),
        onPressed: (){
          print((onPressed));
        }
        ,
      ),
    );
  }
}