22Flutter中的常见的按钮组件以及自定义按钮组件

/*
Flutter中的常见的按钮组件 以及自定义按钮组件
一、Flutter中的按钮组件介绍
Flutter里有很多的Button组件&＃xff0c;常见的按钮组件有&＃xff1a;RaisedButton/FlatButton/IconButton/
OutlineButton/ButtonBar/FloatingActionButton等。
RaisedButton:凸起的按钮&＃xff0c;其实就是Material Design风格的Button
FlatButton:扁平化的按钮
OutlineButton:线框按钮
IconButton:图标按钮
ButtonBar: 按钮组
FloatingActionButton:浮动按钮二、Flutter按钮组件中的一些属性&＃xff1a;
onPressed:必填参数&＃xff0c;按下按钮时触发的回调&＃xff0c;接受一个方法&＃xff0c;传null表示按钮禁用&＃xff0c;会显示禁用相关样式
child:文本控件
textColor:文本颜色
color:按钮的颜色
disabledColor:按钮禁用时的颜色
disabledTextColor:按钮禁用时的文本颜色
splashColor:点击按钮时水波纹的颜色
elevation:阴影的范围
padding:内边距
shape:设置按钮的形状
*/

import &＃39;package:flutter/material.dart&＃39;;class ButtonDemoPage extends StatelessWidget {const ButtonDemoPage({Key key}) : super(key: key);&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(&＃39;按钮演示页面&＃39;),actions: [IconButton(icon: Icon(Icons.settings),onPressed: () {},)],),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(children: [RaisedButton(child: Text(&＃39;普通&＃39;),onPressed: () {print(&＃39;普通按钮&＃39;);},),SizedBox(width: 5),RaisedButton.icon(icon: Icon(Icons.search),label: Text(&＃39;图标&＃39;),onPressed: null,),SizedBox(width: 10),RaisedButton(child: Text(&＃39;有颜色&＃39;),color: Colors.blue,textColor: Colors.white,onPressed: () {print(&＃39;有颜色按钮&＃39;);},),SizedBox(width: 10),RaisedButton(child: Text(&＃39;有阴影&＃39;),color: Colors.blue,textColor: Colors.white,elevation: 10,onPressed: () {print(&＃39;有阴影按钮&＃39;);}),],),SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Container(height: 50,width: 400,child: RaisedButton(child: Text(&＃39;宽度高度&＃39;),color: Colors.blue,textColor: Colors.white,elevation: 20,onPressed: () {},),)],),SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Expanded(child: Container(height: 60,margin: EdgeInsets.all(10),child: RaisedButton(child: Text(&＃39;自适应按钮&＃39;),color: Colors.blue,textColor: Colors.white,elevation: 20,onPressed: () {print(&＃39;自适应按钮&＃39;);},),))],),SizedBox(height: 10),Row(mainAxisAlignment: MainAxisAlignment.center,children: [RaisedButton(child: Text(&＃39;圆角按钮&＃39;),color: Colors.blue,textColor: Colors.white,elevation: 20,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),onPressed: () {print(&＃39;圆角按钮&＃39;);},),RaisedButton(child: Text(&＃39;圆形按钮&＃39;),color: Colors.blue,textColor: Colors.white,elevation: 20,splashColor: Colors.grey,shape: CircleBorder(side: BorderSide(color: Colors.white)),onPressed: () {print(&＃39;圆形按钮&＃39;);},)],),FlatButton(//扁平化按钮&＃xff1a;child: Text(&＃39;扁平化的按钮&＃39;),color: Colors.blue,textColor: Colors.yellow,onPressed: () {},),OutlineButton(child: Text(&＃39;线框按钮&＃39;),onPressed: () {print(&＃39;OutlineButton&＃39;);},),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Expanded(child: Container(margin: EdgeInsets.all(20),height: 50,child: OutlineButton(child: Text(&＃39;注册&＃39;),onPressed: () {},),),)],),Row(mainAxisAlignment: MainAxisAlignment.center,children: [ButtonBar(//按钮组children: [RaisedButton(child: Text(&＃39;登录&＃39;),color: Colors.blue,textColor: Colors.white,onPressed: () {},),RaisedButton(child: Text(&＃39;注册&＃39;),color: Colors.blue,textColor: Colors.white,onPressed: () {},),],)],),MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: () {print("自定义按钮");},)],));}
}//自定义按钮组件&＃xff1a;
class MyButton extends StatelessWidget {final text;final pressed;final double width;final double height;const MyButton({this.text &＃61; &＃39;&＃39;, this.pressed &＃61; null, this.width &＃61; 80, this.height &＃61; 30});&＃64;overrideWidget build(BuildContext context) {return Container(height: this.height,width: this.width,child: RaisedButton(child: Text(this.text),onPressed: this.pressed,),);}
}