首页
学习
活动
专区
工具
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文件中增加如下代码: <item...这种修改方式是不同于通过background来切换,我保留了这个控件选中和取消选中动画效果,只修改了选中前后颜色,这种方式是比较好,android:theme="@style/MyCheckBox...去除选中水波纹效果其实一行代码就搞定了,就是把背景值为透明即可,@android:color/transparent 修改布局文件: <CheckBox android:layout_width

3.3K20

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{ // 当前选中标签下标

4K10

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

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

9.3K31

【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.2K30

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.3K41

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 选中时候文字颜色是否跟着改变

81120
领券