pub.dev/packages/fl…

flutter_staggered_grid_view #

 // 瀑布流布局
  Widget _bestGoods(){
    return Column(
      children: [
        Padding(padding: EdgeInsets.fromLTRB(
          ScreenAdapter.width(30),
          ScreenAdapter.height(40), 
          ScreenAdapter.width(30),
          ScreenAdapter.height(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("省心优惠",style: TextStyle(fontWeight: FontWeight.bold,fontSize: ScreenAdapter.fontSize(46))),
              Text("全部优惠 >",style: TextStyle(fontSize: ScreenAdapter.fontSize(38)))
            ],
          ),
          ),
          Container(
            padding: EdgeInsets.all(ScreenAdapter.width(26)),
            color: Color.fromRGBO(246, 246, 246, 1),
            child: MasonryGridView.count(
              crossAxisCount: 2, 
              mainAxisSpacing: ScreenAdapter.width(26),
              crossAxisSpacing: ScreenAdapter.width(26),
              itemCount: 20,
              shrinkWrap: true, // 收缩，让元素宽度自适应
              physics: const NeverScrollableScrollPhysics(), // 禁止滑动
              itemBuilder: (context,index){
                var height = 50+150*Random().nextDouble(); // 随机数
                return Container(
                  height: height,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black,width: 1),
                    borderRadius: BorderRadius.circular(10),
                  ),
                );
              })
            
          )
          
      ],
    );
  }

 // 瀑布流布局
  Widget _bestGoods(){
    return Column(
      children: [
        Padding(padding: EdgeInsets.fromLTRB(
          ScreenAdapter.width(30),
          ScreenAdapter.height(40), 
          ScreenAdapter.width(30),
          ScreenAdapter.height(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("省心优惠",style: TextStyle(fontWeight: FontWeight.bold,fontSize: ScreenAdapter.fontSize(46))),
              Text("全部优惠 >",style: TextStyle(fontSize: ScreenAdapter.fontSize(38)))
            ],
          ),
          ),
          Container(
            padding: EdgeInsets.all(ScreenAdapter.width(26)),
            color: Color.fromRGBO(246, 246, 246, 1),
            child: MasonryGridView.count(
              crossAxisCount: 2, 
              mainAxisSpacing: ScreenAdapter.width(26),
              crossAxisSpacing: ScreenAdapter.width(26),
              itemCount: 20,
              shrinkWrap: true, // 收缩，让元素宽度自适应
              physics: const NeverScrollableScrollPhysics(), // 禁止滑动
              itemBuilder: (context,index){
                return Container(
                  padding: EdgeInsets.all(ScreenAdapter.width(20)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        width: double.infinity,
                        child: Text("小米电话手表",
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(36),fontWeight: FontWeight.bold)
                        ),

                      ),
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        width: double.infinity,
                        child: Text("支持蓝牙",
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(32))
                        ),

                      ),
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        width: double.infinity,
                        child: Text("¥22222",
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(32),fontWeight: FontWeight.bold)
                        ),

                      ),
                    ],
                  ),
                 
                );
              })
            
          )
          
      ],
    );
  }

请求接口

RxList<PlistItemModel> bestPlist = <PlistItemModel>[].obs;
// 获取热门商品数据
  getBestPlistData() async {
    var response = await Dio().get("https://miapp.xxxx.com/api/plist?is_best=1");
    var plist = PlistModel.fromJson(response.data);
    bestPlist.value = plist.result!;
    update();
  }

 // 瀑布流布局
  Widget _bestGoods(){
    return Column(
      children: [
        Padding(padding: EdgeInsets.fromLTRB(
          ScreenAdapter.width(30),
          ScreenAdapter.height(40), 
          ScreenAdapter.width(30),
          ScreenAdapter.height(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("省心优惠",style: TextStyle(fontWeight: FontWeight.bold,fontSize: ScreenAdapter.fontSize(46))),
              Text("全部优惠 >",style: TextStyle(fontSize: ScreenAdapter.fontSize(38)))
            ],
          ),
          ),
          Obx(() =>  Container(
            padding: EdgeInsets.all(ScreenAdapter.width(26)),
            color: Color.fromRGBO(246, 246, 246, 1),
            child: MasonryGridView.count(
              crossAxisCount: 2, 
              mainAxisSpacing: ScreenAdapter.width(26),
              crossAxisSpacing: ScreenAdapter.width(26),
              itemCount: controller.bestPlist.length,
              shrinkWrap: true, // 收缩，让元素宽度自适应
              physics: const NeverScrollableScrollPhysics(), // 禁止滑动
              itemBuilder: (context,index){
                var picUrl = "https://xiaomi.itying.com/${controller.bestPlist[index].sPic}";
                return Container(
                  padding: EdgeInsets.all(ScreenAdapter.width(20)),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        child: Image.network(
                          picUrl.replaceAll("\\", "/"),
                          fit: BoxFit.cover,
                        ),

                      ),
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        width: double.infinity,
                        child: Text("${controller.bestPlist[index].title}",
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(42),fontWeight: FontWeight.bold)
                        ),

                      ),
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        width: double.infinity,
                        child: Text("${controller.bestPlist[index].subTitle}",
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(32))
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(10)),
                        width: double.infinity,
                        child: Text("${controller.bestPlist[index].price}",
                        textAlign: TextAlign.start,
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(32),fontWeight: FontWeight.bold)
                        ),
                      ),
                    ],
                  ),
                 
                );
              })
            
          )
        )
          
      ],
    );
  }