app 商品列表页面的布局

静态代码

import 'package:flutter/material.dart';
import 'package:flutterdemo/app/services/screenAdapter.dart';

import 'package:get/get.dart';

import '../controllers/product_list_controller.dart';
// 商品列表页面
class ProductListView extends GetView<ProductListController> {
  const ProductListView({Key? key}) : super(key: key);

  Widget _productListWidget(){
    return ListView.builder(
      padding: EdgeInsets.fromLTRB(
        ScreenAdapter.width(26), 
        ScreenAdapter.width(140), 
        ScreenAdapter.width(26), 
        ScreenAdapter.height(26)),
      itemCount: 10,
      itemBuilder: (context,index){
        return Container(
          margin: EdgeInsets.only(bottom: ScreenAdapter.height(26)),
          decoration: BoxDecoration(
            color: Colors.white,borderRadius: BorderRadius.circular(10)
          ),
          child: Row(
            children: [
              // 左侧
              Container(
                padding: EdgeInsets.all(ScreenAdapter.width(60)),
                width: ScreenAdapter.width(400),
                height: ScreenAdapter.height(460),
                child: Image.network(
                  "https://xiaomi.itying.com/public/upload/5xyr9OTSK1pwJ5ng7YgpKOkd.png_200x200.png",
                  fit: BoxFit.fitHeight,
                  
                  ),
                  
              ),
              // 右侧
               Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
                    child: Text("Redmi Note 11",style: TextStyle(fontSize: ScreenAdapter.fontSize(42),fontWeight: FontWeight.bold),),
                    ),
                    Padding(padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
                    child: Text("内外双旗屏幕｜徕卡专业光学镜头｜徕卡原生双画质",style: TextStyle(fontSize: ScreenAdapter.fontSize(34))),
                    ),
                    Container(
                      padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
                      child: Row(
                              children: [
                                Expanded(
                                  child: Column(
                                    children: [
                                      Text("CUP",style: TextStyle(
                                        fontSize: ScreenAdapter.fontSize(34),
                                        fontWeight: FontWeight.bold
                                      ),),
                                      Text("Hello G25",
                                      style: TextStyle(fontSize: ScreenAdapter.fontSize(34)))
                                    ],
                                   )
                                  ),
                                  Expanded(
                                    child: Column(
                                      children: [
                                        Text("高清拍摄",
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(34),
                                          fontWeight: FontWeight.bold),),
                                        Text("130万像素",
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(34))  
                                          )
                                      ],
                                    )
                                    ),
                                    Expanded(
                                    child: Column(
                                      children: [
                                        Text("超大屏幕",
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(34),
                                          fontWeight: FontWeight.bold),),
                                        Text("6.1寸",
                                        style: TextStyle(
                                          fontSize: ScreenAdapter.fontSize(34))  
                                        )
                                      ],
                                    )
                                    )
                              ],

                      ),
                    ),
                    Text("¥8999起",
                    style: TextStyle(fontSize: ScreenAdapter.fontSize(38),fontWeight: FontWeight.bold)
                    )
                  
                  ],
                      
                ),
              )
            ],
          ),

        );

      }
    );
  }

  Widget _subHeaderWidget(){
    return Positioned(
      left: 0,
      right: 0,
      top: 0,
      child: Container(
        height: ScreenAdapter.height(120),
        width: ScreenAdapter.width(1080),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: ScreenAdapter.height(2),
              color: const Color.fromRGBO(233, 233, 233, 0.9)
            )
          )
        ),
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("综合",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("销量",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("价格",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("筛选",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            )
          ],
        ),

      )
    );
  }

  @override
  Widget build(BuildContext context) {
    print(Get.arguments);
    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(900),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30)
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(padding: EdgeInsets.fromLTRB(ScreenAdapter.width(34), 0, ScreenAdapter.width(10), 0),
              child: const Icon(Icons.search),
              ),
              Text("手机",style: TextStyle(color: Colors.black54,fontSize: ScreenAdapter.fontSize(32)),)
            ],
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Stack(
        children: [_productListWidget(),_subHeaderWidget()],
      )
    );
  }
}

controller

import 'package:flutter/widgets.dart';
import 'package:flutterdemo/app/models/plist_model.dart';
import 'package:flutterdemo/app/services/httpsClient.dart';
import 'package:get/get.dart';

class ProductListController extends GetxController {
  //TODO: Implement ProductListController
  ScrollController scrollController = ScrollController();
  RxList<PlistItemModel> plist = <PlistItemModel>[].obs;
  int page = 1;
  int pageSize = 8;
  bool flag = true;
  RxBool hasData = true.obs;
  HttpsClient httpsClient = HttpsClient();

  @override
  void onInit() {
    super.onInit();
    getPlistData();
    initScrollController();

  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();
  }
  // 监听滚动条事件
  void initScrollController(){
    // scrollController.position.pixels 滚动条下拉的高度
    // scrollController.position.maxScrollExtent  页面的高度
    scrollController.addListener(() {
      if(scrollController.position.pixels > (scrollController.position.maxScrollExtent - 20)){
        getPlistData();
      }
    });
  }

  void getPlistData() async {
    if(flag && hasData.value){
      flag = false;
      print( "api/plist?cid=${Get.arguments["cid"]}&page=$page&pageSize=$pageSize");
      var response = await httpsClient.get("api/plist?cid=${Get.arguments["cid"]}&page=$page&pageSize=$pageSize");
      if(response != null){
        var plistTemp = PlistModel.fromJson(response.data);
        // 注意；拼接
        plist.addAll(plistTemp.result!);
        print(plist);
        page++;
        update();
        flag = true;
        if(plistTemp.result!.length < pageSize){
          hasData.value = false;
        }
      }
    }
  }

  
}

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutterdemo/app/services/httpsClient.dart';
import 'package:flutterdemo/app/services/screenAdapter.dart';

import 'package:get/get.dart';

import '../controllers/product_list_controller.dart';
// 商品列表页面
class ProductListView extends GetView<ProductListController> {
  const ProductListView({Key? key}) : super(key: key);

  Widget _productListWidget(){
    return Obx(() => controller.plist.isNotEmpty ? 
    ListView.builder(
      controller: controller.scrollController,
      padding: EdgeInsets.fromLTRB(
        ScreenAdapter.width(26), 
        ScreenAdapter.width(140), 
        ScreenAdapter.width(26), 
        ScreenAdapter.height(26)),
      itemCount: controller.plist.length,
      itemBuilder: (context,index){
        return Column(
          children: [
            Container(
              margin: EdgeInsets.only(bottom: ScreenAdapter.height(26)),
              decoration: BoxDecoration(
                color: Colors.white,borderRadius: BorderRadius.circular(10)
              ),
              child: Row(
                children: [
                  // 左侧
                  Container(
                    padding: EdgeInsets.all(ScreenAdapter.width(60)),
                    width: ScreenAdapter.width(400),
                    height: ScreenAdapter.height(460),
                    child: Image.network(
                      "${HttpsClient.replaeUri(controller.plist[index].sPic)}",
                      fit: BoxFit.fitHeight,
                      
                      ),
                      
                  ),
                  // 右侧
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)
                          ),
                        child: Text("${controller.plist[index].title}",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(42),fontWeight: FontWeight.bold),),
                        ),
                        Padding(padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
                        child: Text("${controller.plist[index].subTitle}",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(34))),
                        ),
                        Container(
                          padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
                          child: Row(
                                  children: [
                                    Expanded(
                                      child: Column(
                                        children: [
                                          Text("CUP",style: TextStyle(
                                            fontSize: ScreenAdapter.fontSize(34),
                                            fontWeight: FontWeight.bold
                                          ),),
                                          Text("Hello G25",
                                          style: TextStyle(fontSize: ScreenAdapter.fontSize(34)))
                                        ],
                                      )
                                      ),
                                      Expanded(
                                        child: Column(
                                          children: [
                                            Text("高清拍摄",
                                            style: TextStyle(
                                              fontSize: ScreenAdapter.fontSize(34),
                                              fontWeight: FontWeight.bold),),
                                            Text("130万像素",
                                            style: TextStyle(
                                              fontSize: ScreenAdapter.fontSize(34))  
                                              )
                                          ],
                                        )
                                        ),
                                        Expanded(
                                        child: Column(
                                          children: [
                                            Text("超大屏幕",
                                            style: TextStyle(
                                              fontSize: ScreenAdapter.fontSize(34),
                                              fontWeight: FontWeight.bold),),
                                            Text("6.1寸",
                                            style: TextStyle(
                                              fontSize: ScreenAdapter.fontSize(34))  
                                            )
                                          ],
                                        )
                                        )
                                  ],

                          ),
                        ),
                        Text("¥${controller.plist[index].price}起",
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(38),fontWeight: FontWeight.bold)
                        )
                      
                      ],
                          
                    ),
                  )
                ],
              ),

            ),
            (index == controller.plist.length - 1)? _progressIndicator():const Text("")
        ]
      );

      }
    ): _progressIndicator());
  }

  Widget _progressIndicator(){
    if(controller.hasData.value){
      return const Center(
        child: CircularProgressIndicator(),
      );
    }else{
      return const Center(
        child: Text("没有数据了额"),
      );
    }
  }

  Widget _subHeaderWidget(){
    return Positioned(
      left: 0,
      right: 0,
      top: 0,
      child: Container(
        height: ScreenAdapter.height(120),
        width: ScreenAdapter.width(1080),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: ScreenAdapter.height(2),
              color: const Color.fromRGBO(233, 233, 233, 0.9)
            )
          )
        ),
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("综合",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("销量",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("价格",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            ),
            Expanded(
              flex: 1,
              child: InkWell(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(1, ScreenAdapter.height(16), 0, ScreenAdapter.height(16)),
                  child: Text("筛选",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.fontSize(32)),
                  ),
                ),
                onTap: (){},
              )
            )
          ],
        ),

      )
    );
  }

  @override
  Widget build(BuildContext context) {
    print(Get.arguments);
    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(900),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30)
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(padding: EdgeInsets.fromLTRB(ScreenAdapter.width(34), 0, ScreenAdapter.width(10), 0),
              child: const Icon(Icons.search),
              ),
              Text("手机",style: TextStyle(color: Colors.black54,fontSize: ScreenAdapter.fontSize(32)),)
            ],
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Stack(
        children: [_productListWidget(),_subHeaderWidget()],
      )
    );
  }
}