商品列表

import 'package:flutter/material.dart';

//快捷键 stless
main() => runApp(DBJApp());

class DBJApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primaryColor: Colors.green),
      home: DBJHomeContent(),
    );
  }
}

class DBJHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: DBJHomeBody(),
    );
  }
}

class DBJHomeBody extends StatelessWidget {
  const DBJHomeBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      children: getProductItem(),
    );
  }

  List<Widget> getProductItem() {
    return [
      DBJProductItem('Apple1', 'MacBook Pro1', 'https://alifei03.cfp.cn/creative/vcg/veer/800water/veer-396859952.jpg'),
      SizedBox(
        height: 10,
      ),
      DBJProductItem('Apple2', 'MacBook Pro2', 'https://tenfei02.cfp.cn/creative/vcg/veer/800water/veer-352390696.jpg'),
      SizedBox(
        height: 10,
      ),
      DBJProductItem('Apple3', 'MacBook Pro3', 'https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-392264261.jpg'),
    ];
  }
}

class DBJProductItem extends StatelessWidget {
  final String name;
  final String desc;
  final String imageUrl;
  final style1 = TextStyle(color: Colors.red, fontSize: 14);
  final style2 = TextStyle(color: Colors.blue, fontSize: 16);

  DBJProductItem(this.name, this.desc, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.yellow, //背景颜色
        border: Border.all(color: Colors.brown, width: 5), //边框颜色、边框宽度
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            name,
            style: style1,
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                desc,
                style: style2,
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Image.network(imageUrl)
        ],
      ),
    );
  }
}

Simulator Screen Shot - iPhone 12 - 2021-09-01 at 16.16.57.png