我想在Listview中的图像上显示文本.我能够看到图像和文本,但文本将显示在左上角.我想在每个图像上的每个文本上显示它.以下是我的代码.请帮我
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 _buildBody();
}
Widget _buildBody() {
return new Stack(
children: <Widget>[
new Positioned(
child: new Container(
child: new ListView.builder(
itemCount: photos.length,
itemBuilder: (context,int){
return new Text(photos[int].title);
}
),
)
),
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,
);
}
}
解决方法:
您可以使用Stack小部件:
Stack(
children: <Widget>[
yourImageWidget,
Center(child: Text("someText")),
]
)
PhotosList类:
PhotosList({Key key, this.photos}) : super(key: key);
@override
Widget build(BuildContext context) {
return _buildBody();
}
Widget _buildBody() {
return new ListView.builder(
itemCount: photos.length,
itemBuilder: (context,int){
return Stack(
children: <Widget> [
new CachednetworkImage(imageUrl: photos[int].url),
Center(child: Text(photos[int].title)),
]
);
}
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。