flutter单选按钮,flutter 自定义输入框
Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)
Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下
创新互联于2013年创立,先为宝鸡等服务建站,宝鸡等地企业,进行企业商务咨询服务。为宝鸡企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
我们先来看看MaterialButton中的属性,可以看到能设置的属性还是很多的。
下面我们来看看常用属性
而在Android中如果我们要修改按钮样式的话,需要通过selector和Shape等方式进行修改,相比较Flutter来说是要麻烦不少的
RaisedButton的构造方法如下,由于继承自MaterialButton,所以MaterialButton中的大多数属性这边都能用,且效果一致,这里就不在赘述了
下面我们来看一下属性
接收一个方法,点击按钮时回调该方法。如果传null,则表示按钮禁用
如下图所示
按钮文本控件,一般都是传一个Text Widget
按钮颜色
按钮的文本颜色
点击按钮时水波纹颜色
高亮颜色,点击(长按)按钮后的颜色
阴影范围,一般不会设置太大
内边距,使用
或者
shape用来设置按钮的形状,其接收值是ShapeBorder类型,ShapeBorder是一个抽象类,我们来看看有哪些实现类
可以看到,实现类还是很多的,我们主要来看看常用的即可。
borderRadius 接收一个BorderRadius类型的值,常用方法如下
我们可以把borderRadius分为上下左右四个方向,下面的方法都是对这四个方向进行设置,
带斜角的长方形边框
圆形边框
圆角矩形
两端是半圆的边框
FlatButton跟RaisedButton用法基本一致,下面我们就直接用一下
注意,OutlineButton是一个有默认边线且背景透明的按钮,也就是说我们设置其边线和颜色是无效的,其他属性跟MaterialButton中属性基本一致
下面我们直接来使用
效果如下:
IconButton是直接继承自StatelessWidget的,默认没有背景
我们来看一下他的构造方法
可以看到,icon是必填参数
icon接收一个Widget,但是一般我们都是传入一个Icon Widget
其他属性跟MaterialButton中的属性用法基本一致
我们来用一下
效果如下:
我们也可以传一个Text或其他Widget,这个大家自行尝试吧
如果我们需要设置按钮的最小宽度以及高度,button属性中并没有提供对应的设置方法
使用如下:
Flutter中Button内容大概就是这些
【Flutter】按钮与文本(三)
此控件比较简单,按钮的功能可划分为UI样式与事件回调
这里将几种不同的按钮一起运行,做下对比动图如下:
这里对五种按钮进行column居中排列如下
Text用于显示简单样式文本,它包含一些控制文本显示样式的一些属性。
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。
TextStyle更多属性设置如下:
如果我们需要对一个Text内容的不同部分按照不同的样式显示,即富文本,这时就可以使用TextSpan,它代表文本的一个“片段”。
如上述,我们当然也可以在上述链接上添加手势事件,后续会提到。
在widget树中,文本的样式默认是可以被继承的,因此,如果在widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而DefaultTextStyle正是用于设置默认文本样式的。
举例如下:
Flutter项目插件整理
#弹窗
oktoast : ^3.1.5
#路由
get : ^4.5.1
#百度地图定位
flutter_bmflocation : ^2.0.0-nullsafety.1
#百度地图-基础地图
flutter_baidu_mapapi_map : ^3.0.0+2
#百度地图-检索
flutter_baidu_mapapi_search : ^3.0.0
#百度地图-计算工具
flutter_baidu_mapapi_utils : ^3.0.0
#屏幕自动适应
flutter_screenutil : ^5.2.0
#Banner图切换
flutter_swiper_plus : ^2.0.4
#网络请求
dio : ^4.0.4
dio_cache_interceptor : ^3.2.2
pretty_dio_logger : ^1.2.0-beta-1
#城市选择器
azlistview : ^2.0.0
#本地存储
get_storage : ^2.0.3
#权限
permission_handler : ^8.3.0
#保存图片
image_gallery_saver : ^1.7.1
# image_save: ^5.0.0
#常用工具类
common_utils :
path : plugin/common_utils-2.0.2
#选择器
flutter_picker : ^2.0.2
#生成二维码
qr_flutter : ^4.0.0
#验证码输入框
pin_input_text_field : ^4.1.1
# 汉字转拼音
lpinyin : ^2.0.3
#多张图片上传
wechat_assets_picker : ^6.3.1
wechat_camera_picker : ^2.6.3
#裁剪图片
image_cropper : ^1.5.0
#图片压缩
flutter_luban : ^0.1.13
#家谱树
graphview : ^1.1.1
vector_math : ^2.1.0
#行为验证码
steel_crypt : ^3.0.0+1
encrypt : ^5.0.0
#二维码识别
flutter_qr_reader : ^1.0.5
#右上角小图标
badges : ^2.0.2
#唤醒系统应用
url_launcher : ^6.0.17
flutter_sms : ^2.3.2
#QQ分享
tencent_kit : ^2.1.0
flutter_cache_manager : ^3.3.0
#微信SDK
fluwx : ^3.6.1+4
#支付宝SDK
tobias :
path : plugin/tobias-2.2.0
#个推
getuiflut : ^0.2.11
#极光推送
# jpush_flutter:
# path: plugin/jpush_flutter-2.2.2
#极光魔链
jmlink_flutter_plugin :
path : plugin/jmlink_flutter_plugin-2.1.2
#极光认证
jverify :
path : plugin/jverify-2.2.4
#极光统计
janalytics :
path : plugin/janalytics-2.1.5
#倒计时
circular_countdown_timer : ^0.2.0
#加载中效果
flutter_spinkit : ^5.1.0
#APP更新
r_upgrade :
path : plugin/r_upgrade-0.3.7+2
#刷新-加载更多
flutter_easyrefresh : ^2.2.1
#右上角弹出式菜单
custom_pop_up_menu : ^1.2.2
#时间轴
timeline_tile : ^2.0.0
#虚线边框
dotted_border : ^2.0.0
like_button : ^2.0.4
#图片
extended_image : ^6.0.1
#图片九宫格
nine_grid_view : ^2.0.0
#时间模糊插件
timeago :
path : plugin/timeago-3.1.0
#屏幕截图
screenshot : ^1.2.3
#图片压缩
flutter_image_compress : ^1.1.0
#List左滑右滑
flutter_slidable : ^1.2.0
#底部伸缩抽屉-针对地图
sliding_up_panel : ^2.0.0+1
#键盘高度
flutter_keyboard_size : ^1.0.0+4
#JSON动图
lottie : ^1.2.2
#城市选择器
city_pickers :
path : plugin/city_pickers-1.0.1
#调试工具
path_provider : ^2.0.7
#打开HTML
webview_flutter : ^2.3.1
#表情
emoji_picker_flutter : ^1.0.8
#扇形进度
ai_progress : ^2.0.0
#喜欢按钮
tiktok_favorite_gesture : ^1.0.0
#获取手机信息
device_info : ^2.0.3
#包信息
package_info : ^2.0.2
device_apps : ^2.1.1
#倒计时
stop_watch_timer : ^1.3.1
#发现Android和iOS上的网络(WiFi和移动/蜂窝)连接状态
connectivity_plus : ^2.2.0
#从应用程序打开iOS和Android手机设置。
app_settings : ^4.1.1
#日志上报
sentry_flutter : ^6.1.2
#后退拦截
back_button_interceptor : ^5.0.2
#视频播放器
better_player : ^0.0.81
#APP启动图
flutter_native_splash : ^2.0.4
#JSON-TO-MAPPER
dart_json_mapper : ^2.1.17
#HTML展示
flutter_html : ^3.0.0-alpha.2
#XD to Flutter
adobe_xd : ^2.0.1
flutter_svg : ^1.0.3
#APPBAR背景色渐变
new_gradient_app_bar : ^0.2.0
#音频播放
flame_audio : ^1.0.0
#入门介绍页
intro_slider : ^3.0.3
#键盘
keyboard_actions : ^3.4.5
emoji_keyboard_flutter : ^1.2.7
#单选选择框
flutter_pickers : ^2.1.9
Radio-单选组件
Radio为单选控件,基本用法如下:
Radio控件本身没有State状态,当 value 的值和 groupValue 值相等时,Radio显示选中状态,效果如下:
通常情况下,有多个单选按钮,当选中一个时,其他自动变为未选中状态,用法如下:
效果如下:
activeColor 是选中状态下颜色,用法如下:
效果如下:
通常情况下,需要在Radio控件的后面添加说明,用户需要知道自己选择的是什么,当然我们可以直接在Radio后面添加Text控件,不过,Flutter已经为我们提供了相应的控件,就是 RadioListTile ,通过名字我们就知道这是一个Radio和ListTile 组合的控件,关于ListTile的用法可以查看 ListTile ,用法如下:
效果如下:
网站标题:flutter单选按钮,flutter 自定义输入框
网页地址:http://scyanting.com/article/dsgoccd.html