我想在列表视图中显示图像和文本。解析数据并将其设置在模型类中。你能帮我吗 下面是我的课。
import 'dart:async'; import 'dart:convert'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:http/http.dart' as http; Future<List<Photo>> fetchPhotos(http.Client client) async { final response = await client.get('url here'); return compute(parsePhotos, response.body); } // A function that will convert a response body into a List<Photo> List<Photo> parsePhotos(String responseBody) { final parsed = json.decode(responseBody); return (parsed["data"]["categoryList"] as List) .map<Photo>((json) => new Photo.fromJson(json)) .toList(); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // SystemChrome.setEnabledSystemUIOverlays([]); return new MyHomePage(); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { // TODO: implement build return new FutureBuilder<List<Photo>>( future: fetchPhotos(new http.Client()), builder: (context, snapshot) { if (snapshot.hasError) print(snapshot.error); return snapshot.hasData ? new PhotosList(photos: snapshot.data) : new Center(child: new CircularProgressIndicator()); }, ); } } class PhotosList extends StatelessWidget { final List<Photo> photos; PhotosList({Key key, this.photos}) : super(key: key); @override Widget build(BuildContext context) { return new Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: <Widget>[ new Expanded(child: _buildList(context) ), **//Able to display images but want to show text from list on images.** new Padding( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), child: new Text('DAILY WALLPAPER', style: new TextStyle( fontSize: 30.0, color: Colors.black, fontWeight: FontWeight.bold)), ), ], ); } //Showing the images in listview ListView _buildList(context) { return new ListView.builder( itemCount: photos.length, itemBuilder: (context, int) { return new CachedNetworkImage(imageUrl: photos[int].url); }); } } class Photo { final int catID; final String title; final String url; final String thumbnailUrl; final String description; final String webstiteURL; Photo( {this.catID, this.title, this.url, this.thumbnailUrl, this.description, this.webstiteURL}); factory Photo.fromJson(Map<String, dynamic> json) { return new Photo( catID: json['category_id'] as int, title: json['category_name'] as String, url: json['category_img'] as String, thumbnailUrl: json['thumb_img'] as String, description: json['description'] as String, webstiteURL: json['website_url'] as String, ); } }
您需要在的itemBuilder属性中构建布局ListView。如果要将文本放在图像上,最好的布局小部件是Stack。
itemBuilder
ListView
Stack
请参阅以下内容以获取颤振的布局系统:https : //flutter.io/tutorials/layout/
有关所有可用的布局小部件,请参见:https : //flutter.io/widgets/layout/
和堆栈:https : //docs.flutter.io/flutter/widgets/Stack- class.html
像这样:
new Stack( children: <Widget>[ new Positioned.fill( child: new FadeInImage( placeholder: new AssetImage('placeholder.png'), image: new CachedNetworkImageProvider(photos[int].url), fit: BoxFit.contain, alignment: Alignment.center, fadeInDuration: new Duration(milliseconds: 200), fadeInCurve: Curves.linear, ), ), new Positioned( top: 10.0, left: 10.0, child: new Container( child: new Text(photos[int].title) ), ), ], )