如何在Flutter中将列表视图中的项目从一个类添加到另一个类?

时间:2020-09-11 22:21:41

标签: flutter dart

我正在做一个项目,其中有一个班级,该班级有两个孩子。一个孩子包含一个TabView和一个子类TabViewChild,我在其中生成一个gridview。另一方面,两个子包含一个listView。所以问题是,当我单击gridview项目时,我将该项目的值传递给静态列表,并将该列表传递给其他类的listview。但是我不知道如何在单击的项目上更改该类的状态,或者由于我是Flutter的新手,如何以更好的方式完成此任务。我希望当人们单击任何gridview的项目时,该项目同时出现在列表视图中。

class ItemMenus {

   int id;
   String code;
   String name;
   String salePrice;
   String photo;
   String categoryName;
   String percentage;
   int quantity;

  ItemMenus({this.id, this.code, this.name, this.salePrice, this.photo,
      this.categoryName, this.percentage, this.quantity});

  ItemMenus.fromJson(Map<String, dynamic> json)
  :
    id = int.parse(json['id']),
    code = json['code'],
    name = json['name'],
    salePrice = json['sale_price'],
    photo = json['photo'],
    categoryName = json['category_name'],
    percentage = json['percentage'];

  @override
  String toString() {
    return 'ItemMenus{id: $id, code: $code, name: $name, salePrice: $salePrice, photo: $photo, categoryName: $categoryName, percentage: $percentage}';
  }


}
import 'package:food_app/model/mdl_item_menus.dart';

class ItemMenuList{

  List<ItemMenus> _itmMenuLst = [];

  ItemMenuList._();
  static final ItemMenuList instanceItmMenuLst = ItemMenuList._();
  static ItemMenuList get instance => instanceItmMenuLst;

  void addItem(ItemMenus im){
    _itmMenuLst.add(im);
  }

  List<ItemMenus> get list => _itmMenuLst;

  @override
  String toString() {
    return 'ItemMenuList{_itmMenuLst: $_itmMenuLst}';
  }
}
import 'package:flutter/material.dart';
import 'package:food_app/database/tables/tbl_categories.dart';
import 'package:food_app/model/list/item_menu_list.dart';
import 'package:food_app/model/mdl_categories.dart';
import 'package:food_app/model/mdl_item_menus.dart';
import 'package:food_app/pos/tab_bar_view.dart';

class EPos extends StatefulWidget{

  @override
  _EPosState createState() => _EPosState();
}

class _EPosState extends State<EPos> {

  final categoryDBHelper = TblCategories.categoriesInstance;
  final ItemMenuList instance2 = ItemMenuList.instance;

  String _orderType = 'Dine-In', _info = 'Table No. 1', _userName = 'ZiaUddin';

  List<Categories> catLst = [];
  List<ItemMenus> itmLst = [];

  Future getCategories() async {
    catLst.clear();
    var categories = await categoryDBHelper.getCategories();
    categories.forEach((element) {
      catLst.add(Categories(
          id: element['id'],
          categoryName: element['category_name'],
          description: element['description'],
          userId: element['user_id'],
          companyId: element['company_id'],
          delStatus: element['del_status']));
    });
    catLst.forEach((element) {
      print(element);
    });
    return catLst;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // itmLst = instance2.list;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          //#region AppBar
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.15,
            color: Colors.redAccent,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: EdgeInsets.fromLTRB(8, 10, 0, 0),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  child: Row(
                    children: [
                      Icon(
                        Icons.arrow_back,
                        color: Colors.white,
                        size: 25,
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(4, 8, 10, 8),
                        child: Text(
                          _orderType,
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontFamily: 'Ubuntu',
                            letterSpacing: 2.0,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(8, 10, 0, 0),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.red,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(20, 8, 20, 8),
                    child: Text(
                      _info,
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        color: Colors.amberAccent,
                        fontFamily: 'Ubuntu',
                        letterSpacing: 2.0,
                      ),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 15, right: 5),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(30),
                    color: Colors.red,
                  ),
                  child: Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.fromLTRB(10, 8, 8, 8),
                        child: Text(
                          _userName,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.normal,
                            color: Colors.white,
                            fontFamily: 'Ubuntu',
                            letterSpacing: 1.0,
                          ),
                        ),
                      ),
                      CircleAvatar(
                        backgroundColor: Colors.red,
                        radius: MediaQuery.of(context).size.height * 0.041,
                        child: CircleAvatar(
                          radius: MediaQuery.of(context).size.height * 0.04,
                          backgroundImage: AssetImage('assets/user.png'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          //endregion
          Expanded(
            child: Row(
              children: [
                //# region Menu
                Flexible(
                  flex: 1,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.yellowAccent,
                      shape: BoxShape.rectangle,
                    ),
                    child: Column(
                      children: [
                        Expanded(
                          child: Container(
                            color: Colors.white,
                            child: FutureBuilder(
                                future: getCategories(),
                                builder: (context, snapShot) {
                                  if (snapShot.connectionState ==
                                          ConnectionState.none &&
                                      snapShot.hasData == null) {
                                    return Center(
                                        child: CircularProgressIndicator());
                                  }
                                  return MaterialApp(
                                    debugShowCheckedModeBanner: false,
                                    home: DefaultTabController(
                                      length: catLst.length,
                                      child: Scaffold(
                                        backgroundColor: Colors.white,
                                        appBar: PreferredSize(
                                          preferredSize:
                                              Size.fromHeight(kToolbarHeight),
                                          child: Container(
                                            height: MediaQuery.of(context)
                                                    .size
                                                    .height *
                                                0.1,
                                            child: TabBar(
                                              indicatorColor:
                                                  Colors.amberAccent,
                                              isScrollable: true,
                                              tabs: catLst
                                                  .map<Widget>((Categories c) {
                                                return Tab(
                                                  icon: Icon(
                                                    Icons.style,
                                                    color: Colors.amberAccent,
                                                    size: 15,
                                                  ),
                                                  child: Text(
                                                    c.categoryName
                                                        .toUpperCase(),
                                                    style: TextStyle(
                                                      color: Colors.black,
                                                      fontWeight:
                                                          FontWeight.w400,
                                                    ),
                                                  ),
                                                );
                                              }).toList(),
                                            ),
                                          ),
                                        ),
                                        body: TabBarView(
                                          children: catLst.map((Categories c) {
                                            return TabBarViewChild(categoryName:c.categoryName,
                                              callback: (){
                                              setState(() {
                                                instance2.addItem(ItemMenus(name: c.categoryName));
                                                itmLst = instance2.list;
                                                print('I am Callback');
                                              });
                                            },);
                                          }).toList(),
                                        ),
                                      ),
                                    ),
                                  );
                                }),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                //endregion
                //# region OrderList
                Flexible(
                  flex: 1,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.rectangle,
                    ),
                    child: ListView.builder(
                          itemCount: itmLst.length,
                          itemBuilder: (context, index){
                            return ListTile(
                              title: Text(itmLst[index].name),
                            );
                          },
                        ),
                  ),
                ),
                //endregion
              ],
            ),
          ),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:food_app/database/tables/tbl_item_menus.dart';
import 'package:food_app/model/list/item_menu_list.dart';
import 'package:food_app/model/mdl_item_menus.dart';
import 'package:food_app/pos/new_sale.dart';


class TabBarViewChild extends StatefulWidget {

    String categoryName;
    VoidCallback callback;
    TabBarViewChild({Key key,@required this.categoryName, this.callback}) : super(key:key);

  @override
  _TabBarViewChildState createState() => _TabBarViewChildState();
}

class _TabBarViewChildState extends State<TabBarViewChild> {

    final ItemMenuList instance1 = ItemMenuList.instance;

    List<ItemMenus> itmLst = [];

    final itemMenus = TblItemMenus.itemMenusInstance;

    Future getSpecificItemMenus() async{
      var items = await itemMenus.getSpecificItemMenus(widget.categoryName);
      itmLst.clear();
      items.forEach((e) {
        itmLst.add(ItemMenus(id: e['id'], categoryName: e['category_name'], code: e['code'],
        name: e['name'], percentage: e['percentage'], photo: e['photo'], quantity: e['quantity'],
        salePrice: e['sale_price']));
      });
      for (var value in itmLst) {
        print(value);
      }
      return itmLst;
    }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      child: FutureBuilder(
        future: getSpecificItemMenus(),
        builder: (context, snapShot) {
          if (snapShot.connectionState == ConnectionState.none
              && snapShot.hasData == null) {
            return Center(child: CircularProgressIndicator());
          }
          return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              scrollDirection: Axis.vertical,
              itemCount: itmLst.length,
              itemBuilder: (context, index){
                return Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: InkWell(
                    child: Card(
                      elevation: 4,
                      color: Colors.amberAccent,
                      child: Center(
                        child: Text(
                          itmLst[index].name.toUpperCase(),
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.red,
                            fontSize: 13,
                            fontWeight: FontWeight.w700,
                            fontFamily: 'Ubuntu',
                            letterSpacing: 1.0,
                          ),
                        ),
                      ),
                    ),
                    onTap: (){
                      // Provider.of<ProItemMenus>(context, listen: false).addNewItemInList(ItemMenus(name: itmLst[index].name.toUpperCase()));
                      instance1.addItem(ItemMenus(categoryName: itmLst[index].name.toUpperCase()));
                      print(itmLst[index].name.toUpperCase());
                    },
                  ),
                );
              }
          );
        }
      ),
    );
  }
}

enter image description here

1 个答案:

答案 0 :(得分:0)

所以现在的问题是,有两个有状态的小部件。

当我们要在它们之间共享datastate时,基本上我们需要有更多的一个有状态Widget,它将成为它们的父级。 / p>

enter image description here

此术语称为这个问题,称为State Management

当前有许多知名的State Management,例如Provider和Bloc。 Reference

但是我个人建议使用Provider,它具有简单的语法和概念。