Flutter實戰視頻-移動電商-12.首頁_GridView類別導航製做

12.首頁_GridView類別導航製做

 首頁導航區的製做

 

外面用一個gridview來寫。裏面單獨提出來

 

新建導航組件

仍是在home_page.dart裏面寫代碼

新建一個靜態的組件：

快捷鍵寫組件的時候選擇哪一個stlessW的，這樣把構造函數也幫你初始化好了。

 

 

定義一個內部的方法 ，返回的是一個column，內部方法名開頭用下劃線開頭。

定義方法 _gridViewItemUI接收兩個參數一個是上下文對象，一個item至關於咱們每個導航項

咱們導航項點一下確定要有頁面的變化，或者是路由的跳轉。這個時候就是使用使用咱們的小部件InkWell。外層用InkWell主要是它能夠接受一個點擊事件。

當前咱們只輸出一句話就能夠了。而後裏面的Child咱們用Column就能夠了

 

把咱們的ScreenUtil初始化放在，main.dart中第一個調用的頁面

 

注意引入：import 'package:flutter_screenutil/flutter_screenutil.dart';

這樣就至關於咱們進行了全局設置。

這樣咱們的Column就寫完了。

 

外層套一個Container方便擴展

由於咱們上面已經接收一個list了。這裏children的地方咱們直接用navigatorList進行遍歷

 

map裏面接收一個回調，map後就不是list對象了。所以最後須要加上toList()

 

return直接調用咱們寫的內部方法就能夠了。

而後在FutureBuilder裏面調用咱們寫的TopNavigator組件

 

預覽效果：

往下滾動 發現最下面多了一個

這個是後臺接口的鍋，按說應該是10個的，因此只能從前端想一些辦法來處理了。

 

 

最終代碼

 

index_page.dart

 

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs=[
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.home),//這裏使用IOS風格的
      title: Text('首頁')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.search),
      title: Text('分類')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.shopping_cart),
      title: Text('購物車')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.profile_circled),
      title: Text('會員中心')
    ) 
  ];
  final List tabBodies=[
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

  int currentIndex=0;//當前索引
  var currentPage;
 @override
  void initState() {
    currentPage=tabBodies[currentIndex];//默認頁面數組內索引值爲0的頁面
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
     ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);

    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),//顏色固定死，比白色稍微灰一點
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: currentIndex,//當前索引值
        items: bottomTabs,
        onTap: (index){
          setState(() {
           currentIndex=index;
           currentPage=tabBodies[currentIndex];
          });
        },
      ),
      body: currentPage,
    );
  }
}

index_page.dart

 

 

home_page.dart

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String homePageContent='正在獲取數據';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百姓生活+')),
      body: FutureBuilder(
        future: getHomePageContent(),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            var data=json.decode(snapshot.data.toString());
            List<Map> swiper=(data['data']['slides'] as List).cast();
            List<Map> navigatorList=(data['data']['category'] as List).cast();
            return Column(
              children: <Widget>[
                SwiperDiy(swiperDateList: swiper),
                TopNavigator(navigatorList:navigatorList ,)
              ],
            );
          }else{
            return Center(child: Text('加載中....'));
          }
        },
      ),
    );
  }
}
//首頁輪播插件
class SwiperDiy extends StatelessWidget {
  final List swiperDateList;
  //構造函數
  SwiperDiy({this.swiperDateList});

  @override
  Widget build(BuildContext context) {
  
   

    print('設備的像素密度：${ScreenUtil.pixelRatio}');
    print('設備的高：${ScreenUtil.screenWidth}');
    print('設備的寬：${ScreenUtil.screenHeight}');

    return Container(
      height: ScreenUtil().setHeight(333),//
      width:ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,);
        },
        itemCount: swiperDateList.length,
        pagination: SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {
  final List navigatorList;

  TopNavigator({Key key, this.navigatorList}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context,item){
    return InkWell(
      onTap: (){print('點擊了導航');},
      child: Column(
        children: <Widget>[
          Image.network(item['image'],width: ScreenUtil().setWidth(95)),
          Text(item['mallCategoryName'])
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    if(this.navigatorList.length>10){
      this.navigatorList.removeRange(10,this.navigatorList.length);//從第十個截取，後面都截取掉
    }
    return Container(
      height: ScreenUtil().setHeight(320),//只是本身大概預估的一個高度，後續能夠再調整
      padding: EdgeInsets.all(3.0),//爲了避免讓它切着屏幕的邊緣，咱們給它一個padding
      child: GridView.count(
        crossAxisCount: 5,//每行顯示5個元素
        padding: EdgeInsets.all(5.0),//每一項都設置一個padding，這樣他就不挨着了。
        children: navigatorList.map((item){
          return _gridViewItemUI(context,item);
        }).toList(),
      ),
    );
  }
}

home_page.dart