Futter基础第14篇： 中的按钮组件 RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar以及自定义按钮组件

效果图：

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮演示页面'),

        actions: <Widget>[
          IconButton(           //图标按钮
            icon: Icon(Icons.settings),
            onPressed: (){

            },
          )
        ],
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,    //垂直居中
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,  //水平居中
            children: <Widget>[
              RaisedButton(
                child: Text('普通按钮'),
                onPressed: (){
                  print('普通按钮');
                },
              ),
              SizedBox(width: 10,),
              RaisedButton(
                child: Text('颜色按钮'),
                color: Colors.blue, //背景颜色
                textColor: Colors.white,  //字体白色
                onPressed: (){
                  print('颜色按钮');
                },
              ),
              SizedBox(width: 10,),
              RaisedButton(
                child: Text('阴影按钮'),
                color: Colors.blue, //背景颜色
                textColor: Colors.white,  //字体白色
                elevation: 10,  //设置阴影效果，值越大阴影效果越好
                onPressed: (){
                  print('阴影按钮');
                },
              ),
            ],
          ),
          RaisedButton.icon(
//              onPressed: null,
              icon: Icon(Icons.search),
              label: Text('图标按钮'),
            color: Colors.blue,
              textColor: Colors.white,
            onPressed: (){
                print('图标按钮');
            },
          ),
          SizedBox(height: 5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(      //利用容器来设置按钮的宽度和高度
                height: 50,
                width: 300,
                child: RaisedButton(
                  child: Text('宽度高度'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: (){
                    print('宽度高度');
                  },
                ),
              )
            ],
          ),
          SizedBox(height: 5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             Expanded(            //铺满屏幕宽度
               child: Container(    //利用容器设置高度
                 height: 80,
                 margin: EdgeInsets.all(10),    //设置：左右间距10
                 child:  RaisedButton(
                   child: Text('自适应按钮'),
                   color: Colors.blue,
                   textColor: Colors.white,
                   elevation: 20,
                   onPressed: (){
                     print('自适应按钮');
                   },
                 ),
               )
             )
            ],
          ),
          SizedBox(height: 10,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('圆角按钮'),
                color: Colors.blue,
                textColor: Colors.white,
                elevation: 20,
                shape: RoundedRectangleBorder(      //圆角按钮
                  borderRadius: BorderRadius.circular(10)     //圆角弧度
                ),
                onPressed: (){
                  print('圆角按钮');
                }),
              SizedBox(width: 10,),
             Container(
               height: 80,  //设置：高度、也可以理解为直径
               child:  RaisedButton(
                   child: Text('圆形按钮'),
                   color: Colors.blue,
                   textColor: Colors.white,
                   elevation: 20,
                   splashColor: Colors.red,  //设置长按按钮时，水波纹颜色
                   shape: CircleBorder(      //圆角按钮
                       side: BorderSide(
                           color: Colors.white
                       )
                   ),
                   onPressed: (){
                     print('圆形按钮');
                   }),
             ),
              FlatButton(               //扁平按钮，默认是没有阴影，而且默认也没有背景颜色
                child: Text('扁平按钮'),
                color: Colors.blue,
                textColor: Colors.yellow,
                onPressed: (){
                  print('扁平化按钮');
                },
              )
            ],
          ),
          SizedBox(height: 10,),
          OutlineButton(        //带边框按钮
            child: Text('边框按钮'),
//            color: Colors.red,  没有效果，这就是边框按钮的特性，不仅自带边框，还无法设置它的背景颜色，我猜可能是作者怕设置的背景颜色跟边框颜色一致
//          textColor: Colors.yellow,   //有效果
            onPressed: (){
              print('边框按钮');
            },
          ),
          SizedBox(height: 5,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(                   //自适应水平平铺
                child: Container(
                  margin: EdgeInsets.all(20),   //上下左右分别间距 20
                  height: 50,
                  child: OutlineButton(
                    child: Text('注册'),
                    onPressed: (){

                    },
                  ),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    child: Text('登录'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print('登录');
                    },
                  ),
                  RaisedButton(
                    child: Text('注册'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print('注册');
                    },
                  ),
                  MyButton(text:'自定义按钮',height: 60.0,width: 100,pressed: (){
                    print('自定义按钮');
                  })
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

//自定义按钮组件

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double width;
  final double height;
  const MyButton({this.text="",this.pressed=null,this.width=80.0,this.height=30.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed: this.pressed,
      ),
    );
  }
}