zoukankan      html  css  js  c++  java
  • 导航区域 温故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('加载错误'),
    );
    }
    },
    ),
    );
  • 相关阅读:
    Matlab 画图
    OfferCome-0531
    OfferCome--0528
    剑指offer(2)
    剑指offer(1)
    MySQL的自增主键
    java Junit 测试
    sql 注入问题
    Facebook Libra
    markdown的博客
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12222787.html
Copyright © 2011-2022 走看看