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; }); }

      最终效果如下:

      

  • 相关阅读:
    黑马java课程2222
    屏幕亮度软件和一些自己必用的软件设置
    ahk保存
    天天洗一次澡还真是好方法
    自动化测试 就这两张图
    python __init__.py用途
    bash检查文件格式
    cygwin中运行命令提示command not found的解决方法
    Python批量插入SQL Server数据库
    怎样去掉FireFox的导入向导
  • 原文地址:https://www.cnblogs.com/wupeng88/p/10818298.html
Copyright © 2011-2022 走看看