看图
按钮展示
上代码
import 'package:flutter/material.dart';
class DiyButtonPage extends StatefulWidget {
@override
_DiyButtonPageState createState() => _DiyButtonPageState();
}
class _DiyButtonPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('按钮演示页面'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text('普通按钮'),
onPressed: () {
print('普通按钮');
},
),
SizedBox(
width: 5,
),
RaisedButton(
color: Colors.green, //修改背景颜色
textColor: Colors.white, //修改了字体颜色
child: Text('有颜色的按钮'),
onPressed: () {
print('有颜色的按钮');
},
),
SizedBox(
width: 5,
),
RaisedButton(
color: Colors.green,
//修改背景颜色
textColor: Colors.white,
//修改了字体颜色
elevation: 10,
child: Text('有阴影的按钮'),
onPressed: () {
print('有阴影的按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
//因为有他,所以可以设置宽高
width: 200,
height: 50,
child: RaisedButton(
child: Text('带阴影的可设置宽高的按钮'),
elevation: 10,
onPressed: () {
print('带阴影的可设置宽高的按钮');
},
),
),
SizedBox(
width: 20,
),
RaisedButton.icon(
icon: Icon(Icons.home),
label: Text('带图标的按钮'),
onPressed: () {
print('带图标的按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
//因为有他,所以可以设置宽高
width: 200,
height: 50,
child: RaisedButton(
child: Text('自适应宽度的按钮'),
elevation: 10,
onPressed: () {
print('自适应宽度的按钮');
},
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text('圆角按钮'),
elevation: 10,
onPressed: () {
print('圆角按钮');
},
),
Container(
height: 90,
child: RaisedButton(
color: Colors.blue,
splashColor: Colors.green,
//修改水波纹颜色
shape: CircleBorder(side: BorderSide(color: Colors.white)),
child: Text('圆形按钮'),
elevation: 10,
onPressed: () {
print('圆形按钮');
},
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
color: Colors.blue,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(10)),
child: Text('扁平化的按钮'),
onPressed: () {
print('扁平化的按钮');
},
),
SizedBox(
width: 10,
),
OutlineButton(
color: Colors.blue, //没有效果的
textColor: Colors.red, //设置字体颜色
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(10)),
child: Text('带边框的按钮'),
onPressed: () {
print('带边框的按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(10),
child: OutlineButton(
color: Colors.blue, //没有效果的
textColor: Colors.red, //设置字体颜色
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(10)),
child: Text('带边框自适应宽度的按钮'),
onPressed: () {
print('带边框自适应宽度的按钮');
},
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonBar( //按钮组
children: [
RaisedButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text('按钮组-登录'),
elevation: 4,
onPressed: () {
print('按钮组-登录');
},
),
RaisedButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text('按钮组-注册'),
elevation: 4,
onPressed: () {
print('按钮组-注册');
},
),
],
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonBar( //按钮组
children: [
MyButton(text: "自定义按钮",width: 100,height: 80,pressed: testPress,)
],
)
],
)
],
),
);
}
}
class MyButton extends StatelessWidget {
final String text;
final VoidCallback pressed;
final double width;
final double height;
const MyButton({this.text='',this.pressed=null,this.width=80,this.height=30});
@override
Widget build(BuildContext context) {
return Container(
width: this.width,
height: this.height,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}
void testPress(){
print("点击了自定义按钮");
}