app分类页面的布局

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

import 'package:get/get.dart';

import '../controllers/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(840),
          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,
        actions: [
          IconButton(onPressed: (){}, 
          icon: const Icon(Icons.message_outlined,color: Colors.black54,))
        ],
        elevation: 0,
      ),
      body:Row(
        children: [
          SizedBox(
            width: ScreenAdapter.width(280),
            height: double.infinity,
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (context,index){
                return Container(
                  width: double.infinity,
                  height: ScreenAdapter.height(180),
                  child: Obx(() => InkWell(
                    onTap: (){
                      controller.changeIndex(index);
                    },
                    child: Stack(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: ScreenAdapter.width(10),
                            height: ScreenAdapter.height(46),
                            color: controller.selectIdent.value == index?
                            Colors.red : Colors.white,
                          ),
                        ),
                        Center(
                          child: Text("第$index个"),
                        )
                      ],
                    ),
                  )),
                );
              }),
          ),
          Expanded(
            child: Container(
              height: double.infinity,
              child: GridView.builder(
                itemCount: 35,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: ScreenAdapter.width(30),
                  childAspectRatio: 240 / 340
                  ), 
                itemBuilder: (context,index){
                  return Column(
                    children: [
                      Container(
                        alignment: Alignment.center,
                        width: double.infinity,
                        child: 
                        Image.network(
                          "https://xiaomi.itying.com/public/upload/RQXtJTh1WbzxpSbLF-vjDYTo.png",
                          fit: BoxFit.fitHeight,
                          ),
                      ),
                      Padding(padding: EdgeInsets.fromLTRB(0, ScreenAdapter.height(10), 0, 0),
                      child: Text("手机",style: TextStyle(fontSize: ScreenAdapter.fontSize(34)),),
                      )
                    ],
                  );
                }),
            ))
        ],
      )
    );
  }
}

controller

import 'package:dio/dio.dart';
import 'package:flutterdemo/app/models/category_model.dart';
import 'package:get/get.dart';

class CategoryController extends GetxController {
  //TODO: Implement CategoryController


  RxInt selectIdent = 0.obs;
  RxList<CategoryItemModel> leftCategoryList = <CategoryItemModel>[].obs;
  RxList<CategoryItemModel> rightCategoryList = <CategoryItemModel>[].obs; 
  @override
  void onInit() {
    super.onInit();
    getLeftCategoryData();
  }

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

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

  void changeIndex(index,id){
    selectIdent.value = index;
    getRightCategoryData(id);
    update();
  }

  getLeftCategoryData() async{
    var response = await Dio().get("https://miapp.itying.com/api/pcate");
    var category = CategoryModel.fromJson(response.data);
    leftCategoryList.value = category.result!;
    getRightCategoryData(leftCategoryList[0].sId!);
    update();
  }

  getRightCategoryData(String pid) async{
    var response = await Dio().get("https://miapp.itying.com/api/pcate?pid=$pid");
    var category = CategoryModel.fromJson(response.data);
    rightCategoryList.value = category.result!;
    update();
  }
}

view

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

import 'package:get/get.dart';

import '../controllers/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({Key? key}) : super(key: key);

  Widget _leftCate(){
    return SizedBox(
            width: ScreenAdapter.width(280),
            height: double.infinity,
            child: Obx(() => ListView.builder(
              itemCount: controller.leftCategoryList.length,
              itemBuilder: (context,index){
                return SizedBox(
                  width: double.infinity,
                  height: ScreenAdapter.height(180),
                  child: InkWell(
                    onTap: (){
                      controller.changeIndex(index,controller.leftCategoryList[index].sId);
                    },
                    child: Obx(() =>  Stack(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: ScreenAdapter.width(10),
                            height: ScreenAdapter.height(46),
                            color: controller.selectIdent.value == index?
                            Colors.red : Colors.white,
                          ),
                        ),
                        Center(
                          child: Text("${controller.leftCategoryList[index].title}",
                          style:TextStyle(fontSize: ScreenAdapter.fontSize(36),
                          fontWeight: controller.selectIdent.value == index?FontWeight.bold : FontWeight.normal
                          ) ,),
                        )
                      ],
                    ),
                    )
                  ),
                );
              }),
          )
    );
  }

  Widget _rightCate(){
    return Expanded(
            child: Container(
              color: Colors.white,
              height: double.infinity,
              child: Obx(() =>  GridView.builder(
                itemCount: controller.rightCategoryList.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: ScreenAdapter.width(40),
                  mainAxisSpacing: ScreenAdapter.height(20),
                  childAspectRatio: 240 / 340
                  ), 
                itemBuilder: (context,index){
                  var picUrl = "https://xiaomi.itying.com/${controller.rightCategoryList[index].pic}";
                  return Column(
                    children: [
                      Container(
                        alignment: Alignment.center,
                        width: double.infinity,
                        child: 
                        Image.network(
                          picUrl.replaceAll("\\", "/"),
                          fit: BoxFit.fitHeight,
                          ),
                      ),
                      Padding(padding: EdgeInsets.fromLTRB(0, ScreenAdapter.height(10), 0, 0),
                      child: Text("${controller.rightCategoryList[index].title}",style: TextStyle(fontSize: ScreenAdapter.fontSize(34)),),
                      )
                    ],
                  );
                })
              ),
            ));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(840),
          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,
        actions: [
          IconButton(onPressed: (){}, 
          icon: const Icon(Icons.message_outlined,color: Colors.black54,))
        ],
        elevation: 0,
      ),
      body:Row(
        children: [
          _leftCate(),
          _rightCate(),
        ],
      )
    );
  }
}