zoukankan      html  css  js  c++  java
  • flutter 按钮单选封装

    数字是自己先写死的

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

    使用了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; }); }

      最终效果如下:

      

  • 相关阅读:
    关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项
    关于用Cocos2d-x.3.10运行别人游戏项目的步骤
    jq 获取select text
    one thinkphp 文档
    tp 大致执行流程
    mysql 命令行导入mysql语句
    htmt 5 素材
    er图 画图工具
    php zend studio 如何导入已经存在的项目
    php 获取当前域名
  • 原文地址:https://www.cnblogs.com/wupeng88/p/10818298.html
Copyright © 2011-2022 走看看