购物分类展示页面

// ignore_for_file: prefer_const_constructors, unnecessary_brace_in_string_interps, avoid_unnecessary_containers, sized_box_for_whitespace, prefer_is_empty, unnecessary_string_interpolations

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutterjdshop/config/Config.dart';
import 'package:flutterjdshop/model/CateModel.dart';
import 'package:flutterjdshop/services/ScreenAdapter.dart';

class CatrgoryPage extends StatefulWidget {
    
    
  CatrgoryPage({
    
    Key? key}) : super(key: key);

  @override
  State<CatrgoryPage> createState() => _CatrgoryPageState();
}

class _CatrgoryPageState extends State<CatrgoryPage>
    with AutomaticKeepAliveClientMixin {
    
    
  int _selectIndex = 0;
  List _leftCateList = [];
  List _rightCateList = [];

  @override
  bool get wantKeepAlive => true;
  @override
  void initState() {
    
    
    super.initState();
    _getLeftCateData();
  }

  _getLeftCateData() async {
    
    
    var aip = '${Config.domain}api/pcate';
    var result = await Dio().get(aip);
    var leftCateList = CateModel.fromJson(result.data);
    setState(() {
    
    
      _leftCateList = leftCateList.result!;
    });
    _getRightCateData(leftCateList.result![0].sId);
  }

  _getRightCateData(pid) async {
    
    
    var aip = '${Config.domain}api/pcate?pid=${pid}';
    var result = await Dio().get(aip);
    var rightCateList = CateModel.fromJson(result.data);
    setState(() {
    
    
      _rightCateList = rightCateList.result!;
    });
  }

  Widget _leftCateWidget(leftWidth) {
    
    
    if (_leftCateList.length > 0) {
    
    
      return Container(
        width: leftWidth,
        height: double.infinity,
        padding: EdgeInsets.only(top: 2),
        //   color: Colors.red,
        child: ListView.builder(
          itemCount: _leftCateList.length,
          itemBuilder: (context, index) {
    
    
            return Column(
              children: [
                InkWell(
                  onTap: () {
    
    
                    setState(() {
    
    
                      _selectIndex = index;
                      _getRightCateData(_leftCateList[index].sId);
                    });
                  },
                  child: Container(
                      //让内部组件在容器中居中
                      alignment: Alignment(0, 0),
                      //  padding: EdgeInsets.only(top: ScreenAdapter.higth(10)),
                      child: Text(
                        "${_leftCateList[index].title}",
                        textAlign: TextAlign.center,
                      ),
                      width: double.infinity,
                      height: ScreenAdapter.higth(84),
                      color: _selectIndex == index
                          ? Color.fromRGBO(240, 246, 246, 0.9)
                          : Colors.white),
                ),
                Divider(
                  height: 1,
                ),
              ],
            );
          },
        ),
      );
    } else {
    
    
      return Container(
        width: leftWidth,
        height: double.infinity,
      );
    }
  }

  Widget _rightCateWidget(rightItemWidth, rightItemHeight) {
    
    
    if (_rightCateList.length > 0) {
    
    
      return Expanded(
        flex: 1,
        child: Container(
          height: double.infinity,
          padding: EdgeInsets.all(10),
          color: Color.fromRGBO(240, 246, 246, 0.9),
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: rightItemWidth / rightItemHeight,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
            itemCount: _rightCateList.length,
            itemBuilder: (context, index) {
    
    
              String pic = _rightCateList[index].pic;
              pic = Config.domain + pic.replaceAll('\\', '/');
              return Container(
                //  height: rightItemHeight/3,
                child: Column(
                  children: [
                    AspectRatio(
                      aspectRatio: 1 / 1,
                      child: Image.network(
                        "${pic}",
                        fit: BoxFit.cover,
                      ),
                    ),
                    Container(
                      height: ScreenAdapter.higth(28),
                      child: Text("${_rightCateList[index].title}"),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      );
    } else {
    
    
      return Expanded(
        flex: 1,
        child: Container(
          padding: EdgeInsets.all(10),
          height: double.infinity,
          color: Color.fromRGBO(240, 246, 246, 0.9),
          child: Text('加载中...'),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    
    
    //计算右侧GridView宽高比

    //左侧宽度

    var leftWidth = ScreenAdapter.getScreenWidth() / 4;

    //右侧每一项宽度=（总宽度-左侧宽度-GridView外侧元素左右的Padding值-GridView中间的间距）/3

    var rightItemWidth =
        (ScreenAdapter.getScreenWidth() - leftWidth - 20 - 20) / 3;

    //获取计算后的宽度
    rightItemWidth = ScreenAdapter.width(rightItemWidth);

    //获取计算后的高度
    var rightItemHeight = rightItemWidth + ScreenAdapter.higth(28);

    return Row(
      children: [
        _leftCateWidget(leftWidth),
        _rightCateWidget(rightItemWidth, rightItemHeight)
      ],
    );
  }
}