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

如何在选中时更改raisedButton的颜色

在Flutter中,可以通过修改RaisedButton的属性来更改其颜色。RaisedButton是一个Material Design风格的按钮,可以使用elevation属性来设置按钮的阴影效果,使用color属性来设置按钮的背景颜色。

要在选中时更改RaisedButton的颜色,可以使用StatefulWidget来管理按钮的状态。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: isSelected ? Colors.blue : Colors.grey, // 根据isSelected状态设置按钮的颜色
      onPressed: () {
        setState(() {
          isSelected = !isSelected; // 切换按钮的选中状态
        });
      },
      child: Text('按钮'),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('按钮示例'),
      ),
      body: Center(
        child: MyButton(),
      ),
    ),
  ));
}

在上述代码中,我们创建了一个名为MyButton的StatefulWidget,其中使用isSelected变量来管理按钮的选中状态。在按钮的build方法中,根据isSelected状态来设置按钮的颜色。当按钮被点击时,通过调用setState方法来更新isSelected的值,从而切换按钮的选中状态。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。关于Flutter的更多信息和相关产品,你可以参考腾讯云的Flutter开发文档:Flutter开发文档

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

相关·内容

  • Android CheckBox修改选中颜色并去除选中时的水波纹效果

    前言 都知道Android原生的控件颜色比较辣眼睛,所以实际开发中都会有改动,而选中框是在实际开发中常用的,比如同意这个协议就勾选上。...这就是原生的控件,请问这个颜色好看吗? 所以要改,在res文件夹下的values中的styles.xml文件中增加如下代码: 时为灰色,勾选好为黄色--> 的来切换的,我保留了这个控件选中和取消选中的动画效果,只修改了选中前后的颜色,这种方式是比较好的,android:theme="@style/MyCheckBox...去除选中时的水波纹效果其实一行代码就搞定了,就是把背景值为透明即可,@android:color/transparent 修改布局文件: <CheckBox android:layout_width

    3.5K20

    Flutter 中的按钮组件

    Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下: 1. RaisedButton :凸起的按钮; 2. FlatButton :扁平化的按钮; 3....FloatingActionButton:浮动按钮; 按钮组件常见的属性: 1. onPressed 按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2....值的类型为Widget; 3. textColor 文本颜色。值的类型为Colors; 4. color 按钮的颜色。值的类型为Colors; 5. disabledColor 按钮禁用时的颜色。...值的类型为Colors; 6. disabledTextColor 按钮禁用时的文本颜色。值的类型为Colors; 7. splashColor 点击按钮时水波纹的颜色。...值的类型为Colors; 8. highlightColor 长按按钮后按钮的颜色。值的类型为Colors; 9. elevation 阴影的范围。

    3.1K30

    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....TabsState createState() => _TabsState(this.index); } class _TabsState extends State{ // 当前选中标签的下标

    4.1K10

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

    首先来看一下按钮组件的属性: onPressed,必填参数,按下按钮时触发的回调,接收一个方法,传null值表示按钮禁用,会显示禁用相关样式 child,表示按钮展示状态的Widget,一般为一个文本组件...textColor,文本颜色 color,按钮的背景颜色 disabledColor,按钮禁用时的背景颜色 disabledTextColor,按钮禁用时的文本颜色 splashColor,点击按钮时水波纹的颜色...上述例子我都是以RaisedButton为例来演示的,实际上,RaisedButton、FlatButton和OutlineButton这三者的使用都是完全一样的。...实际上,RaisedButton是立体效果的,而FlatButton是扁平化的平面效果;OutlineButton是边框按钮,对齐设置背景颜色是不起效果的。...7,通过一个三目运算符来实现悬浮按钮选中与否的颜色(配置FloatingActionButton的backgroundColor属性)切换: backgroundColor: this.

    9.8K31

    【Flutter 专题】129 图解 ToggleButtons 按钮切换容器组

    选中时高亮颜色 this.hoverColor, // 初始水波纹颜色 this.splashColor, // 选中时水波纹颜色 this.focusNodes...;disabledColor 对应子 Widget 默认不可选中状态颜色;其中当不设置 onPressed 或 onPressed == null 时为不可选中状态; _toggleWid02(index...,选中时的高亮颜色;splashColor 对应子 Widget 在点击过程中的水波纹颜色; _toggleWid03(index, isPressed) { return Container( height...4. borderColor & selectedBorderColor & disabledBorderColor borderColor 对应子 Widget 未选中时边框颜色;selectedBorderColor...对应子 Widget 选中时边框颜色;disabledBorderColor 对应不可选择时边框颜色; _toggleWid04(index, isPressed) { return Container

    1.4K30

    Flutter中的常见表单组件

    ,选中时的背景颜色 checkColor,选中时Checkbox里面对号的颜色 使用代码如下: class _HomePageState extends State {...CheckboxListTile组件的属性如下: value,true或者false,配置是否选中 onChanged,选中状态改变的时候的回调 activeColor,选中时的背景颜色 title,标题...Radio的常见属性如下: value,单选的值 onChanged,选中该条目的时候触发的函数 activeColor,选中时的背景颜色 groupValue,所在单选按钮组的选中值,要想配置几个Radio...//选中时的背景颜色 selected: this....Switch开关 Switch是一个开关组件,常见属性如下: value,bool类型,是否选中 onChanged,状态改变时触发回调 activeColor,选中的颜色、背景颜色 使用代码如下:

    4.9K20

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

    与 FlatButton 基本完全相同,只是 RaisedButton 多了一些阴影高度的特有属性,和尚准备同时对两类 Button 进行尝试,比较两者的不同; 案例尝试 和尚首先尝试最基本的 RaisedButton...colorBrightness 代表颜色对比度,一般分为 light / dark 两种;一般时深色的背景需要浅色的文字对比,浅色的背景需要深色的文字对比; // 可点击 RaisedButton(child...以下为 OutlineButton 特有属性:borderSide 代表边框样式;disabledBorderColor 代表不可点击时边框颜色;highlightedBorderColor 代表高亮时边框颜色...使用 RaisedButton 时会自带阴影效果,阴影的高度和高亮时的阴影高度均可自由设置;但是阴影的颜色应该如何处理呢,官方暂未提供阴影效果属性;和尚尝试了网上大神的方式,RaisedButton 外层依赖带模糊阴影效果的...Container;和尚借鉴并稍微调整一下,解决方案并非最佳,仅作尝试; 初始时定义一个默认的高度 height 作为阴影高度,监听按钮的 onHighlightChanged 方法更改

    1.4K41

    Flutter | 常用组件

    同个这个构造可以轻松创建出带图标的按钮,如 RaisedButton 等 自定义按钮外观 按钮的外观可以通过属性来定义,不同的按钮属性都大同小异,以 FlatButton 为例,看一下常用的按钮属性,详细的可以查看...this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮按下时的背景颜色 this.splashColor..., //点击时,水波动画中水波的颜色 this.colorBrightness,//按钮主题,默认是浅色主题 this.padding, //按钮的填充 this.shape, //外形...的值会自动增加一个状态 null 总结 Switch , Checkbox 和 Radio 本身不会维护状态,而是需要父组件来管理状态,当用户点击时,通过事件将状态通知到父组件,因此是否选中就会和用户数据发生关联...InputDecoration:用于控制 TextField 的外观显示,如提示文本,背景颜色,边框等 keyboardType :用于设置该输入框的键盘输入类型,取值如下: image.png

    11.4K30

    17.Flutter学习之路常用表单TextField、CheckBox等组件

    TextField常见属性: 属性 描述 maxLines 将文本框改为多行文本框,默认是单行 onChanged 文本框改变的时候触发的时间 decoration hintText类似于EditText...( ), ), ), SizedBox(height: 20,), RaisedButton...], ), ), ); } } Checkbox但选 Checkbox常见属性 属性 描述 value true或者false onChange 改变的时候触发的事件...activeColor 选中的颜色、背景颜色 checkColor 选中的颜色、CheckBox里面对号的颜色 CheckboxListTile多选框组件 属性 描述 value true或者false...onChange 改变的时候触发的事件 activeColor 选中的颜色、背景颜色 title 标题 subtitle 二级标题 secondary 配置图标或者图片 selected 选中的时候文字颜色是否跟着改变

    86020
    领券