Flutter實戰視頻-移動電商-25.列表頁_使用Provide控制子類-1

25.列表頁_使用Provide控制子類-1

 

主要是二級分類的UI佈局

1分15秒

生成咱們的右側動態類

 定義list變量

開始寫裏面的子項，把每個小的寫了 再拼成一個大的

這樣咱們的小類就寫完了

開始寫個人大類別：是一個橫向的ListView。寫橫向的ListView就必須設置寬和高

ListView若是是縱向的不須要設置高度，若是是橫向的就必須設置寬和高

這裏使用構造器的形式，動態構造。ListView.builder()

大類的代碼:

　　

調用咱們的大類

佈局的劃分：最外層用Row，右側用上下佈局Column

 

 

查看效果

出來了可是效果比較醜，還須要優化

優化樣式

 

增長樣式修飾

 

 

增長橫向滾動，最終效果

 

 

最終代碼

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

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

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    //_getCategory();
    return Scaffold(
      appBar: AppBar(title: Text('商品分類'),),
      body: Container(
        child: Row(
          children: <Widget>[
            LeftCategoryNav(),
            Column(
              children: <Widget>[
                RightCategoryNav()
              ],
            )
          ],
        ),
      ),
    );
  }

 
}

//左側大類導航
class LeftCategoryNav extends StatefulWidget {
  @override
  _LeftCategoryNavState createState() => _LeftCategoryNavState();
}

class _LeftCategoryNavState extends State<LeftCategoryNav> {
  List list=[];
  @override
  void initState() { 
    super.initState();
    _getCategory();//請求接口的數據
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil().setWidth(180),
      decoration: BoxDecoration(
        border: Border(
          right: BorderSide(width:1.0,color: Colors.black12),//有邊框
        )
      ),
      child: ListView.builder(
        itemCount: list.length,
        itemBuilder: (contex,index){
          return _leftInkWell(index);
        },
      ),
    );
  }

  Widget _leftInkWell(int index){
    return InkWell(
      onTap: (){},
      child: Container(
        height: ScreenUtil().setHeight(100),
        padding: EdgeInsets.only(left:10.0,top:10.0),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(width: 1.0,color: Colors.black12)
          )
        ),
        child: Text(
          list[index].mallCategoryName,
          style: TextStyle(fontSize: ScreenUtil().setSp(28)),//設置字體大小，爲了兼容使用setSp
        ),
      ),
    );
  }
   void _getCategory() async{
    await request('getCategory').then((val){
      var data=json.decode(val.toString());
      //print(data);
      CategoryModel category= CategoryModel.fromJson(data);
      setState(() {
       list=category.data; 
      });
      //list.data.forEach((item)=>print(item.mallCategoryName));
    });
  }
}

class RightCategoryNav extends StatefulWidget {
  @override
  _RightCategoryNavState createState() => _RightCategoryNavState();
}

class _RightCategoryNavState extends State<RightCategoryNav> {
  List list = ['名酒','寶丰','北京二鍋頭','捨得','五糧液','茅臺','散白'];
  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(80),
      width: ScreenUtil().setWidth(570),//總的寬度是750 -180
      decoration: BoxDecoration(
        color: Colors.white,//白色背景
        border: Border(
          bottom: BorderSide(width: 1.0,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(//什麼都加一個container，這樣好佈局
        padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),//上下是10 左右是5.0
        child: Text(
          item,
          style:TextStyle(fontSize: ScreenUtil().setSp(28)),
        ),
      ),
    );
  }
}

category_page.dart