数字是自己先写死的

 List list =[
{
"title": "影视特效",
"type":,
},
{
"title": "室内设计",
"type":
},
{
"title": "游戏原画",
"type":
},
{
"title": "次时代",
"type":
},
{
"title": "UI设计",
"type":
},
{
"title": "后期合成",
"type":
},
];

使用了GridView

用来控制一行显示几列

@override
Widget build(BuildContext context) {
int groupValue=1;
return GridView.count(
padding: EdgeInsets.all(5.0),
//一行多少个
crossAxisCount: 3,
//滚动方向
scrollDirection: Axis.vertical,
// 左右间隔
crossAxisSpacing: 10.0,
// 上下间隔
mainAxisSpacing: 15.0,
//宽高比
childAspectRatio: 1 / 0.4,
shrinkWrap: true,
children: widget.formList.map((value) {
return listitem(context,value);
}).toList(),
);
}
widget.formList 是从调用页面传过来的
 Widget listitem(context,value) {
var deviceSize = MediaQuery.of(context).size;
print(value['type']);
return groupValue==value['type'] ? RaisedButton(
color: Colors.black,
onPressed: (){
print('切换${value}');
updateGroupValue(value['type']);
},
child: Text(value['title'],style: TextStyle(color: Colors.white),),
):OutlineButton(
onPressed: (){
print('切换${value}');
updateGroupValue(value['type']);
},
child: Text(value['title']),
);
}
这里是代码的关键比较 当value和groupValue一致的时候则选中 设置选中样式和没选中样式

当点击某一个按钮的时候进行修改 groupValue 的值 默认groupValue值为0

int groupValue=0;
void updateGroupValue(int v){
setState(() {
groupValue=v;
});
}

  最终效果如下:

  

flutter 按钮单选封装的更多相关文章

  1. iOS开发——项目实战OC篇&类QQ黏性按钮(封装)

    类QQ粘性按钮(封装) 那个,先来说说原理吧: 这里原理就是,在界面设置两个控件一个按钮在上面,一个View在下面(同样大小),当我们拖动按钮的时候显示下面的View,view不移动,但是会根据按钮中 ...

  2. WPF控件库:文字按钮的封装

    需求:封装按钮,按钮上面只显示文字.在鼠标移上去.鼠标点击按钮.以及将按钮设为不可用时按钮的背景色和前景色需要发生变化 实现:继承Button类,封装如下6个属性: #region 依赖属性 /// ...

  3. ios开发之--多个按钮单选效果

    开发项目时,有很多场景需要用到按钮单选效果,例如充值页面,选择标签页面等,具体实现代码如下: 1,创建 -(UIView *)headerView { CGFloat width = (Kscreen ...

  4. iOS不得姐项目--appearance的妙用,再一次设置导航栏返回按钮,导航栏左右按钮的封装(巧用分类)

    一.UI_APPEARANCE_SELECTOR 彩票项目中appearance的用法一直没有搞明白,这次通过第二个项目中老师的讲解,更深一层次的了解到了很多关于appearance的作用以及使用方法 ...

  5. WPF控件库:图片按钮的封装

    需求:很多时候界面上的按钮都需要被贴上图片,一般来说: 1.按钮处于正常状态,按钮具有背景图A 2.鼠标移至按钮上方状态,按钮具有背景图B 3.鼠标点击按钮状态,按钮具有背景图C 4.按钮处于不可用状 ...

  6. swift项目第六天:中间发布按钮的封装以及监听点击事件

    import UIKit /* 总结:1:给UIButton写分类,新建文件swiftFile,一般为了区分起名字都是名字-Extension,要想调用UI控件需要导入 import UIKit框架, ...

  7. flutter Radio单选框

    单选框,允许用户从一组中选择一个选项. import 'package:flutter/material.dart'; class RadioDemo extends StatefulWidget { ...

  8. Flutter用dio封装http网络请求,设置统一的请求地址、headers及处理返回内容

    封装http请求是项目中经常需要做的,常用于设置通用请求地址.请求headers以及处理返回结果,例如在项目中开发地址.测试地址.上线地址是不一样的,当在封装的请求设置好默认地址之后只需要改一个地址而 ...

  9. Flutter 打印日志封装及创建Live Templates快捷打印日志

    只需要输入logi 就可出现以下代码 /// tag(类名.函数名)LogUtil.i(index, tag: '_MyHomePageState.onItemClick:');打印日志效果如下: 实 ...

随机推荐

  1. 图像元数据编辑软件:MetaImage使用流程讲解

    MetaImage是唯一的macOS工具,允许在处理所有类型的标签格式时编辑,读取和写入元数据.在时尚的界面中导航,您可以更改图像元数据的所有内容,并对数百张相似的照片进行相同的编辑. https:/ ...

  2. JMeter4.0 IF Controller

    推荐使用 __jexl3 函数生成 if controller判断条件 举个栗子: 1. 假如条件为 "${demo}" == "test" 2. 在If Co ...

  3. 【时间】Unix时间戳

    UNIX时间戳:Unix时间戳(英文为Unix epoch, Unix time, POSIX time 或 Unix timestamp) 是从1970年1月1日(UTC/GMT的午夜)开始所经过的 ...

  4. JCF——Map

    Hashtable LinkedHashMap Properties

  5. curl查看index以及settings

    1.查看mapping curl -u elastic:elastic -XGET "127.0.0.1:9200/index_name/_mapping" 2.查看setting ...

  6. JAVA学习之环境搭建

    了解到JAVA语言的跨平台性的原理是通过在不同的操作系统中安装对应版本的的JAVA虚拟机(JVM)实现 开发JAVA前必须先搭建JAVA环境: 1.JAVA开发工具包JDK(JAVA DEVELOPM ...

  7. jeecg随笔-3.X的生成后配置

    生成后按以上步骤进行配置即可.

  8. tensorflow 训练网络loss突然出现nan的情况

    1.问题描述:开始训练一切都是那么的平静,很正常! 突然loss变为nan,瞬间懵逼! 2.在网上看了一些解答,可能是梯度爆炸,可能是有关于0的计算.然后我觉得可能是关于0的吧,然后进行了验证. 3. ...

  9. python基础讲解部分&纯小白需要扎实基础

    第一章知识点 一.Python简介 ​ python的创始人为吉多·范罗苏姆(Guido van Rossum),在中国人称龟叔 ​ Python崇尚优美.清晰.简单 应用领域: ​ (1)云计算,写 ...

  10. webpack 配置之入门一

    webpack 是一个现代 Javascript 应用程序的模块打包器(module bundler ),它里面的功能比较多,核心模块可分为模块打包.代码分割与按需加载.这里只简单讲解下 webpac ...