flutter - 如何使用flutter +(bloc)模式在body属性中加载数据
问题描述
大家好,
几周以来我一直在学习使用颤振,我正在创建一个应用程序,我在学习使用颤振编程时开发它。
我的想法是能够遵循模式(BLoC)。我现在要做的就是能够将电影数据列表加载到body属性中的home.dart文件中
我感谢您的帮助!
主页.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>[
],
),
);
}
}
电影块.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 .....
解决方案
您可以使用 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();
},
);
推荐阅读
- powershell - 如何将 Get-ADOrganizationalUnit 与 Get-ADUser 结合使用
- optimization - 多点交叉
- machine-learning - MultinomialNB 或 GaussianNB 或 CategoricalNB 在这里用什么?
- html - Bootstrap 4 导航栏示例在我的计算机上无法正常工作
- arrays - 给定 n,生成所有大小小于 0.5n 的排列
- cakephp - CakePHP ORM 查找具有多个包含(hasMany 关系)条件的查询
- couchdb - couchDB上的连接被拒绝
- python - 如何正确获取nba投篮图数据?
- react-native - 在 Expo App 中加载字体时出错
- powershell - 无法按名称解析程序集 Microsoft.PowerShell.Commands.Management.resources