Flutter--動態加載Checkbox(CheckboxListTile)

場景 : 從數據庫獲取到數據 需要將數據加載到頁面上,而且還可以進行多選,並保存數據。

實現效果:在這裏插入圖片描述
詳細代碼:

import 'dart:core';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
class UserInfo{
  String Name;
  int Id;
  bool isSelected;
  UserInfo({this.Name,this.Id,this.isSelected=false});
}



class MyApp extends StatelessWidget {


  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: 'CheckBoxListTitle組件',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('CheckBoxListTitle組件'),
        ),
        body:SingleChildScrollView(
          child:  DemoPage(),
        ),

      ),
    );
  }
}

class DemoPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => DemoPageState();
}

class DemoPageState extends State<DemoPage> {
  List<UserInfo> userMapList=new List();

  List<String> selName=new List();
  List<String> selIds=new List();

  @override
  void initState() {
    // TODO: implement initState
    addUser();
  }

  addUser(){

    for(int i=0;i<=8;i++){
      UserInfo  u =new UserInfo();

       u.Name="A$i";
       u.Id=i;


       userMapList.add(u);
    }
  }

  @override
  Widget build(BuildContext context) {

    return Column(

      children: <Widget>[
        Column(
            children: userMapList.map((f){
              return Column(
                children: <Widget>[


                  Container(
                    child: CheckboxListTile(
                      value: f.isSelected,
                      onChanged: (bool){
                        setState(() {
                          f.isSelected=!f.isSelected;
                          //保存已選中的
                          if(f.isSelected){
                            if(!selName.contains(f.Name))
                              selName.add(f.Name);
                            if(!selIds.contains(f.Id.toString()))
                              selIds.add(f.Id.toString());

                          }//刪除
                          else{
                            if(selName!=null && selName.contains(f.Name))
                              selName.remove(f.Name);
                            if(selIds!=null && selIds.contains(f.Id.toString()))
                              selIds.remove(f.Id.toString());
                          }
                        });

                      },
                      title: Text(f.Name),
                      controlAffinity: ListTileControlAffinity.platform,
                      activeColor: Colors.green,
                    ),
                  ),


                ],
              );

            }).toList()// <Widget>[

          //],
        ),


        Container(
          color: Colors.grey[100],
          height: 20,
        ),

        Column(

          children: <Widget>[

            Container(height: 30,

              child: Text("選中Name:"+selName.join(","),style: TextStyle(color:Colors.red),),
            ),

            Container(
              height: 30,
            child: Text("選中Id:"+selIds.join(","),style: TextStyle(color:Colors.green)),
            )
          ],




        ),
      ],

    );
  }
}

有問題可留言!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章