如何在列表视图中显示图像和文本?

谷歌

我想在列表视图中显示图像和文本。解析数据并将其设置在模型类中。你能帮我吗 下面是我的课。

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

请参阅以下内容以获取颤振的布局系统: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)
      ),
    ),
  ],
)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在底部显示带有图像和文本的选定列表视图项(Android View)

如何在带有文本的列表视图中显示从 API 下载的图像

如何在Bixby结果视图中的图像中心显示文本?

无法在列表视图中设置其他图像和文本

如何在列表视图中显示缓存图像

如何在引导响应视图中正确排列图像和文本?

如何在列表视图中获取图像?

如何在索引视图中显示图像

如何在Android中更改列表视图行中单击位置的图像和文本颜色

如何在列表视图中显示整数?

如何在列表视图中显示位图?

在列表视图中显示图像

如何在MenuItem中设置图像视图和文本

如何在列表视图中显示列表视图

当互联网不可用时重用列表视图中的图像和文本

在一个视图中以本机显示url和文本的混合图像

如何在列表视图中打开图像时删除图像?

如何在没有图像的列表视图中显示 woocommerce 产品

如何在Android中的JSON响应中在列表视图中显示图像

如何在具有透明背景的自定义列表视图中显示图像

如何在Android列表视图中对齐文本视图?

如何在 xamarin 形式的不同宽度的列表视图中显示不同长度的文本

如何在列表视图中显示可用汽车的列表?

如何使工具栏出现图像按钮和文本视图中心?

如何在列表视图中设置固定图像高度100%

Bootstrap 在移动视图中重新排序图像和文本

如何在Word 2007的草稿视图中显示图像

如何在“圆”视图中显示矩形图像?

如果变量为负数,如何在视图中显示图像