[移动开发]购物商品列表的实现

购物商品列表的实现

class ProductListPage extends StatefulWidget {
  late Map _arguments;

  ProductListPage({Key? key, arguments}) : super(key: key) {
    _arguments = arguments;
  }

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      //最外部套一个Padding保证整个列表与屏幕边有一定距离
      body: Padding(
        padding: EdgeInsets.all(10),
        //显示列表
        child: ListView.builder(
          itemBuilder: (context, index) {
          //用一个竖直展示的组件，上面是一个Row用于展示内容，下部为一个Divider用来充当分割，与下面一个条目保持一定距离
            return Column(
              children: [
              //竖直组件，左边显示图片，右边显示内容
                Row(
                  children: [
                  //图片用一个SizeBox包裹来控制大小
                    SizedBox(
                      width: ScreenAdapter.width(180),
                      height: ScreenAdapter.width(180),
                      child: Image.network(
                        "https://www.itying.com/images/flutter/list2.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                    //右边Expanded占屏幕剩下所有宽度
                    Expanded(
                      flex: 1,
                      //Container包裹右边所有文字部分，还可以设置高度
                      child: Container(
                        height: ScreenAdapter.higth(180),
                        padding: EdgeInsets.all(10),
                       //右边再用一个垂直组件，内部包含三个小组件
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "戴尔(DELL)灵越3670 英特尔酷睿i5 高性能 台式电脑整机（九代）",
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            Row(
                              children: [
                              //方便给文字设置边框和背景颜色
                                Container(
                                  height: ScreenAdapter.higth(36),
                                  margin: EdgeInsets.only(right: 10),
                                  alignment: Alignment(0, 0),
                                  padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Color.fromRGBO(230, 230, 230, 0.9),
                                  ),
                                  child: Text('4G'),
                                ),
                                Container(
                                  height: ScreenAdapter.higth(36),
                                  alignment: Alignment(0, 0),
                                  margin: EdgeInsets.only(right: 10),
                                  padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Color.fromRGBO(230, 230, 230, 0.9),
                                  ),
                                  child: Text('4G'),
                                ),
                              ],
                            ),
                            Text(
                              "￥990",
                              style: TextStyle(color: Colors.red, fontSize: 16),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
                Divider(
                  height: 20,
                )
              ],
            );
          },
          itemCount: 10,
        ),
      ),
    );
  }
}