15.横向类别

dbbb088c0116ae0e4a4e132059b1817.png

小标签

Widget _rightInkWell(String item){
    return InkWell(
      onTap: (){

      },
      child: Container(
        padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
        child: Text(
          item,
          style: TextStyle(
              fontSize:ScreenUtil().setSp(28)
          ),
        ),
      ),

    );
  }

横向标签

 child: Container(
        height: ScreenUtil().setHeight(80),
        width: ScreenUtil().setWidth(570),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: 1,
              color: Colors.black12
            )
          )
        ),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: list.length,
            itemBuilder: (context,index){
            return _rightInkWell(list[index]);
            },
        ),
      ),
    );

所有代码

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_shop/service/service_method.dart';
import '../model/category.dart';


class CategoryPage extends StatefulWidget {
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('分类页面'),
      ),
        body: Container(
          child: Row(
            children: <Widget>[
              LeftCategoryNav(),
              Column(
                children: <Widget>[
                  RightCategoryNav(),
                ],
              )
            ],
          ),
        )
    );
  }
}




//左侧分类列表
class LeftCategoryNav extends StatefulWidget {

  LeftCategoryNavState createState() => new LeftCategoryNavState();
}

class LeftCategoryNavState extends State<LeftCategoryNav> {

  List list = [];

  @override
  void initState() {
    _getCategory();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil().setWidth(180),
      decoration: BoxDecoration(
        border: Border(
          right: BorderSide(
            width: 1,
            color: Colors.black12
          )
        )
      ),
      child: ListView.builder(
//        itemCount: list.length,
          itemCount: 20,
          itemBuilder: (context, index) {
            return _leftInWel(index);
          }
      ),
    );
  }


  Widget _leftInWel(int index){
    return InkWell(
      onTap: (){},
      child: Container(
        height: ScreenUtil().setHeight(100),
        padding: EdgeInsets.only(left: 10,top: 20),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: 1,
              color: Colors.black12,
            )
          )
        ),
        child: Text(
//         list[index].mallCategoryName,
          '分类名称',
          style: TextStyle(
            fontSize: ScreenUtil().setSp(28),
          ),
        ),

      ),
    );
  }



  void _getCategory()async{
    await request('getCategory').then((val){
      var data = json.decode(val.toString());
      CategoryModel category = CategoryModel.fromJson(data);
      setState(() {
        list = category.data;
      });
    });
  }




}



//右侧小类类别
class RightCategoryNav extends StatefulWidget {
  @override
  RightCategoryNavState createState() => new RightCategoryNavState();
}

class RightCategoryNavState extends State<RightCategoryNav> {

  List list = ['名酒','宝丰','北京二锅头','名酒','宝丰','北京二锅头','名酒','宝丰','北京二锅头'];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        height: ScreenUtil().setHeight(80),
        width: ScreenUtil().setWidth(570),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: 1,
              color: Colors.black12
            )
          )
        ),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: list.length,
            itemBuilder: (context,index){
            return _rightInkWell(list[index]);
            },
        ),
      ),
    );
  }



  Widget _rightInkWell(String item){
    return InkWell(
      onTap: (){

      },
      child: Container(
        padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
        child: Text(
          item,
          style: TextStyle(
              fontSize:ScreenUtil().setSp(28)
          ),
        ),
      ),

    );
  }
}