Flutter實戰視頻-移動電商-21.分類頁_類別信息接口調試

21.分類頁_類別信息接口調試

 先解決一個坑

取消上面的GridVIew的回彈效果。就是在拖這個gridview的時候有一個滾動的效果

 

physics: NeverScrollableScrollPhysics(),

 

大R刷新後，點擊這裏的空白的地方，GridView就不會有滾動的效果了。

分類頁面後端接口調試

service_url.dart配置接口的地址和名稱

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

引入數據訪問類和dart自帶的轉換json的

這裏的代碼刪除掉，咱們把類修改爲一個動態的widget

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

 

stfu快速生成動態的widget

 

效果展現 。

flutter的缺點就是加載首頁的時候把其餘接個頁面的數據也加載了。不少人論壇提這個問題，目前尚未解決

 

 

最終代碼：

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);
    });
  }
}

category_page.dart