京东4 分类页面

京东4 分类页面

1.静态页面布局

import 'package:flutter/material.dart';
import 'package:fultter/flutter_jdshop/services/ScreenAdaper.dart';
class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {

  int _selectIndex = 0;


  @override
  Widget build(BuildContext context) {
    // 计算右侧GridView宽高比
    // 左侧宽度
    var leftWidth = ScreenAdaper.getScreenWidth()/4;
    //右侧每一项宽度=（总宽度-左侧宽度-GridView外侧元素左右的Padding值-GridView中间的间距）/3
    var rightItemWidth=(ScreenAdaper.getScreenWidth()- leftWidth -20-20)/3;
    //获取计算后的高度
    var rightItemHeight=rightItemWidth+ScreenAdaper.height(28);
    return Row(
      children: [
        Container(
          width: leftWidth,
          height: double.infinity,
          child:ListView.builder(itemBuilder: (context,index){
              return Column(
                children: [
                  InkWell(
                    onTap: (){
                      setState(() {
                        _selectIndex = index;
                      });
                    },
                    child: Container(
                      width: double.infinity,
                      height: ScreenAdaper.height(56),
                      child: Text("第${index}条",textAlign: TextAlign.center),
                      color: _selectIndex==index?Colors.red:Colors.white,
                    ),
                  ),
                  Divider()
                ],