Как зациклить объекты внутри списка в ListView.Builder

#flutter #dart #flutter-layout

#flutter #dart #flutter-макет

Вопрос:

Я выполняю цикл по элементам списка в ListView.builder

 List _rBoxes = new List();//declare
 

данные, которые я хочу зациклить, выглядят примерно так:

 {    
    "box_content": {
        "box_1": [
            {
                "id": "9",
                "name": "abc"
            },
            {
                "id": "10",
                "name": "xyz"
            }
        ],
        "box_2": [
            {
                "id": "8",
                "name": "acc"
            }
        ],
        "box_3": [
            {
                "id": "1",
                "name": "abc"
            }
        ],
        "box_4": [
            {
                "id": "4",
                "name": "amno"
            },
            {
                "id": "6",
                "name": "jkl"
            }
        ],
        "box_5": [
            {
                "id": "7",
                "name": "xre"
            }
        ]
    }    
}
 

затем я добавляю эти элементы в список

 _rBoxes.addAll(data['box_content']);//it gives error - Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'Iterable<dynamic>'
 

//дизайн виджета

 ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: _rBoxItems.length,
                        itemBuilder: (BuildContext context, int index) {
                          return Text("${_rBoxItems[index]}",
                              style: TextStyle(fontSize: 20.0));
                        })
 

Ошибка :
//здесь я хочу зациклить индекс box_1 (только) в представлении списка, как этого добиться, если я выдал
_rBoxItems['box_1'].length сообщение об ошибке. фактически я застрял в этом сценарии, помогите мне решить эту проблему.

Комментарии:

1. _rBoxes.addAll(data['box_content']); Вы хотите добавить все к rBoxes ?

Ответ №1:

Сначала вам нужно создать Data модель для преобразования ваших данных json в модель, Data класс должен выглядеть следующим образом,

 class Data {
  BoxContent boxContent;

  Data({this.boxContent});

  Data.fromJson(Map<String, dynamic> json) {
    boxContent = json['box_content'] != null
        ? new BoxContent.fromJson(json['box_content'])
        : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.boxContent != null) {
      data['box_content'] = this.boxContent.toJson();
    }
    return data;
  }
}

class BoxContent {
  List<Box> box;

  BoxContent({this.box});

  BoxContent.fromJson(Map<String, dynamic> json) {
    if (json['box'] != null) {
      box = new List<Box>();
      json['box'].forEach((v) {
        box.add(new Box.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.box != null) {
      data['box'] = this.box.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Box {
  String id;
  String name;

  Box({this.id, this.name});

  Box.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  }
}
 

Затем проанализируйте данные json в вашей Data модели, например,

 import 'dart:convert';  // import this


String jsonData = "{ ... }" // your json as string

Data _data= Data.fromJson(jsonDecode(jsonData));
 

Наконец, вы можете достичь того, что вам требовалось,

 ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    itemCount: _rBoxItems.length,
    itemBuilder: (BuildContext context, int index) {
        return Text(_data.boxContent.box[index].length.toString(),
            style: TextStyle(fontSize: 20.0),
        );
}),
 

Примечание: вы можете просто сгенерировать модели для анализа из данных json здесь

Ответ №2:

Я думаю, вы хотите повторить контекст окна. Если вы извлекаете данные из API, сначала вы должны создать свои модели данных, и для этого вы можете использовать app.quicktype.io это работает очень хорошо для dart. Когда я добавляю туда содержимое вашего Box_1, оно дает мне такой объект. введите описание изображения здесь

После создания ваших моделей данных. Вы можете использовать эту функцию для получения объекта из строки json и преобразования их в список. Box.fromJson(String str) => Box.fromMap(json.decode(str));

Ответ №3:

потому что вы data['box_content'] — это карта, но _rBoxes.addAll нужен список, поэтому он сообщит об ошибке:

 Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'Iterable<dynamic>
 

вы должны преобразовать data['box_content'] в список, например:

 _rBoxes.addAll(data['box_content'].entries.map((entry) => { entry.key, entry.value }).toList());
 

надеюсь, полезно ^_^

Комментарии:

1. да, ошибка устранена, но я хочу зациклить только объект box_1 в построителе представления списка, в настоящее время он зацикливает полный объект внутри box_content. @hysunny

2. хорошо ~ На самом деле, это легко получить box_1 после преобразования карты в список , вы можете использовать List[0] .

3. вы имеете в виду следующее: ListView.builder(ItemCount: _rBoxItems[0].длина,itemBuilder: (BuildContext context, int index) { возвращаемый текст(_rBoxItems[0][index].toString()); })