RawMaterialButton介绍
简介
Flutter的RawMate
rialButton
是一个具有原始材料样式的可点击的按钮控件。它可以用于创建自定义的按钮和交互元素,具有许多可自定义的属性。自定义更灵活。
重要属性
以下是RawMaterialButton的一些常用属性:
onPressed:必需属性,指定按钮按下时的回调函数。
elevation:按钮的海拔高度,控制阴影的大小。默认值为2.0。
highlightElevation:按钮被按下时的海拔高度,控制阴影的大小。默认值为8.0。
fillColor:按钮的背景颜色。
splashColor:水波纹的颜色。
highlightColor:按钮被按下时的颜色。
disabledColor:按钮被禁用时的颜色。
padding:按钮的内边距。
shape:按钮的形状,如圆形、矩形等。
clipBehavior:裁剪行为,用于指定如何裁剪溢出的内容。
shape
RawMaterialButton的shape属性可以接受多种形状,包括以下几种:
BoxShape.circle:圆形按钮。
RoundedRectangleBorder:圆角矩形按钮。可以通过设置borderRadius属性来控制圆角的大小。
StadiumBorder:体育场形状的按钮。可以通过设置borderRadius属性来控制圆角的大小。
BeveledRectangleBorder:斜角矩形按钮。可以通过设置borderRadius属性来控制斜角的大小。
ContinuousRectangleBorder:普通矩形按钮。
可以根据实际需求选择合适的形状来创建自定义的按钮。例如,如果需要创建一个圆形按钮,可以这样写:
RawMaterialButton( onPressed: () { // 按钮被按下时执行的操作 }, shape: CircleBorder(), child: Text('Click me'), )
如果需要创建一个圆角矩形按钮,可以这样写:
RawMaterialButton( onPressed: () { // 按钮被按下时执行的操作 }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), child: Text('Click me'), )
需要注意的是,shape
属性必须是ShapeBorder
类型的对象,因此可以使用继承自ShapeBorder
的任何形状类来设置按钮的形状。
例子
下面是一个示例代码,展示了如何使用RawMaterialButton
创建一个简单的按钮:
RawMaterialButton( onPressed: () { // 按钮被按下时执行的操作 }, elevation: 2.0, fillColor: Colors.blue, splashColor: Colors.lightBlue, child: Text('Click me'), )
效果如下图:
在上面的代码中,我们创建了一个RawMaterialButton,它有一个简单的文本标签Click me,被设置为按钮的子元素。当按钮被按下时,指定的回调函数将会被执行。
我们还可以使用其他的属性来自定义按钮的外观和行为,例如使用shape属性来定义按钮的形状:
RawMaterialButton( onPressed: () { // 按钮被按下时执行的操作 }, elevation: 2.0, fillColor: Colors.red, splashColor: Colors.pink, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), child: Text('Click me'), )
效果如下图:
在上面的代码中,我们使用RoundedRectangleBorder
来设置按钮的形状为圆角矩形,并通过borderRadius
属性指定了圆角的大小。