Flutter

Question

我是 Flutter 新手。我有一个 json 文件，其中包含名称、描述、徽标 URL。我设法显示了名称和描述，因为它们是文本，但我如何显示徽标？

代码：

List data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          child: Center(
            child: FutureBuilder(
              future: DefaultAssetBundle.of(context)
                  .loadString('components/abilities-list.json'),
              builder: (context, snapshot) {
                var myData = jsonDecode(snapshot.data.toString());
                return new ListView.builder(
                  itemBuilder: (BuildContext context, int index) {
                    return new Card(
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text('Name' + myData[index]['name']),
                          Text('Description' + myData[index]['description']),
                        ],
                      ),
                    );
                  },
                  itemCount: myData == null ? 0 : myData.length,
                );
              },
            ),
          ),
        ));
  }
}

json 例子

{
    "name": "Swiftlash",
    "description": "Performs a quick Omnislash",
    "logo_url": "http://static.wikia.nocookie.net/dota2_gamepedia/images/9/96/Swiftslash_icon.png"
  },
  {
    "name": "Wolf Bite",
    "description": "Lycan bites an ally, granting them Shapeshift properties.",
    "logo_url": "http://static.wikia.nocookie.net/dota2_gamepedia/images/8/8b/Wolf_Bite_icon.png"
  },

Answer 1

这很简单，就像使用一样：

 return  Card( child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
              Image.network(
                 myData[index]['logo_url'],
                 height: 100,
                  width: 100),
                  Text('Name' + myData[index]['name']),
                   Text('Description' + myData[index]['description']),
                            ],
                          ),
                        );

Answer 2

你可以展示来自url的图片或标志，然后按照下面的包，每次加载图片都不会花时间:

https://pub.dev/packages/cached_network_image

所以你的代码是：

new Card(
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[

CachedNetworkImage(
        imageUrl: myData[index]['logo_url'],
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),
                          Text('Name' + myData[index]['name']),
                          Text('Description' + myData[index]['description']),
                        ],
                      ),
                    );

Flutter - 显示来自本地 json 文件的图像 url

Flutter - Displaying an image url from a local json file

mobile

dart