按下可扩展列表视图项目按钮可更改所有列表视图项目中的值

时间:2019-08-19 16:55:46

标签: flutter dart

我想在按下可扩展列表视图内部的增加按钮后增加特定项目的值,但是这会影响子类别名称值的所有列表视图项目。

这是我想出的一些代码。我不知道我在哪里犯了错误,即使它在statefulwidget中也是如此。欢迎提出建议。任何想法..?

the screenshot of my current output

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

class SubService extends StatefulWidget {
  String strCatId;
  SubService({Key key, @required this.strCatId}) : super(key: key);
  @override
  SubServiceState createState() => new SubServiceState(strCatId);
}

class SubServiceState extends State<SubService> {
  List lessons; 
  List data;
  SubService sModel;
  RestDatasource api = new RestDatasource();
  int _n = 0;

  var subService = new List<SubServices>();
  String strCatId;

  void add() {
    setState(() {
      _n++;
    });
  }

  void minus() {
    setState(() {
      if (_n != 0) _n--;
    });
  }

  SubServiceState(String strCatId) {
    strCatId = strCatId;
    RestDatasource.getSubServices(strCatId).then((response) {
      setState(() {
        Iterable list = json.decode(response.body);
        subService = list.map((model) => SubServices.fromJson(model)).toList();
      });
    });
  }
 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Sub services'),
        backgroundColor: Colors.deepOrange,
      ),
      backgroundColor: Colors.white,
      body: new ListView.builder(
        itemCount: subService == null ? 0 : subService.length,
        itemBuilder: (context, i) {
          return new ExpansionTile(
            title: new Text(
              subService[i].getsubcategoryName,
            ),
            children: <Widget>[
              new Column(
                 children: _buildExpandableContent(subService[i].getsubService),
                  // BottomAppBar(child: Text('Bottom bar'),),

                ),

            ],
          );
        },
      ),
    );
  }

  _buildExpandableContent(List<Subservicename> sub) {
    List<Widget> columnContent = [];

    for (Subservicename content in sub)
      columnContent.add(
        new Container(
          child: new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              // mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                 Align(
      alignment: Alignment.topLeft,
               child : Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 40),
                  child: Text(
                    content.getsubservicename,
                    style: new TextStyle(fontSize: 14.0),
                  ),
                ),
                 ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 40),
                  child: SizedBox(
                    height: 25.0,
                    child: new FloatingActionButton(
                      onPressed: minus ,
                      child: new Icon(
                        const IconData(0xe15b, fontFamily: 'MaterialIcons'),
                        color: Colors.red,
                        size: 15.0,
                      ),
                      backgroundColor: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 40),
                  child: new Text('$_n', style: new TextStyle(fontSize: 14.0)),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 40),
                  child: SizedBox(
                    height: 25.0,
                    child: new FloatingActionButton(
                      onPressed: add,
                      child: new Icon(
                          Icons.add,
                          color: Colors.red,
                          size: 15.0),
                      backgroundColor: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    return columnContent;
  }
}

2 个答案:

答案 0 :(得分:0)

之所以会发生这种情况,是因为实际上您只有一个整数作为SubServiceState中定义的引用

class SubServiceState extends State<SubService> {
  List lessons; 
  ...

  int _n = 0; // you only have one _n

尽管以编程方式构建columnContent,该应用仍会始终查找变量_n的一个memory address

for (Subservicename content in sub)
      columnContent.add(
        new Container(
          child: new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,

              ...
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 0, 40),
                child: new Text('$_n', style: new TextStyle(fontSize: 14.0)),
              ),

解决方案

  1. 您需要将columnContent.add()中的所有窗口小部件移动到新的有状态窗口小部件。然后,它们每个都有其自己的_n属性引用。或..

  2. 将int _n更改为另一种类型,例如与您的有效负载结构相对应的List<Map>Map<List>

答案 1 :(得分:0)

按照Ejabu的方法,我对其进行了修改以满足自己的需求。我需要在我的Subservicename模型中添加计数器,并在其中增加它。

添加产品

_addProduct(int index) {
setState(() {
  content.getcounter++;
});

显示值

child : new Text('${content.getcounter}',

与删除产品相同。

onPressed: () => setState((){ if (content.getcounter != 0) content.getcounter--;}),