首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当unPressed颤动时,更改按钮onPressed的背景颜色和文本颜色并设置回默认值

当unPressed颤动时,可以通过以下步骤来更改按钮onPressed的背景颜色和文本颜色并设置回默认值:

  1. 首先,需要在前端开发中使用合适的框架或库来创建按钮组件,并设置按钮的初始状态为默认值。
  2. 在按钮组件中,添加一个状态变量来表示按钮是否处于unPressed状态。可以使用React中的useState钩子或Vue中的data属性来实现。
  3. 当按钮被点击时,触发一个事件处理函数,该函数将改变按钮的状态为unPressed,并更新按钮的背景颜色和文本颜色。
  4. 在按钮组件中,使用条件渲染来根据按钮的状态来设置不同的样式。当按钮处于unPressed状态时,应用特定的背景颜色和文本颜色。
  5. 当按钮再次被点击或其他条件满足时,触发另一个事件处理函数,将按钮的状态设置回默认值,并恢复按钮的背景颜色和文本颜色。

以下是一个示例代码片段,演示如何实现上述功能:

代码语言:txt
复制
import React, { useState } from 'react';

const Button = () => {
  const [isUnPressed, setIsUnPressed] = useState(false);

  const handleButtonClick = () => {
    setIsUnPressed(true);
    // 更改按钮的背景颜色和文本颜色
    // ...
  };

  const handleResetButton = () => {
    setIsUnPressed(false);
    // 恢复按钮的背景颜色和文本颜色为默认值
    // ...
  };

  return (
    <button
      onClick={handleButtonClick}
      style={{
        backgroundColor: isUnPressed ? 'red' : 'blue',
        color: isUnPressed ? 'white' : 'black',
      }}
    >
      {isUnPressed ? 'Unpressed' : 'Default'}
    </button>
  );
};

export default Button;

在上述示例中,当按钮被点击时,按钮的背景颜色将更改为红色,文本颜色将更改为白色,表示按钮处于unPressed状态。当再次点击按钮或其他条件满足时,按钮的状态将设置回默认值,背景颜色和文本颜色将恢复为蓝色和黑色。

请注意,上述示例是一个简化的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter | 常用组件

库中按钮都有如下相同点: 1,按下都会有 “水波纹动画” 2,都有一个 onPressed 属性来设置点击事件调,若没有该回调则按钮会处于禁用状态,禁用状态不响应用户点击 各种常见按钮 class...@required this.onPressed, //按钮点击调 this.textColor, //按钮文字颜色 this.disabledTextColor, //按钮禁用时文字颜色...this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时背景颜色 this.highlightColor, //按钮按下背景颜色 this.splashColor...: () => print('提交'), ) 复制代码 Flutter 中 没有提供去除背景设置,如果需要去除背景,可通过将背景颜色设置为透明来实现,将 color: Colors.blue 替换为...,设置激活状态颜色 宽高:Checkbox 无法自定义,Switch 只能定义宽度 Checkbox 有一个属性 tristate,表示是否为三态,默认值为false,如果为true ,valude

11.4K30

Flutter lesson 7: Flutter组件之基础组件(三)

onHighlightChanged, //水波纹高亮变化调,按下返回true,抬起返回false 使用默认值就可以 ButtonTextTheme textTheme, //按钮主题 Color...textColor, //按钮文字颜色 Color disabledTextColor, //按钮禁用时候文字颜色 Color color, //按钮背景色 Color disabledColor..., //按钮禁用时候背景色 Color highlightColor, // 点击或者toch控件高亮时候显示在控件上面,水波纹下面的颜色 Color splashColor, //水波纹颜色...: Text("textColor文本颜色,color背景颜色,highlightColor按钮按下颜色"), textColor: Color(0xffff0000), color...: () {}, child: Text("disabledTextColor禁用时文本颜色,disabledColor禁用时背景颜色"), disabledTextColor:

1.5K50

Flutter 按钮,看这篇文章就够了

我在之前文章文本、图片按钮在Flutter中怎么用中,简单介绍过按钮组件,本篇文章来详细聊聊Flutter中各种按钮组件各种应用场景。...首先来看一下按钮组件属性: onPressed,必填参数,按下按钮触发调,接收一个方法,传null值表示按钮禁用,会显示禁用相关样式 child,表示按钮展示状态Widget,一般为一个文本组件...textColor,文本颜色 color,按钮背景颜色 disabledColor,按钮禁用时背景颜色 disabledTextColor,按钮禁用时文本颜色 splashColor,点击按钮时水波纹颜色...highlightColor,点击(长按)按钮按钮背景颜色 elevation,阴影范围,值越大阴影范围就越大 padding,内边距 shape,设置按钮形状 下面是代码实例: Column...实际上,RaisedButton是立体效果,而FlatButton是扁平化平面效果;OutlineButton是边框按钮,对齐设置背景颜色是不起效果

9.3K31

【Flutter 专题】61 图解基本 Button 按钮小结 (一)

onPressed 是必须要设置,其余属性根据需求而适当调整; 案例尝试 和尚首先尝试最基本 IconButton;长按会由 tooltip 提醒,点击为默认主题色; IconButton(icon...,水波纹颜色为 redAccent;注意 icon 自身设置颜色 color 属性不生效; IconButton(icon: Icon(Icons.android), tooltip: 'IconButton...icon 颜色为 disabledColor 设置 green;同样若 icon 本身设置颜色,disabledColor 不生效;注意:onPressed: null 与 onPressed: (...,可根据 padding 或外层依赖 Container 适当调整位置大小;默认最小尺寸为 88px * 36px; 案例尝试 和尚定义了一个基本按钮监听其高亮改变状态,与我们常见按钮基本一致...foregroundColor 为按钮上层子元素颜色,若子元素本身设置颜色则不生效;backgroundColor 为按钮背景色; foregroundColor: Colors.redAccent.withOpacity

1.4K21

Flutter 全栈式——基础控件

因此,遇到带有这两个单词开头控件,我们应该明确他们表达意思。...VoidCallback 点击键盘完成按钮触发调,无参数 onSubmitted ValueChanged 点击完成按钮触发调,该回调有参数,参数即为输入值 inputFormatters...,则使用fillColor指定颜色填充 fillColor Color 输入框背景颜色 errorBorder InputBorder errorText不为空,且输入框没有焦点要显示边框 focusedBorder...Color 水波纹效果初始化颜色 hoverColor Color 指针悬停在按钮填充颜色 highlightColor Color 水波纹高亮颜色 elevation double 阴影高度...groupValue 动态类型 该组单选按钮当前选定值 onChanged ValueChanged 状态变化调 activeColor Color 选中颜色 materialTapTargetSize

3.8K40

Flutter中按钮组件Button

Flutter提供了丰富按钮组件可以让我们快速构建UI界面。 常见按钮组件如下: 1. RaisedButton 凸起按钮; 2. FlatButton 扁平化按钮; 3....FloatingActionButton 浮动按钮按钮组件常见属性: 1. onPressed  按下按钮触发调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2.... child 子组件; 3. textColor 文本颜色; 4. color 按钮颜色; 5. disabledColor 按钮禁用时颜色; 6. disabledTextColor 按钮禁用时文本颜色...; 7. splashColor 点击按钮时水波纹颜色; 8. highlightColor 长按按钮按钮颜色; 9. elevation 阴影范围; 10. padding 内边距; 11....: (){ print('浮动按钮'); }, // 背景颜色 backgroundColor

4K10

【Flutter 专题】62 图解基本 Button 按钮小结 (二)

凸起按钮,FlatButton 扁平按钮 OutlineButton 边框按钮;可根据不同场景灵活运用; ?...colorBrightness 代表颜色对比度,一般分为 light / dark 两种;一般深色背景需要浅色文字对比,浅色背景需要深色文字对比; // 可点击 RaisedButton(child...和尚原来以为按钮子元素是 Widget,可自由设置各类效果,单独 textColor 是否会略显多余;可实际并非如此,子元素设置颜色等之后 textColor 不生效;但 textColor 与主题相关...使用 RaisedButton 时会自带阴影效果,阴影高度高亮阴影高度均可自由设置;但是阴影颜色应该如何处理呢,官方暂未提供阴影效果属性;和尚尝试了网上大神方式,RaisedButton 外层依赖带模糊阴影效果...Container;和尚借鉴稍微调整一下,解决方案并非最佳,仅作尝试; 初始定义一个默认高度 height 作为阴影高度,监听按钮 onHighlightChanged 方法更改

1.3K41

6详解AppBar小部件

AppBar 通常显示概括本页功能模块,例如图标标题,并且通常包含按钮或其他用户交互点。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最暗最亮50。...: IconThemeData(color: Colors.green, size: 36), ), 文字主题 假设您想将文本颜色更改为带有较浅阴影琥珀色,200并将字体大小设置为24: AppBar...布局添加小部件 如何为 AppBar 图标、文本背景、高度、阴影颜色工具栏设置主题 所以我们有了!...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar, SliverAppBar

16.3K10

《Flutter》-- 4.Flutter组件基础

didUpdateWidget():组件配置发生变化或执行热重载,系统会调该函数更新视图。...4.3.2 按钮组件 Materail组件库中常见按钮组件: RaisedButton:默认是带有阴影灰色背景按钮,按下后阴影会变大; FlatButton:默认是背景透明并不带阴影按钮,按下后会有背景色...; OutlineButton:默认是一个带有边框、不带阴影且背景透明按钮,按下后边框颜色会变亮,同时会出现背景阴影效果; IconButton:一个可点击图标按钮,不支持文字,默认没有背景,点击后会出现背景...所有Materail组件库按钮都有两个相同点:一是按下时会有水波动画,另一个是都有一个onPressed属性来设置单击调。...focusNode:用于控制TextField组件是否获取输入焦点,它是用户键盘交互一种常见方式。 decoration:用于控制TextField组件外观显示,如提示文本背景颜色边框。

12.4K30

文本、图片按钮在Flutter中怎么用

最大缓存限制为100MB,限定空间已经存满数据,把最久没有被访问到图片清除。图片缓存只会在运行期间生效,也就是只缓存在内存中。...既然是按钮,因此除了控制基本样式之外,还需要响应用户点击行为。这就对应着按钮控件中两个最重要参数了: onPressed 参数用于设置点击调,告诉Flutter在按钮点击通知我们。...与Text控件类似,按钮控件也提供了丰富样式定制功能,比如背景颜色color、按钮形状shape、主题颜色colorBrightness,等等。...因为按钮背景颜色是浅色,为避免按钮文字看不清楚,我们通过设置按钮主题 colorBrightness 为 Brightness.light ,保证按钮文字颜色为深色。 展示效果如下: ?...其中,控件初始化child参数用于设置按钮长什么样,而onPressed参数则用于设置点击调。与Text类似,按钮内部也有丰富UI定制接口,可以满足开发者需求。

7.6K20

Flutter文本、图片按钮使用

这就对应按钮控件中两个最重要参数: onPressed参数用于设置点击调,告诉Flutter在按钮被点击通知我们。...若onPressed参数为空,则按钮会处于禁用状态,不响应用户点击 child参数用于设置按钮内容,告诉Flutter控件应长成啥样,即控制按钮控件基本样式。...与Text控件类似,按钮控件也提供丰富样式定制功能,如背景颜色color、按钮形状shape、主题颜色colorBrightness等。...因为按钮背景颜色是浅色,为避免按钮文字看不清楚,我们通过设置按钮主题colorBrightness为Brightness.light,保证按钮文字颜色为深色。...最后学习按钮控件。Flutter提供多种按钮控件,使用方法类似。控件初始化child参数用于设置按钮长什么样,而onPressed参数则用于设置点击调。

46020

Flutter | 常用组件分类、概述、实战

Flutter组件分类 文字类型 容器类型 辅助提示类型 列表类型 系统主题风格类型 交互类型 文字类型 用于描述文字, 如Text组件,一个普通文本, 属性有字体颜色、大小、下划线、删除线...onPressed: _incrementCounter, //长按按钮提示 tooltip: 'Increment', //悬浮按钮图标...有输入焦点 按钮颜色 默认:ThemeData.focusColor focusColor: Colors.tealAccent, // 指针悬停 按钮颜色 默认:ThemeData.hoverColor...: Colors.tealAccent, // 指针悬停 按钮颜色 默认:ThemeData.hoverColor hoverColor: Colors.white,...按钮颜色 默认:ThemeData.hoverColor // hoverColor: Colors.white, // // 点击水波纹颜色 默认:如果为null,使用

3.9K21

『Flutter』常用组件 按钮、图片

它有默认阴影灰度效果,按下时会有视觉反馈。 FlatButton(现在称为TextButton):这是一个无阴影平面按钮,通常用于不太重要操作。它在按下不会改变外观,提供简洁视觉效果。...OutlineButton(现在称为OutlinedButton):这个按钮有一个边框,但没有背景色。按下,边框和文字颜色会变化,适用于需要强调边框而非背景场景。...IconButton:这是一个图标按钮,常用于工具栏对话框中。它可以包含图标而不是文本,适用于空间有限或需要图形化表示地方。...TextButton 被点击onPressed 会被触发 TextButton 被长按时,onLongPress 会被触发 4.Icon Flutter 中 Icon 组件用于显示 Material...width (double): 图片宽度。如果不设置,图片会根据其父组件其他内容自动调整大小。 height (double): 图片高度。同样,如果不设置,会自动调整。

32431

Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生问题与知识点拓展

【小结一下刚刚跳转传输数据方式】 上面的方式是 —— 在跳转目的页中, 准备一个构造函数一个全局变量,用于接收数据, 跳转到目的页,创建一个目的页实例,并把数据传给其构造函数,完成传递;...上述单独设置指的是, 在某个页面中,为该页面的appBar单独设置背景颜色, 这样就会覆盖主页默认主题颜色, 【但是如要尽量保持主题一致性, 建议不要对子页面的这些 相关主题属性 进行修改...: Colors.tealAccent, // 指针悬停 按钮颜色 默认:ThemeData.hoverColor hoverColor: Colors.white,..., // // 有输入焦点 按钮颜色 默认:ThemeData.focusColor // focusColor: Colors.tealAccent, // // 指针悬停...按钮颜色 默认:ThemeData.hoverColor // hoverColor: Colors.white, // // 点击水波纹颜色 默认:如果为null,使用

2.9K10

【Flutter】评级对话框组件

这个库是最好,因为它伴随着星级评价联系,甚至可以滑动评级并发光以进行星级评价。之所以命名为“等级”对话框,是因为该库将识别您在颤动星形图标上做出手势以提供等级。...评级对话框一些属性: **message:**此属性用于对话框消息/描述文本。 **ratingColor:**此属性用于评级栏(星形图标辉光)颜色。...「在此按钮中,我们将添加文本颜色按钮形状onPressed方法。在此方法中,我们将添加」_showRatingAppDialog」小部件。我们将在下面对其进行深入描述。...在此对话框中,我们将添加」ratingColor」表示评级栏(星形图标发光效果)颜色,「标题」,「消息」表示对话框消息/描述文本,「图像」,「submitButton」表示提交按钮标签/文本,「...onSubmitted」表示返回带有用户评分评论值,「onCancelled」表示用户取消/关闭对话框调用。

4K50
领券