1. Flutter 中的按钮组件
- RaisedButton :凸起的按钮,其实就是 Material Design 风格的 Button
- FlatButton :扁平化的按钮
- OutlineButton:线框按钮
- IconButton :图标按钮
- buttonbar:按钮组
- FloatingActionButton:浮动按钮
- 属性:
属性名称 | 值类型 | 属性值 |
---|---|---|
onpressed | VoidCallback ,一般接收一个方法 | 必填参数,按下按钮时触发的回调,接收一个方法,传 null 表示按钮禁用,会显示禁用相关样式 |
child | Widget | 文本控件 |
textColor | Color | 文本颜色 |
color | Color | 按钮颜色 |
disabledColor | Color | 按钮禁用颜色 |
disabledTextColor | Color | 按钮禁用时的文本颜色 |
splashColor | Color | 点击按钮时水波纹的颜色 |
highlightColor | Color | 点击(长按)按钮后按钮的颜色 |
elevation | double | 阴影的范围,值越大阴影范围越大 |
padding | 内边距 | |
shape | 设置按钮的形状 |
- 代码:
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("按钮演示页面"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('普通按钮'),
onpressed: () {
print('点击了');
},
),
SizedBox(width: 20),
RaisedButton(
child: Text('有颜色的按钮'),
textColor: Colors.white,
color: Colors.blue,
onpressed: () {
print('点击了');
},
),
SizedBox(width: 20),
RaisedButton(
child: Text('阴影按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onpressed: () {
print('点击了');
},
)
],
),
SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 60,
width: 200,
child: RaisedButton(
child: Text('有宽高的按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onpressed: () {
print('点击了');
},
)
)
],
),
SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('全屏按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onpressed: () {
print('点击了');
},
),
)
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('带圆角的按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onpressed: () {
print('点击了');
},
),
)
)
],
)
],
),
),
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。