首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Flutter中的常见表单组件

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

4.8K20

Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )

@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...组件 ---- TextField 组件构造函数的可选参数 : 下面代码中的可选参数就是 TextField 组件可以设置的参数选项 ; class TextField extends StatefulWidget...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...官网 : https://flutter.dev/ Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

10.4K00

输入和选择

相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField的用法。...我们给上面的代码新增decoration属性,可以发现当我们的TextField获得焦点图标会自动变色,提示文字会自动上移。 接下来,我们来看下onChanged和onSubmitted。...@required this.onChanged,//选中变更监听 this.activeColor,//选中颜色 }) 直接看代码看用法: import 'package:flutter/material.dart...], )), ); } } 我们在Column放了4个Radio,每当点击Radio都会触发handleRadioValueChanged方法来更改当前选中的...this.inactiveTrackColor, this.activeThumbImage, this.inactiveThumbImage }) 已经很简单,只不过多了几个参数用来控制打开和关闭颜色或者图片

2.4K20

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

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

3.3K20

Flutter | 常用组件

this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮按下的背景颜色 this.splashColor...而在 iconfont 中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标Flutter 中,iconfont 和图片相比有如下优势 1,体积小 2,矢量的图标,放大不会影响清晰度...3,可以应用文本样式,可以像文本一样改变字体图标颜色,大小对齐等 4,可以通过 TextSpan 和文本混用 使用 Material Design 字体图标 Flutter 默认包含了一套 Material...,但这种需要提供每个图标的码点,这点对开发者并不友好,所以 Flutter 封装了 IconData 和 Icon 来专门显示字体图标,上面栗子可使用如下方式实现 Row( mainAxisAlignment...null 总结 Switch , Checkbox 和 Radio 本身不会维护状态,而是需要父组件来管理状态,当用户点击,通过事件将状态通知到父组件,因此是否选中就会和用户数据发生关联,而这些用户数据也不是他们的私有状态

11.3K30

第130期:flutter的状态组件和状态管理

比如我们有个图标,我们想让它支持点击事件,或者在状态改变的时候换一个不同的图标。 其实我们可以创建一个有状态的组件来控制或管理那些需要变化的组件。...状态组件stateful widget则是动态的:例如,它可以响应用户交互触发的事件或接收数据更改其外观。...状态由可以更改的值组成,例如滑块的当前值或是否选中复选框。当小部件的状态发生变化时,状态对象调用setState(),告诉框架重新绘制小部件。 创建状态组件 需要注意的是: /** 1....如果所讨论的状态是用户数据,例如复选框的选中或未选中模式,或者滑块的位置,那么状态最好由父组件管理。 2. 如果所讨论的状态是美学的,例如动画,那么状态最好由组件自身管理。...松手,边框消失,框的颜色改变。组件TapboxC将其活动状态导出到其父组件,但在自身内部管理其高亮状态。

1.5K20

flutter 输入框组件TextField的实现代码

相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField的用法。...我们给上面的代码新增decoration属性,设置相关属性,可以发现当我们的TextField获得焦点图标会自动变色,提示文字会自动上移。 ? 还可以看到 我加了一个onChanged。...TextField的textInputAction可以更改键盘本身的操作按钮。...更改TextField中的光标 可以直接从TextField小部件自定义游标。 可以更改角落的光标颜色,宽度和半径。 例如,这里我没有明显的原因制作一个圆形的红色光标。...控制TextField中的大小和最大长度 TextFields可以控制在其中写入的最大字符数,最大行数并在键入文本展开。 TextField( maxLength: 4, ), ?

4.7K11

Flutter应用程序添加交互性 顶

当您重新加载应用程序时,星形图标现在应该响应点击。 问题? 如果您无法运行代码,请在IDE中查找可能的错误。 调试Flutter应用程序可能会有所帮助。...Lib/main.dart pubspec.yaml - 不更改此文件 lakes.jpg-不更改为此文件 如果您仍然有疑问,请参阅获取支持。...这些例子都是类似的工作 - 每创建一个容器,当点击,在绿色或灰色框之间切换。 _active布尔值确定颜色:绿色表示激活或者灰色表示不激活。 ? ?...定义_active布尔值决定框的当前颜色。 定义_handleTap()函数,轻击框该函数更新_active,并调用setState()函数来更新UI。 实现小部件的所有交互式行为。...在TapboxC示例中,按下,框的周围会出现一个深绿色的边框。 抬起,边框消失,框的颜色改变。 TapboxC将其_active状态导出到其父项,但在内部管理_highlight状态。

4.2K20

Flutter》-- 4.Flutter组件基础

7)backgroundColor:导航栏的颜色,默认值为ThemeData.primarycolor(主题颜色)。 8)brightness:导航栏材质的亮度。...具体选择哪种状态管理,可以参考如下基本原则: 1)如果状态是有关界面外观效果的(如颜色、动画等),最好由Widget自身管理; 2)如果状态是用户数据(如复选框的选中状态、滑块位置等),最好由父Widget...Flutter默认包含了一套Materail Design的字体图标,使用前需要在pubspec.yaml文件中进行如下配置: ... flutter: Uses-material-design:...decoration:用于控制TextField组件的外观显示,如提示文本、背景颜色和边框。 textAlign:输入框内文本在水平方向的对齐方式。 textDirection:输入框内文本的方向。...enableInteractiveSelection:是否启用交互式选择,为true表示长选中文字,并弹出cut、copy、paste菜单。

12.4K30

掌握Flutter底部导航栏:畅游导航之旅

Flutter提供了丰富的选项,使开发者可以轻松自定义底部导航栏的外观,包括选中项的颜色图标、背景颜色和形状、导航栏的高度以及图标的大小等。在本节中,我们将介绍如何实现底部导航栏的自定义外观。...4.1 更改选中颜色图标 通过设置BottomNavigationBar的selectedItemColor属性,可以更改选中项的颜色。...下面是一个示例,演示了如何更改选中项的颜色图标: BottomNavigationBar( items: [ BottomNavigationBarItem...selectedIconTheme: IconThemeData(size: 30), // 更改选中项的图标大小 onTap: _onItemTapped, ), 4.2 自定义背景颜色和形状...接着,我们讨论了如何自定义底部导航栏的外观,包括更改选中项的颜色图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。

11410
领券