Flutter學習(8)——CheckBox多選框使用及動態更改多選框資料

one發表於2021-08-10

Flutter

原文地址:Flutter學習(8)——CheckBox多選框使用及動態更改多選框資料 | Stars-One的雜貨小窩

最近專案需求需要調整頁面,記錄一下實現過程

這次主要是要實現個評價頁面,選擇不同的星級顯示不同的多選框資料,加上之前也沒有使用過CheckBox,今天便是一起講吧

本篇程式碼github

效果預覽

效果看似有點複雜,我們一步步來實現吧 ?

1.星級元件使用

首先,我們有使用到星級評分元件在pubspec.yaml檔案中新增下面依賴

flutter_simple_rating_bar: ^0.0.3

使用的話頁面也是有個例子介紹,我們直接拿來即可使用

RatingBar(
		//預設選擇5星
		rating: 5,
        //總星星數目
        starCount: 5,
        //星星圖示
        icon: Icon(
            Icons.star,
            size: 40,
            color: Colors.grey,
        ),
        spacing: 5.0,
        size: 40,
        isIndicator: false,
        //是否可選半星
        allowHalfRating: true,
        onRatingCallback:(double value, ValueNotifier<bool> isIndicator) {
	        //value是點選後選中的星星數(即評分),範圍為1-rating(我們上面rating為5)
            
        },
        color: Colors.amber,
)

現在我們要根據選擇⭐的數目不同,從而顯示不同的文字,這過程是動態的,所以我們選擇使用StatefulWidget作為頁面繼承的基類

我們先在State類中加上相應的資料,如下所示

//顯示的文字資訊
List typeList = ["非常不滿意", "不滿意", "基本滿意", "滿意", "非常滿意"];

//當前選擇type的下標
int selectType = 4;

我們文字顯示內容是typeList[selectType],我們在星級評分選擇的回撥函式,更改selecType即可實現更改UI的功能

Column(
    children: [
        RatingBar(
            rating: 5,
            //預設選擇5星
            starCount: 5,
            //總星星數目
            //星星圖示
            icon: Icon(
                Icons.star,
                size: 40,
                color: Colors.grey,
            ),
            spacing: 5.0,
            size: 40,
            isIndicator: false,
            //是否可選半星
            allowHalfRating: true,
            onRatingCallback:
            (double value, ValueNotifier<bool> isIndicator) {
                //更改資料同時也要更改UI,所以使用setState方法
                setState(() {
                    //注意 星級從1開始,selectType是下標,從0開始,需要減1
                    selectType = value.toInt() - 1;
                });
            },
            color: Colors.amber,
        ),
        //取指定下標的文字內容展示
        Text(typeList[selectType])
    ],
)

2.多選框使用及資料更改

CheckBox多選框的使用需要定義一個bool型別的資料,每次點選需要更改此資料來改變CheckBox的選擇狀態

由於我們是使用的列表資料，所以每個資料寫個變數不太現實,而且繁瑣,所以可以考慮在實體類中加個bool型別的欄位,用來儲存CheckBox選擇的狀態

這裡,資料我就暫且寫死,實際上是要通過呼叫介面獲取的

void initTagData() {
    var data = """{
    "code":200,
    "error":"",
    "ReturnValue":[{"generalstars":"1","tagid":"109759610348409856","tagname":"無理由超過法定辦理時間","updatetime":"2020-06-12 17:38:00"},{"generalstars":"1","tagid":"6176177900787350","tagname":"在辦事指南之外增加新的審批條件","updatetime":"2020-08-27 00:00:00"},{"generalstars":"1","tagid":"6176177900787351","tagname":"需提供辦事指南之外的申報材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"1","tagid":"7176177890787535","tagname":"無理由超過法定辦理時間","updatetime":"2020-08-27 00:00:00"},{"generalstars":"2","tagid":"6176177900787349","tagname":"未在承諾時間內辦結","updatetime":"2020-08-27 00:00:00"},{"generalstars":"2","tagid":"6176177900787347","tagname":"沒有提供材料樣本","updatetime":"2020-08-27 00:00:00"},{"generalstars":"2","tagid":"6176177900787348","tagname":"沒有提供材料清單","updatetime":"2020-08-27 00:00:00"},{"generalstars":"3","tagid":"119596473292723200","tagname":"22222","updatetime":"2020-06-12 17:38:00"},{"generalstars":"3","tagid":"6176177900787346","tagname":"在承諾的時間內辦結","updatetime":"2020-08-27 00:00:00"},{"generalstars":"3","tagid":"6176177900787345","tagname":"提供申報材料樣本","updatetime":"2020-08-27 00:00:00"},{"generalstars":"3","tagid":"6176177900787344","tagname":"一次性告知需要補正的材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"4","tagid":"6176177900787340","tagname":"填寫一張表單就可以完成申報","updatetime":"2020-08-27 00:00:00"},{"generalstars":"4","tagid":"6176177900787341","tagname":"線上提交材料視窗核驗","updatetime":"2020-08-27 00:00:00"},{"generalstars":"4","tagid":"6176177900787342","tagname":"一張清單告知全部申報材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"5","tagid":"7176177890787335","tagname":"一窗受理一次辦結","updatetime":"2020-08-27 00:00:00"},{"generalstars":"5","tagid":"7176177890787235","tagname":"可以先受理後補材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"5","tagid":"7176177890787435","tagname":"不用提交證明","updatetime":"2020-08-27 00:00:00"}]
    }""";
    Map<String, dynamic> responseData = jsonDecode(data);
    var tagListModel = TagListModel.fromJson(responseData);
    if (tagListModel.code == 200) {
      //注意要使用setState,才會使UI發生變化(因為網路請求是耗時任務,可能介面渲染完畢後才能請求到資料)
      setState(() {
        tagList.addAll(tagListModel.tagItems);
      });
    }
  }

TagListModel是生成的實體類,生成的步驟已經在上篇文章講解到,這裡就不在贅述了

按照上面說的思路,我們在TagListModel的實體類中(其實是在TagItem中),新增一個bool型別的欄位,用來作為儲存CheckBox選擇的狀態,

這裡使用外掛生成的實體類(TagListModel裡面還包含有個實體類),原本應該是ReturnValue,但為了方便,我將其改了個名字TagItem

Flutter中的CheckBox是隻有一個框,並不包含文字,所以我們得組合一個文字,拼成一個Widget,_tagView()這個方法就是每個選項

Widget _tagView(item) {
    var str = item.tagname;
    return InkWell(
        child: Row(
            children: <Widget>[
                Checkbox(
                    value: item.flag,
                    activeColor: Colors.blue,
                    onChanged: (bool val) {
                        // val 是布林值
                        this.setState(() {
                            item.flag = val;
                        });
                    },
                ),
                Text(str),
            ],
        ),
        onTap: () {
            setState(() {
                item.flag = !item.flag;
            });
        },
   );

這裡最外層使用了InkWell,是因為其有onTag的點選事件方法 點選整行都可以去改變CheckBox的狀態,使用者體驗比較友好,如果沒有的話,只能點選CheckBox的框來改變狀態

有了上面的一個子項,現在我們需要構建一個多選選項列表(列表包含N個_tagView元件)

先宣告兩個陣列,用來存放資料

//標籤資料(存放所有資料)
List<TagItem> tagList = [];

//臨時存放的資料,後面評價提交需要
List<TagItem> tempTagList = [];

這裡為什麼需要兩個陣列呢?

主要是考慮到後面需要獲取勾選的資料,所以才考慮再多加一個臨時的列表

每次改變星級的時候,列表選項的資料就會改變,之後我們只需要去這個臨時列表中篩選狀態為true的資料即可

List<Widget> _tagList() {
    List<Widget> widgetList = [];
    var list = this.tagList;
    tempTagList.clear();

    var star = selectType.toInt() + 1;
    //匹配相同星級資料
    for (var i = 0; i < list.length; i++) {
      var item = list[i];
      if (item.generalstars == star.toString()) {
        //存在臨時表中,之後可以快速查詢使用者的選擇
        tempTagList.add(item);
        var row = _tagView(item);
        widgetList.add(row);
      }
    }
    return widgetList;
}

由於資料較少,可以使用Column用來包裹上面的元件_tagList

//標籤選項
Container(
    decoration: BoxDecoration(color: Colors.white),
    padding: EdgeInsets.fromLTRB(10, 0, 15, 5),
    child: Column(
    	children: _tagList(),
    )
)

由於提交標籤需要傳標籤的id,而且需要逗號隔開,所以需要遍歷臨時選項列表,處理一下即可

//處理標籤
var tagId = "";
for (var i = 0; i < tempTagList.length; i++) {
    var item = tempTagList[i];
    //查詢選擇的標籤資料
    if (item.flag) {
        tagId += item.tagid + ",";
    }
}
if (tagId.length>0) {
	tagId = tagId.substring(0, tagId.length - 1);
}
print(tagId);

原始碼

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_demo/model/tag_list_model.dart';
import 'package:flutter_simple_rating_bar/flutter_simple_rating_bar.dart';

class CheckBoxPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new CheckBoxState();
  }
}

class CheckBoxState extends State<CheckBoxPage> {
  //標籤資料
  List<TagItem> tagList = [];

  //臨時標籤,後面評價提交需要
  List<TagItem> tempTagList = [];

  List typeList = ["非常不滿意", "不滿意", "基本滿意", "滿意", "非常滿意"];

  //當前選擇type的下標
  int selectType = 4;

  @override
  void initState() {
    //初始化資料(這裡是暫時寫死,實際中這裡是呼叫介面)
    initTagData();
  }

  void initTagData() {
    var data = """{
    "code":200,
    "error":"",
    "ReturnValue":[{"generalstars":"1","tagid":"109759610348409856","tagname":"無理由超過法定辦理時間","updatetime":"2020-06-12 17:38:00"},{"generalstars":"1","tagid":"6176177900787350","tagname":"在辦事指南之外增加新的審批條件","updatetime":"2020-08-27 00:00:00"},{"generalstars":"1","tagid":"6176177900787351","tagname":"需提供辦事指南之外的申報材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"1","tagid":"7176177890787535","tagname":"無理由超過法定辦理時間","updatetime":"2020-08-27 00:00:00"},{"generalstars":"2","tagid":"6176177900787349","tagname":"未在承諾時間內辦結","updatetime":"2020-08-27 00:00:00"},{"generalstars":"2","tagid":"6176177900787347","tagname":"沒有提供材料樣本","updatetime":"2020-08-27 00:00:00"},{"generalstars":"2","tagid":"6176177900787348","tagname":"沒有提供材料清單","updatetime":"2020-08-27 00:00:00"},{"generalstars":"3","tagid":"119596473292723200","tagname":"22222","updatetime":"2020-06-12 17:38:00"},{"generalstars":"3","tagid":"6176177900787346","tagname":"在承諾的時間內辦結","updatetime":"2020-08-27 00:00:00"},{"generalstars":"3","tagid":"6176177900787345","tagname":"提供申報材料樣本","updatetime":"2020-08-27 00:00:00"},{"generalstars":"3","tagid":"6176177900787344","tagname":"一次性告知需要補正的材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"4","tagid":"6176177900787340","tagname":"填寫一張表單就可以完成申報","updatetime":"2020-08-27 00:00:00"},{"generalstars":"4","tagid":"6176177900787341","tagname":"線上提交材料視窗核驗","updatetime":"2020-08-27 00:00:00"},{"generalstars":"4","tagid":"6176177900787342","tagname":"一張清單告知全部申報材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"5","tagid":"7176177890787335","tagname":"一窗受理一次辦結","updatetime":"2020-08-27 00:00:00"},{"generalstars":"5","tagid":"7176177890787235","tagname":"可以先受理後補材料","updatetime":"2020-08-27 00:00:00"},{"generalstars":"5","tagid":"7176177890787435","tagname":"不用提交證明","updatetime":"2020-08-27 00:00:00"}]
    }""";
    Map<String, dynamic> responseData = jsonDecode(data);
    var tagListModel = TagListModel.fromJson(responseData);
    if (tagListModel.code == 200) {
      //注意要使用setState,才會使UI發生變化(因為網路請求是耗時任務,可能介面渲染完畢後才能請求到資料)
      setState(() {
        tagList.addAll(tagListModel.tagItems);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("評價"),
      ),
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.white),
            padding: EdgeInsets.fromLTRB(15, 0, 15, 10),
            child: Wrap(
              spacing: 10,
              children: [
                Center(
                  child: Column(
                    children: [
                      RatingBar(
                        rating: 5,
                        //預設選擇5星
                        starCount: 5,
                        //總星星數目
                        //星星圖示
                        icon: Icon(
                          Icons.star,
                          size: 40,
                          color: Colors.grey,
                        ),
                        spacing: 5.0,
                        size: 40,
                        isIndicator: false,
                        //是否可選半星
                        allowHalfRating: true,
                        onRatingCallback:
                            (double value, ValueNotifier<bool> isIndicator) {
                          //更改資料同時也要更改UI,所以使用setState方法
                          setState(() {
                            //注意 星級從1開始,selectType是下標,從0開始,需要減1
                            selectType = value.toInt() - 1;
                          });
                        },
                        color: Colors.amber,
                      ),
                      _tipText()
                    ],
                  ),
                )
              ],
            ),
          ),
          //標籤選項
          Container(
              decoration: BoxDecoration(color: Colors.white),
              padding: EdgeInsets.fromLTRB(10, 0, 15, 5),
              child: Column(
                children: _tagList(),
              )),
          Container(
              decoration: BoxDecoration(color: Colors.white),
              padding: EdgeInsets.fromLTRB(10, 0, 15, 5),
              child: FlatButton(
                child: Text("提交"),
                onPressed: () {
                  //處理標籤
                  var tagId = "";
                  for (var i = 0; i < tempTagList.length; i++) {
                    var item = tempTagList[i];
                    //查詢選擇的標籤資料
                    if (item.flag) {
                      tagId += item.tagid + ",";
                    }
                  }
                  if (tagId.length>0) {
                    tagId = tagId.substring(0, tagId.length - 1);
                  }
                  print(tagId);
                },
              )),
        ],
      ),
    );
  }

  Widget _tipText() {
    //根據selectType變更UI
    return Text(typeList[selectType]);
  }

  List<Widget> _tagList() {
    List<Widget> widgetList = [];
    var list = this.tagList;
    tempTagList.clear();

    var star = selectType.toInt() + 1;
    for (var i = 0; i < list.length; i++) {
      var item = list[i];
      if (item.generalstars == star.toString()) {
        //存在臨時表中,之後可以快速查詢使用者的選擇
        tempTagList.add(item);
        var row = _tagView(item);
        widgetList.add(row);
      }
    }
    return widgetList;
  }

  Widget _tagView(item) {
    var str = item.tagname;
    return InkWell(
      child: Row(
        children: <Widget>[
          Checkbox(
            value: item.flag,
            activeColor: Colors.blue,
            onChanged: (bool val) {
              // val 是布林值
              this.setState(() {
                item.flag = val;
              });
            },
          ),
          Text(str),
        ],
      ),
      onTap: () {
        setState(() {
          item.flag = !item.flag;
        });
      },
    );
  }
}

C++ Qt開發：CheckBox多選框元件
2023-12-13
C++QT元件
jQuery操作單選框、多選框是否選中問題
2018-01-31
jQuery
原生js多選框選中排序及刪除
2018-10-30
JS排序
ElementUI的Table表格新增自定義頭CheckBox多選框
2020-12-21
UI
elementUI radio修改單選框多選框選中樣式及自定義其他樣式。
2020-11-05
UI
jQuery自定義多選下拉框
2017-12-25
jQuery
直播軟體原始碼，選項提供多選專案，彈出多選框
2022-03-24
原始碼
JS_多選框全選與取消全選的實現
2017-07-07
JS
Swing 自定義JTable 多選框自動選擇的錯誤
2019-01-18
php+js中多選項（複選）框的檢測
2006-09-12
PHPJS
使用Jquery和Ajax的動態依賴選擇框
2019-06-25
jQuery
jQuery 利用萬用字元獲取多選框選中的值
2019-06-25
jQuery字元
利用純 CSS3 定製單選/多選框樣式
2018-12-06
CSSS3
讓前端的下拉框支援單選、多選及全選，後臺MyBaits解決方案
2021-10-01
前端AI
Angular實現虛擬滾動多選下拉框筆記
2019-03-16
Angular筆記
BootStrap的動態模態框及靜態模態框
2018-08-13
boot
JSTL動態載入單選框--【ssnc】
2015-12-24
JS
Flutter實現自定義篩選框
2021-07-12
Flutter
Flutter 基礎控制元件篇-->單選框(Switch)、核取方塊(Checkbox)
2019-10-04
Flutter控制元件
如何利用框選工具獲取多邊形範圍？
2017-02-04
jQuery 動態載入下拉框選項（Django）
2018-12-20
jQueryDjango
ant design模態框中使用Select元件下拉選框不顯示
2020-07-07
元件
tkinter中checkbutton多選框控制元件和variable用法（六）
2018-04-10
控制元件
C#實現的下拉多選框，下拉多選樹，多級節點
2024-04-08
C#
elementUI 多級選單動態渲染
2018-08-28
UI
點選文字框實現文字框內容選中效果
2017-03-24
Flutter 自定義輸入框Selection選單和選擇器
2019-08-05
Flutter
下拉選單框和滾動條
2018-09-07
使用 ATX 判斷單選框選中狀態、開關狀態、圖示型別
2020-12-21
型別
jQuery兩個選擇框的邊框變化小練習
2017-10-14
jQuery
生成下拉框、複選、單選框的幾個類，支援資料庫結果集生成 (轉)
2007-08-17
資料庫
php獲取全選checkbox多個值
2016-06-10
PHP
使用Vue實現下拉選單框批量新增選項
2020-01-18
Vue
Flutter | 超實用簡單選單彈出框 PopupMenuButton
2019-08-05
Flutter
點選文字框彈出可供選擇的checkbox核取方塊程式碼例項
2017-03-18
Java選擇框和單選按鈕
2018-02-04
Java
bootstrap23-選擇框
2017-11-12
boot
全選或者單選checkbox的值動態新增到div
2017-09-22

Flutter學習(8)——CheckBox多選框使用及動態更改多選框資料

效果預覽

1.星級元件使用

2.多選框使用及資料更改

原始碼

相關文章