Flutter的RawMaterialButton按钮

简介: Flutter的RawMaterialButton按钮

RawMaterialButton介绍

简介

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

重要属性

以下是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属性指定了圆角的大小。

4bf9806b90b8f2d923b7396a89f2aa3a.png

相关文章
|
缓存 Java 开发工具
Flutter的文本、图片和按钮使用
Flutter的文本、图片和按钮使用
123 0
|
13天前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
90 5
|
15天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
64 1
|
3月前
|
存储 开发者 UED
Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了
Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了
62 4
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
43 2
|
6月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
79 0
|
6月前
|
iOS开发
Flutter 组件(三)按钮类组件
Flutter 组件(三)按钮类组件
586 0
|
6月前
|
开发框架 Dart 容器
Flutter 自定义渐变按钮 GradientButton
Flutter 自定义渐变按钮 GradientButton Flutter 是一种流行的跨平台移动应用开发框架。Flutter 提供了许多内置的小部件,但有时您可能需要创建自己的小部件以满足特定的需求。这个文档将介绍如何创建一个自定义渐变按钮小部件 GradientButton。
122 0
|
容器
Flutter 129: 图解 ToggleButtons 按钮切换容器组
0 基础学习 Flutter,第一百二十九步:简单学习一下 ToggleButtons 水平按钮切换容器组!
468 0
Flutter 129: 图解 ToggleButtons 按钮切换容器组
flutter系列之:做一个下载按钮的动画
我们在app的开发过程中经常会用到一些表示进度类的动画效果,比如一个下载按钮,我们希望按钮能够动态显示下载的进度,这样可以给用户一些直观的印象,那么在flutter中一个下载按钮的动画应该如何制作呢? 一起来看看吧。