/*
Flutter中的常见的按钮组件 以及自定义按钮组件
一、Flutter中的按钮组件介绍
Flutter里有很多的Button组件，常见的按钮组件有：RaisedButton/FlatButton/IconButton/
OutlineButton/ButtonBar/FloatingActionButton等。
RaisedButton:凸起的按钮，其实就是Material Design风格的Button
FlatButton:扁平化的按钮
OutlineButton:线框按钮
IconButton:图标按钮
ButtonBar: 按钮组
FloatingActionButton:浮动按钮 二、Flutter按钮组件中的一些属性：
onPressed:必填参数，按下按钮时触发的回调，接受一个方法，传null表示按钮禁用，会显示禁用相关样式
child:文本控件
textColor:文本颜色
color:按钮的颜色
disabledColor:按钮禁用时的颜色
disabledTextColor:按钮禁用时的文本颜色
splashColor:点击按钮时水波纹的颜色
elevation:阴影的范围
padding:内边距
shape:设置按钮的形状
*/
Button.dart
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key);
@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(
children: <Widget>[
RaisedButton(
child: Text('普通'),
onPressed: () {
print('普通按钮');
},
),
SizedBox(width: ),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标'),
onPressed: null,
),
SizedBox(width: ),
RaisedButton(
child: Text('有颜色'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print('有颜色按钮');
},
),
SizedBox(width: ),
RaisedButton(
child: Text('有阴影'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('有阴影按钮');
}),
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: ,
width: ,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {},
),
)
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: ,
margin: EdgeInsets.all(),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
onPressed: () {
print('自适应按钮');
},
),
))
],
),
SizedBox(height: ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular()),
onPressed: () {
print('圆角按钮');
},
),
RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: ,
splashColor: Colors.grey,
shape: CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print('圆形按钮');
},
)
],
),
FlatButton(
//扁平化按钮：
child: Text('扁平化的按钮'),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {},
),
OutlineButton(
child: Text('线框按钮'),
onPressed: () {
print('OutlineButton');
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(),
height: ,
child: OutlineButton(
child: Text('注册'),
onPressed: () {},
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
//按钮组
children: <Widget>[
RaisedButton(
child: Text('登录'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
RaisedButton(
child: Text('注册'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
],
)
],
),
MyButton(
text: "自定义按钮",
height: 60.0,
width: 100.0,
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 = , this.height = });
@override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}