Flutter移动电商实战 --（21）分类页_类别信息接口调试

╰+攻爆jí腚メ 2023-06-01 05:59 14阅读 0赞

# 先解决一个坑 #

取消上面的GridVIew的回弹效果。就是在拖这个gridview的时候有一个滚动的效果

![1090399-20190901161410473-404208884.png][]

physics: NeverScrollableScrollPhysics(),

![1090399-20190901161444127-1558871179.png][]

大R刷新后，点击这里的空白的地方，GridView就不会有滚动的效果了。

![1090399-20190901161518052-530831450.png][]

# 分类页面后端接口调试 #

service\_url.dart配置接口的地址和名称

![1090399-20190901161554256-2130703841.png][]

const serviceUrl='http://test.baixingliangfan.cn/baixing/';
    const servicePath={
      'homePageContent':serviceUrl+'wxmini/homePageContent',//商店首页信息
      'homePageBelowConten':serviceUrl+'wxmini/homePageBelowConten',//商城首页热卖商品
      'getCategory':serviceUrl+'wxmini/getCategory',//商品类别信息
    };

pages/category\_page.dart

![1090399-20190901161645844-391347557.png][]

引入数据访问类和dart自带的转换json的

![1090399-20190901161720147-1722028319.png][]

这里的代码删除掉，我们把类修改成一个动态的widget

![1090399-20190901161743186-324583910.png][]

class CategoryPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(child: Text('分类页面'),),
        );
      }
    }

stfu快速生成动态的widget

![1090399-20190901161834769-1012918039.png][]

![1090399-20190901161857830-1428619288.png][]

# 效果展示  #

flutter的缺点就是加载首页的时候把其他接个页面的数据也加载了。很多人论坛提这个问题，目前还没有解决

![1090399-20190901161944705-1399780731.png][]

# 最终代码： #

import 'package:flutter/material.dart';
    import '../service/service_method.dart';
    import 'dart:convert';
    
    class CategoryPage extends StatefulWidget {
      @override
      _CategoryPageState createState() => _CategoryPageState();
    }
    
    class _CategoryPageState extends State<CategoryPage> {
      @override
      Widget build(BuildContext context) {
        _getCategory();
        return Container(
          child:Center(
            child: Text('分类页面'),
          )
        );
      }
    
      void _getCategory() async{
        await request('getCategory').then((val){
          var data=json.decode(val.toString());
          print(data);
        });
      }
    }

转载于:https://www.cnblogs.com/crazycode2/p/11391564.html

[1090399-20190901161410473-404208884.png]: /images/20230601/6c2e1925c189409eacdf21572ab683c9.png
[1090399-20190901161444127-1558871179.png]: /images/20230601/29333cb892e646968c8d2285342fd621.png
[1090399-20190901161518052-530831450.png]: /images/20230601/7df1424063ce4cb78235087ff64ce462.png
[1090399-20190901161554256-2130703841.png]: /images/20230601/68af290555ff40c29dec50bcd2f7cb01.png
[1090399-20190901161645844-391347557.png]: /images/20230601/959b5752353a42fdb5c499fad049608e.png
[1090399-20190901161720147-1722028319.png]: /images/20230601/9611a3e0fb6d406ab0a433a0df9c652d.png
[1090399-20190901161743186-324583910.png]: /images/20230601/ea07725bd09c4c13aa1bb45e7dfe0ca6.png
[1090399-20190901161834769-1012918039.png]: /images/20230601/4d4737636bcd4e108ec3ec4685974ac1.png
[1090399-20190901161857830-1428619288.png]: /images/20230601/de81c8a5e7204a9f92e0e8bac3a0ba8a.png
[1090399-20190901161944705-1399780731.png]: /images/20230601/3a97c1ae239f43b19a18365758c0c2ee.png