如何使用flutter +（bloc）模式在body属性中加载数据答案

【问题标题】：How to load data in the body property using flutter + (bloc) Pattern如何使用flutter +（bloc）模式在body属性中加载数据
【发布时间】：2020-04-26 03:58:34
【问题描述】：

朋友们好，

我已经学习使用 Flutter 数周了，我正在创建一个应用程序，我在学习使用 Flutter 编程时开发该应用程序。

我的想法是能够遵循模式 (BLoC)。我现在要做的就是能够将电影数据列表加载到body属性中的home.dart文件中

感谢您的帮助！

home.dart

import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/material.dart';
import 'package:skyshowapp/styles/theme.dart' as Style;


class HomeScreen extends StatefulWidget{
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Style.Colors.mainColor,
      appBar: AppBar(
        backgroundColor: Style.Colors.mainColor,
        centerTitle: true,
        leading: Icon(EvaIcons.menu2Outline , color: Colors.white),
        title: Text("SKYSHOW APP"),
        actions: <Widget>[
          IconButton(icon: Icon(EvaIcons.searchOutline , color: Colors.white,), onPressed: null,)
        ],
      ),
      body: ListView(
        children: <Widget>[

        ],
      ),
    );
  }
}

movie_bloc.dart

import 'package:rxdart/subjects.dart';
import 'package:skyshowapp/model/movie.dart';
import 'package:skyshowapp/repository/repository.dart';

class MovieListBloc{
  final MovieRepository _repository = new MovieRepository();
  final BehaviorSubject<MovieRootClass> _subject = new BehaviorSubject<MovieRootClass>();

  getMovies() async{
    MovieRootClass response = await _repository.getMovies();
    _subject.sink.add(response);
  }

  dispose(){
    _subject.close();
  }

  BehaviorSubject<MovieRootClass> get subject => _subject;
}

final movieBloc = new MovieListBloc();

class MovieRootClass {
  List<Movies> movies;

  MovieRootClass({this.movies});

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

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

class Movies {
  String id;
  String title;
  String sinopsis;
  String poster;
  String rating;
  String quality;
  String year;
  List<Extra> extra;

  Movies(
      {this.id,
      this.title,
      this.sinopsis,
      this.poster,
      this.rating,
      this.quality,
      this.year,
      this.extra});

  Movies.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    sinopsis = json['sinopsis'];
    poster = json['poster'];
    rating = json['rating'];
    quality = json['quality'];
    year = json['year'];
    if (json['extra'] != null) {
      extra = new List<Extra>();
      json['extra'].forEach((v) {
        extra.add(new Extra.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['sinopsis'] = this.sinopsis;
    data['poster'] = this.poster;
    data['rating'] = this.rating;
    data['quality'] = this.quality;
    data['year'] = this.year;
    if (this.extra != null) {
      data['extra'] = this.extra.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

// Extra class .....

【问题讨论】：

电影数据列表在哪里？
@VirenVVarasadiya 电影模型作为示例添加

标签： flutter dart flutter-bloc

【解决方案1】：

您可以使用 StreamBuilder 小部件，它接收流，并在向流中添加新数据时自行重建。

StreamBuilder(
  stream: subject.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.movies.length,
        itemBuilder: (BuildContext context, int idnex) {
          return ListTile(
            title: Text(snapshot.data.someProperty),
          );
        },
      );
    }
    return const CircularProgressIndicator();
  },
);

【讨论】：