笔记 实现图片加载

image.png

代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Antipa"),
        ),
        body: HomeContent(),

      ),
    );
  }
}


class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Padding(
      padding: const EdgeInsets.all(10.0), // 设置 ListView 整个 框架 与 屏幕边缘的距离
      child: ListView(
        children: [
          ProductItem("mac","Product1","https://image.sitapix.com/sourcefile/sitapix-photo-7094-via-sitapix-com.jpg@!index-thumb"),
          ProductItem("mac","Product2","https://image.sitapix.com/sourcefile/sitapix-photo-3063960-via-sitapix-com.jpeg@!index-thumb"),
          ProductItem("mac","Product3","https://image.sitapix.com/sourcefile/sitapix-photo-2657669-via-sitapix-com.jpeg@!index-thumb"),
        ],
      ),
    );
  }
}


class ProductItem extends StatelessWidget {

  final title;
  final subtitle;
  final imageurl;

  ProductItem(this.title,this.subtitle,this.imageurl);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      // 给外面加边框
      decoration: BoxDecoration(
        border: Border.all(
          width: 2
        )
      ),

      padding: EdgeInsets.all(8),  // 内边距
      child: Column(
        children: [
          Text(title,style: TextStyle(fontSize: 24),),
          Text(subtitle,style: TextStyle(fontSize: 18),),
          SizedBox(height: 10,), // 设置上面和下面的间距
          Image.network(imageurl)
        ],
      ),
    );
  }
}