Material Design“凸起按钮”。凸起按钮是基于按下按钮Material.elevation增加的Material 组件。
使用凸起按钮将维度添加到其他大多数平面布局中，例如，在长内容列表中，或在宽空间中。避免在已经凸起的内容上使用凸起按钮，如对话框或卡片上。
如果onPressed返回null，则该按钮将被禁用，其类似于disabledColor中的平面按钮。如果在修改按钮颜色并且没有效果时，请检查onPressed是否返回null。
如果你想要点击产生ink-splash效果，但不想使用按钮，可以考虑使用InkWell。
凸起按钮最小尺寸88.0*36.0，可以使用ButtonTheme来重写。
1.官方示例演示禁用凸起按钮、启用凸起按钮以及渐变背景的凸起按钮。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("RaisedButton组件"),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(onPressed: null,child: Text("Disabled Button"),),
RaisedButton(onPressed: (){},child: Text("Enabled Button"),),
RaisedButton(
onPressed: (){},
textColor: Colors.white,
padding: EdgeInsets.all(0.0),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: <Color>[Colors.red, Colors.green, Colors.blue]
)
),
padding: EdgeInsets.all(10.0),
child: Text("Gradient Button"),
),
)
],
),
),
),
);
}
}
RaisedButton
2. 也可以使用下面的按钮组件
- FlatButton：一个没有阴影的Material Design按钮；
- DropdownButton：一个显示可供选择的按钮；
- FloatingActionButton：Material应用程序中的圆形按钮；
- IconButton：用于创建包含图标的按钮；
- InkWell：实现平面按钮的ink splash部分；
- RawMaterialButton：创建基于Semantics、Material和InkWell组件的按钮；
- Material官网的Button按钮
官方提供了两种创建凸起按钮的构造函数，上面案例使用RaisedButton方式创建，另外一种是使用图标和标签来填充按钮。
import 'package:flutter/material.dart';
void main() => runApp(IconLabelRaisedButton());
class IconLabelRaisedButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("RaisedButton组件"),
),
body: RaisedButton.icon(
onPressed: (){},
icon: Icon(Icons.account_balance),
label: Text("点击返回首页")
),
),
);
}
}
RaisedButton.icon
本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。
