摘要:控件练习地址一。单选框中的单选框,和一样本身没有状态,必须父亲有状态才能改变值属性此的值当选择此的时候的回调。
flutter控件练习demo地址:github
一。Radio (单选框)1.1 属性flutter 中的单选框 , 和 Checkbox 一样 本身没有状态,必须父亲有状态 才能改变值
value: 此 Radio 的 value 值
onChanged: 当选择此 radio 的时候 的回调。 参数就是 此 value 的值
groupValue: 如果 Radio 的 value 和 groupValue 一样 就 是此 Radio 选中 其他 设置为 不选中
activeColor: 选中的颜色
二、RadioListTile(dan) 2.1 属性value: 此 Radio 的 value 值
onChanged: 当选择此 radio 的时候 的回调。 参数就是 此 value 的值
groupValue: 如果 Radio 的 value 和 groupValue 一样 就 是此 Radio 选中 其他 设置为 不选中
activeColor: 选中的颜色
title: 标题, 具有代表性的就是 Text
subtitle: 副标题(在 title 下面), 具有代表性的就是 Text
isThreeLine = false:// 是否是三行文本
true : 副标题 不能为 null
false:如果没有副标题 ,就只有一行, 如果有副标题 ,就只有两行
dense: 是否密集垂直
secondary: 左边的一个控件
selected = false: text 和 icon 的 color 是否 是 activeColor 的颜色
controlAffinity = ListTileControlAffinity.platform:
ListTileControlAffinity.platform 根据不同的平台,来显示 对话框 的位置
ListTileControlAffinity.trailing:勾选在右,title 在中,secondary 在左
ListTileControlAffinity.leading :勾选在左,title 在中,secondary 在右
1.2 demo图片 1.3 代码注意点 RadioListTile 的父控件 不能选择Row (暂时不知道为什么),demo中选的是 Column
import "package:flutter/material.dart";
class RadioDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Radio 和 Radio RadioListTile "),
centerTitle: true,
),
body: RadioStateDemo(),
);
}
}
class RadioStateDemo extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return RadioSDemo();
}
}
class RadioSDemo extends State {
String groupValue;
String valueLiu;
String valueZhang;
String valueGuo;
String valueLi;
@override
void initState() {
super.initState();
groupValue = "刘德华";
valueLiu = "刘德华";
valueZhang = "张学友";
valueGuo = "郭富城";
valueLi = "黎明";
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 20,
),
Text(
"一:Radio",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Radio(
// 此 Radio 的 value 值
value: valueLiu,
// 当选择此 radio 的时候 的回调。 参数就是 此 value 的值
onChanged: (value) {
setState(() {
groupValue = value;
});
},
// 如果 Radio 的 value 和 groupValue 一样 就 是此 Radio 选中 其他 设置为 不选中
groupValue: groupValue,
// 选中的颜色
activeColor: Colors.red,
// 响应手势的大小 , 默认是 48 * 48
// MaterialTapTargetSize.shrinkWrap 水波纹 在中间
// MaterialTapTargetSize.padded 水波纹 靠左上
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Radio(
value: valueZhang,
onChanged: (value) {
setState(() {
groupValue = value;
});
},
groupValue: groupValue,
activeColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Radio(
value: valueGuo,
onChanged: (value) {
setState(() {
groupValue = value;
});
},
groupValue: groupValue,
activeColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Radio(
value: valueLi,
onChanged: (value) {
setState(() {
groupValue = value;
});
},
groupValue: groupValue,
activeColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),
SizedBox(
height: 40,
),
Text(
"二:RadioListTile",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// 不知道 为什么 Row 父布局 不行(暂时不知道why)
Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
RadioListTile(
title: Text(valueLiu),
// 必须要的属性
value: valueLiu,
//是否选中发生变化时的回调, 回调的 bool 值 就是是否选中 , true 是 选中
groupValue: groupValue,
onChanged: _changed,
// 选中时 填充的颜色
activeColor: Colors.red,
// 标题, 具有代表性的就是 Text ,
// selected 如果是 true :
// 如果 不设置 text 的 color 的话, text的颜色 跟随 activeColor
// 副标题(在 title 下面), 具有代表性的就是 Text , 如果 不设置 text 的 color 的话, text的颜色 跟随 activeColor
subtitle: Text("副标题"),
// 是否是三行文本
// 如果是 true : 副标题 不能为 null
// 如果是 false:
// 如果没有副标题 ,就只有一行, 如果有副标题 ,就只有两行
isThreeLine: false,
// 是否密集垂直
dense: false,
// 左边的一个控件
// secondary: Text("secondary"),
// text 和 icon 的 color 是否 是 activeColor 的颜色
selected: true,
controlAffinity: ListTileControlAffinity.leading,
),
RadioListTile(
title: Text(valueZhang),
value: valueZhang,
groupValue: groupValue,
onChanged: _changed),
RadioListTile(
title: Text(valueGuo),
value: valueGuo,
groupValue: groupValue,
onChanged: _changed),
RadioListTile(
title: Text(valueLi),
value: valueLi,
groupValue: groupValue,
onChanged: _changed),
],
)
],
);
}
void _changed(value) {
groupValue = value;
setState(() {});
}
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/7352.html
摘要:是啥是谷歌推出的一套视觉设计语言。比如有的可以换皮肤,而每一套皮肤就是一种设计语言,有古典风呀炫酷风呀极简风呀神马的,而就是谷歌风,有兴趣的同学可以学习了解一下官方原版和中文翻译版,这是每一个产品经理的必修教材。 flutter环境和运行环境搭建好之后,可以开始撸码了,然而当你打开VScode,在打开项目文件夹后,摆在你面前的是main.dart被打开的样子,里面七七八八的已经写好了一...
摘要:布局控件不会直接呈现内容,可看作承载可视控件的容器。布局控件也是可以模拟显示的,通常用于调试布局样式时用到的网格线标尺动画帧等。但是当页面内容需要超出屏幕尺寸时,就用和代替。 不知不觉已经到了第7篇,然而很多萌新玩家可能还是不知道如何堆砌控件,像用CSS一样搭出漂亮的APP界面,我也一样,红红火火恍恍惚惚,直到今天含泪读完Flutter布局基础,仿佛打开了一个全新的世界。 基本概念 在...
摘要:前言最近比较热门,但是成体系的文章并不多,前期避免不了踩坑我这篇文章主要介绍如何使用实现一个比较复杂的手势交互,顺便分享一下我在使用过程中遇到的一些小坑,减少大家入坑作者链接先睹为快本项目支持运行,效果如下对了,顺便分享一下生成的小窍门,建 前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑;我这篇文章主要介绍如何使用Flutter实现一个比较复杂...
摘要:前言最近比较热门,但是成体系的文章并不多,前期避免不了踩坑我这篇文章主要介绍如何使用实现一个比较复杂的手势交互,顺便分享一下我在使用过程中遇到的一些小坑,减少大家入坑作者链接先睹为快本项目支持运行,效果如下对了,顺便分享一下生成的小窍门,建 前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑;我这篇文章主要介绍如何使用Flutter实现一个比较复杂...
摘要:当发送按钮触发事件后调用函数,在中执行了方法,此时根据中的变量变更重新渲染对象,然后大家就可以看到消息记录框中底部新增了一行消息。 熟悉了flutter的各种控件和相互嵌套的代码结构后,可以再加深一点难度:加入动画特效。 虽然flutter的内置Metarial控件已经封装好了符合其设计语言的动画特效,使开发者节约了不少视觉处理上的精力,比如点击或长按listTile控件时自带水波纹动...
阅读 1750·2021-09-27 14:02
阅读 3100·2021-09-27 13:36
阅读 1046·2019-08-30 12:46
阅读 1834·2019-08-30 10:51
阅读 3571·2019-08-29 17:02
阅读 940·2019-08-29 16:38
阅读 1846·2019-08-29 16:37
阅读 3003·2019-08-26 10:32