Как добавить элемент списка в FutureBuilder ListView без перезагрузки данных с удаленного сервера? [Flutter]

Я новичок в flutter, я хотел бы знать, как добавить список элементов динамически в ListView без перезагрузки данных в FutureBuilder. Когда я добавляю элемент в ListView, он дублирует список, а затем добавляет элемент в этот список.

Следующий код включает класс модели под названием Job.

JobListView - это виджет с отслеживанием состояния, который включает динамический ListView.

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart';
class Job {
  @required
  String company;
  String description;
  String employmentType;
  int id;
  String location;
  String position;
  List<String> skillsRequired;


  Job(
      this.company,
      this.description,
      this.employmentType,
      this.id,
      this.location,
      this.position,
      this.skillsRequired);

  Job.fromJson(Map<String, dynamic> json) {
    company = json['company'];
    description = json['description'];
    employmentType = json['employmentType'];
    id = json['id'];
    location = json['location'];
    position = json['position'];
    if (json['skillsRequired'] != null) {
      skillsRequired = new List<String>();
      json['skillsRequired'].forEach((v) {
        skillsRequired.add(v);
      });
    }
  }
}

class JobListView extends StatefulWidget {
  @override
  _JobListViewState createState() => _JobListViewState();
}

class _JobListViewState extends State<JobListView> {
  List<Job> data =  List<Job>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Job>>(
        future: _getJob(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            data  = snapshot.data;
            return _listViewFormat(data);
          } else if (snapshot.hasError) {
            return Container();
          }
          return Center(
            child: Container(
              width: 50,
              height: 50,

              child: CircularProgressIndicator(),
            ),
          );
        },
      ) ,

      floatingActionButton: (FloatingActionButton(child: Icon(Icons.add),onPressed: (){
        setState(() {
          var j =  Job("CompanyX","Eng.5 position","Full-time",0,"Cairo","Senior",null);
          data.add(j);
        });
      },)),
    );
  }
}

ListView _listViewFormat(List<Job> data) {
  return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return _tile(data[index].position, data[index].description, Icons.work);
      });
}

ListTile _tile(String title, String subtitle, IconData iconData) {
  return ListTile(
    title: Text(title, style: TextStyle(fontSize: 20)),
    subtitle: Text(
      subtitle,
      style: TextStyle(fontSize: 12),
    ),
    leading: Icon(iconData),
    trailing: Icon(Icons.arrow_right),
  );
}

Future<List<Job>> _getJob() async {
  String baseUrl = 'https://mock-json-service.glitch.me';
  var response = await get(baseUrl);
  if (response.statusCode == 200) {
    List jsonResponse = json.decode(response.body);
    return jsonResponse.map((job) => new Job.fromJson(job)).toList();
  }
}

flutter flutter-futurebuilder
person MustafaKhaled    schedule 26.10.2020    source источник
comment
Flutter предоставляет ListView.builder; конструктор ListView, который позволяет нам создавать список с отложенной загрузкой, где записи создаются только тогда, когда мы прокручиваем их вниз   -  person Ashok    schedule 26.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Ознакомьтесь с дополнительным объяснением Как бороться с нежелательной сборкой виджета?

если будущие изменения вы увидите изменения

Переместите метод _getJob внутри initState следующим образом:

class _JobListViewState extends State<JobListView> {
  List<Job> data =  List<Job>();
  Future<List<Job>> getJobFuture;

  @override
  void initState() {
    super.initState();
    getJobFuture = _getJob();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Job>>(
        future: getJobFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            data  = snapshot.data;
            return _listViewFormat(data);
          } else if (snapshot.hasError) {
            return Container();
          }
          return Center(
            child: Container(
              width: 50,
              height: 50,

              child: CircularProgressIndicator(),
            ),
          );
        },
      ) ,

      floatingActionButton: (FloatingActionButton(child: Icon(Icons.add),onPressed: (){
        setState(() {
          var j =  Job("CompanyX","Eng.5 position","Full-time",0,"Cairo","Senior",null);
          data.add(j);
        });
      },)),
    );
  }
}
person Ninja    schedule 26.10.2020