码迷,mamicode.com
首页 > 其他好文 > 详细

flutter wrap 流式布局

时间:2020-01-27 15:46:35      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:The   nta   convert   class   stat   otto   work   布局   接口   

热门商品代码:

import ‘package:flutter/material.dart‘;

import ‘package:flutter_project/service/service_method.dart‘;
import ‘dart:convert‘;

import ‘package:flutter_screenutil/flutter_screenutil.dart‘;//使用json.decode
class HotGoods extends StatefulWidget {
HotGoods({Key key}) : super(key: key);
 
@override
_HotGoodsState createState() => _HotGoodsState();
}


class _HotGoodsState extends State<HotGoods> {
int page = 1;
List <Map> hotGoodsList = [];
@override
void initState() {
 
super.initState();
_getHotGoods();
 
}
//火爆专区接口
void _getHotGoods(){
getHotGoodSContent(page).then((val){
var data = json.decode(val.toString());
List<Map> newGoodList = (data[‘data‘] as List).cast();//强转类型 从字符型转map
setState(() {
hotGoodsList.addAll(newGoodList);//将新数据newGoodList组合到老数据hotGoodsList,还是返回到老数据hotGoodsList
page++;
});
});

}

Widget hotTitle = Container(
margin: EdgeInsets.only(top: 10.0),//上间距
padding: EdgeInsets.all(5.0),//内间距
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(bottom:BorderSide(width: 0.5,color: Colors.black12)),
color: Colors.white
),
child: Text(‘火爆专区‘),
);
//火爆专区内容 --- 流式布局
Widget _wrapList(){
if (hotGoodsList.length!=0) {//集合有数据
 
List<Widget> listWidget = hotGoodsList.map((val){//把map集合数据 改成 widget 集合数据 .map 类似于 ForIn
return InkWell(
onTap: (){
print(‘点击了火爆专区的商品‘);
},
child: Container(
width: ScreenUtil().setWidth(372),
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.only(bottom: 3.0),
child: Column(//纵向布局
children: <Widget>[
Image.network(val[‘image‘],width: ScreenUtil().setWidth(375),),
Text(
val[‘name‘],
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(color: Colors.orange,fontSize: ScreenUtil().setSp(26)),//字号
),
Row(//横向布局
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//横向布局 子控件平均分成两份
children: <Widget>[
 
Text(‘¥${val[‘mallPrice‘]}‘),
Text(
‘¥${val[‘price‘]}‘,
style: TextStyle(color: Colors.grey,decoration: TextDecoration.lineThrough),
)
],
 
)
],
),
),
);
 
}).toList();
return Wrap(
spacing: 2,
children: listWidget,
);
} else {
return Text(‘火爆专区无数据‘);
}

}
 

@override
Widget build(BuildContext context) {
 
 
return Container(
child: Column(
children: <Widget>[
hotTitle,
_wrapList()
],
),
);
}
}
 

flutter wrap 流式布局

标签:The   nta   convert   class   stat   otto   work   布局   接口   

原文地址:https://www.cnblogs.com/pp-pping/p/12235880.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!