user-interface - 如何在 ListView 中调用网络图像类型？

Question

我有一个应该显示网络图像的 gridView。它的所有元素都定义在具有多个元素的列表中。它现在调用 AssetImage，但我想将其更改为网络图像。这是列表元素的声明。我想更改 imagePath 但我无法理解声明。

class Category {
  Category({
    this.title = '',
    this.imagePath = '',
    this.lessonCount = '',
    this.money = 0,
    this.rating = 0.0,
  });

  String title;
  String lessonCount;
  int money;
  double rating;
  String imagePath;

  static List<Category> offerwallList = <Category>[

    Category(
      imagePath: 'assets/app/games.png',
      title: 'Games',
      lessonCount: 'Play Games',
      money: 18,
      rating: 4.6,
    ),
  ];

它也在下面的其他几个地方定义，这也是我必须改变的。

 child: Image.asset(category.imagePath)

Answer 1

使用带有 url 的图像路径

Category(
      imagePath:  'https://unsplash.com/photos/tpCPd4MbzNU' ,
      title: 'Games',
      lessonCount: 'Play Games',
      money: 18,
      rating: 4.6,
    ),

并用网络一替换图像资产

child: Image.network(category.imagePath)

Answer 2

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // just pass the String path in Image.network
    const List<Choice> choices = const <Choice>[
      const Choice(
          title: 'Car', networkImage: "https://via.placeholder.com/150"),
      const Choice(
          title: 'Bicycle', networkImage: "https://via.placeholder.com/150"),
      const Choice(
          title: 'Boat', networkImage: "https://via.placeholder.com/150"),
      const Choice(
          title: 'Bus', networkImage: "https://via.placeholder.com/150"),
    ];

    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
                child: GridView.count(
                    crossAxisCount: 2,
                    children: List.generate(choices.length, (index) {
                      return Center(
                        child: Container(
                            child: ChoiceCard(choice: choices[index])),
                      );
                    }))),
          ),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.networkImage});

  final String title;
  final String networkImage;
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Container(
      child: Card(
          color: Colors.white,
          child: Center(
            child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Image.network(
                    choice.networkImage,
                    width: 150,
                  ),
                ]),
          )),
    );
  }
}

只需检查示例，您就会明白