首页 > 其他分享 >Flutter的RawMaterialButton按钮

Flutter的RawMaterialButton按钮

时间:2023-05-29 14:32:22浏览次数:145  
标签:RawMaterialButton 圆角 borderRadius shape 按钮 Flutter 属性

RawMaterialButton介绍

简介

Flutter的RawMaterialButton是一个具有原始材料样式的可点击的按钮控件。它可以用于创建自定义的按钮和交互元素,具有许多可自定义的属性。自定义更灵活。

重要属性

以下是RawMaterialButton的一些常用属性:

  • onPressed:必需属性,指定按钮按下时的回调函数。
  • elevation:按钮的海拔高度,控制阴影的大小。默认值为2.0。
  • highlightElevation:按钮被按下时的海拔高度,控制阴影的大小。默认值为8.0。
  • fillColor:按钮的背景颜色。
  • splashColor:水波纹的颜色。
  • highlightColor:按钮被按下时的颜色。
  • disabledColor:按钮被禁用时的颜色。
  • padding:按钮的内边距。
  • shape:按钮的形状,如圆形、矩形等。
  • clipBehavior:裁剪行为,用于指定如何裁剪溢出的内容。

shape

RawMaterialButtonshape属性可以接受多种形状,包括以下几种:

  1. BoxShape.circle:圆形按钮。
  2. RoundedRectangleBorder:圆角矩形按钮。可以通过设置borderRadius属性来控制圆角的大小。
  3. StadiumBorder:体育场形状的按钮。可以通过设置borderRadius属性来控制圆角的大小。
  4. BeveledRectangleBorder:斜角矩形按钮。可以通过设置borderRadius属性来控制斜角的大小。
  5. 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'),
)

效果如下图: image.png 在上面的代码中,我们创建了一个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属性指定了圆角的大小。 image.png

标签:RawMaterialButton,圆角,borderRadius,shape,按钮,Flutter,属性
From: https://blog.51cto.com/u_15777557/6370784

相关文章

  • 给Android开发者Flutter上手指南
    [给Android开发者Flutter上手指南_慕课手记](https://www.imooc.com/article/315337)目录LinearLayout在Flutter中等价于什么(Android)?RelativeLayout在Flutter中等价于什么(Android)?如何使用widget定义布局属性?如何分层布局?如何设置布局样式?ScrollView在Flutter......
  • Flutter控件之Stack控件
    简介Flutter中的Stack控件是一种可用于将多个子控件重叠在一起的布局控件。Stack将所有子控件放在同一个位置,它们可以根据需要进行定位、缩放或旋转。Stack中的子控件可以是任何类型的控件,例如文本、图像、按钮等。主要属性Stack控件的主要属性包括:alignment:用于指定子控件的......
  • Flutter控件之Stack控件
    简介Flutter中的Stack控件是一种可用于将多个子控件重叠在一起的布局控件。Stack将所有子控件放在同一个位置,它们可以根据需要进行定位、缩放或旋转。Stack中的子控件可以是任何类型的控件,例如文本、图像、按钮等。主要属性Stack控件的主要属性包括:alignment:用于指定子控件的......
  • 去除Flutter项目dart文件在vscode里出现波浪号
    问题示例: 去掉Flutter项目在vscode里打开显示的蓝色波浪线解决办法: ......
  • 九宫格菜单按钮组件,提供常见的宫格布局,如八宫格、九宫格
    快速实现宫格菜单按钮组件,提供常见的宫格布局,如八宫格、九宫格的菜单组件;下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12592效果图如下:   参考代码如下:#宫格菜单按钮组件,提供常见的宫格布局,如八宫格、九宫格####HTML代码部分```......
  • Flutter控件之CircularProgressIndicator
    CircularProgressIndicator的作用Flutter中的CircularProgressIndicator是一个圆形进度指示器,用于表示正在进行的任务的进度。它通常用于长时间运行的任务,例如文件下载、网络请求等。CircularProgressIndicator可以在圆周上旋转,以表示正在进行的任务的进度,同时可以根据需要设置颜......
  • Flutter 3.1亮点功能介绍
    Flutter是一款强大的跨端开发框架,可以帮助开发者构建高性能、美观、灵活的应用程序,从而实现跨平台开发和部署。小程序容器技术与跨端框架结合使用,为开发者提供一站式的小程序开发和发布服务,帮助他们更加轻松和高效地构建和部署跨平台应用程序,这样开发者可以节省大量的时间和精力,并......
  • 微信小程序点击按钮进行页面跳转
    下面是wxml代码<buttontype="primary"bindtap="go">跳转到list页面</button>下面是js代码go:function(){wx.navigateTo({url:'/pages/list/list',})},......
  • Qml 延时按钮
    importQtQuick2.12importQtQuick.Window2.12importQtQuick.Controls2.5Window{visible:truewidth:640height:480title:qsTr("圆形延时按钮")DelayButton{id:controlchecked:truetext:qsTr("......
  • Flutter Package: retry
    Flutterpackage:retry传送门Thispackageprovidesaneasywaytoretryasynchronousfunctions.Thisisoftenusefultoavoidcrashingonintermittenterrorssuchasbrokenconnectionsortemporarilyoverloadedservers.这个包提供了一种重试异步函数的简单方......