• 导航区域 温故GridView 和 column


    代码:

    import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    class TopNavigator extends StatelessWidget {
    final List navigatorList;

    TopNavigator({this.navigatorList});

    Widget _gridViewItemUI(BuildContext context,item){
    return InkWell(
    onTap: (){
    print('点击了导航');
    },
    child: Column(
    children: <Widget>[
    Image.network(item['image'],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(10.0),
    child: GridView.count(
    crossAxisCount: 5,//每行5个
    padding: EdgeInsets.all(5.0),//间距
    children: navigatorList.map((item){
    return _gridViewItemUI(context, item);
    }).toList(),//切记返回一个集合 tolist()
    ),
    );
    }
    }
     
    加载导航区域代码:
    Container(
    child: FutureBuilder(//网络数据返回能很好的渲染控件
    future: getHomePageContent(),//网络返回的数据
    builder: (context,snapshot){
    if (snapshot.hasData) {//snapshot 相当于返回的数据
    var data = json.decode(snapshot.data.toString());
     
    List<Map> swiper = (data['data']['slides'] as List).cast();

    List<Map> navlist = (data['data']['category'] as List).cast();
    return Column(
    children: <Widget>[
    SwiperDiy(swiperDataList: swiper),
    TopNavigator(navigatorList: navlist),
    ],
    );
    }else{
    return Center(
    child: Text('加载错误'),
    );
    }
    },
    ),
    );
  • 相关阅读:
    一种不求交点确定直线与三角形是否相交的方法
    碰撞边界锯齿的平滑方法
    demo的凹凸贴图效果
    MySQL进阶篇触发器
    MySQL进阶篇索引
    Maven的POM文件详解
    Swagger
    MySQL进阶篇存储过程
    SpringBoot基础篇
    MySQL基础篇多表操作
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12222787.html
Copyright © 2020-2023  润新知