274087e15ddbe7a6e0a42086a47bbad.png
import 'dart:js';
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';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
//初始化设置尺寸
ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(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> swiperDataList = (data['data']['slides'] as List).cast();
// 顶部轮播组件数
List<Map> navigatorList =(data['data']['category'] as List).cast(); //类别列表
String advertesPicture = data['data']['advertesPicture']['PICTURE_ADDRESS']; //广告图片
String leaderImage= data['data']['shopInfo']['leaderImage']; //店长图片
String leaderPhone = data['data']['shopInfo']['leaderPhone']; //店长电话
List<Map> recommendList = (data['data']['recommend'] as List).cast(); // 商品推荐
return SingleChildScrollView(
child: Column(
children: <Widget>[
SwiperDiy(swiperDataList:swiperDataList), //页面顶部轮播组件
TopNavigator(navgatorList:navigatorList), //导航组件
AdBanner(advertesPicture:advertesPicture), //广告组件
LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone), //广告组件
Recommend(recommendList: recommendList),
],
),
);
}else{
return Center(
child: Text('加载中'),
);
}
},
)
);
}
}
// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {
final List swiperDataList;
SwiperDiy({Key key,this.swiperDataList}):super(key:key);
@override
Widget build(BuildContext context){
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
return Container(
height: ScreenUtil().setHeight(333),
width: ScreenUtil().setWidth(750),
child: Swiper(
itemCount: 3,
itemBuilder: (BuildContext context,int index){
return Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill);
},
pagination: SwiperPagination(),//轮播图小点
autoplay: true,//自动播放
),
);
}
}
//首页导航区域编写
class TopNavigator extends StatelessWidget
{
final List navgatorList;
TopNavigator({Key key, this.navgatorList}) : super(key: key);
Widget _gridItemUI(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){
return Container(
height: ScreenUtil().setHeight(320),
padding: EdgeInsets.all(3.0),
child: GridView.count(
crossAxisCount: 5,
padding: EdgeInsets.all(4.0),
children:
navgatorList.map((item){
return _gridItemUI(context,item);
}).toList()
),
);
}
}
//广告图片
class AdBanner extends StatelessWidget
{
final String advertesPicture;
AdBanner({Key key, this.advertesPicture}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Image.network(advertesPicture),
);
}
}
//打电话
class LeaderPhone extends StatelessWidget {
final String leaderImage; //店长图片
final String leaderPhone; //店长电话
LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: InkWell(
onTap:_launchURL,
child: Image.network(leaderImage),
),
);
}
void _launchURL() async {
String url = 'tel:'+leaderPhone;
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}
//商品推荐区域
class Recommend extends StatelessWidget{
final List recommendList;
Recommend({Key key,this.recommendList}):super(key:key);
@override
Widget build(BuildContext context){
return Container(
height: ScreenUtil().setHeight(380),
margin: EdgeInsets.only(top: 10.0),
child: Column(
children: <Widget>[
],
),
);
}
//推荐商品标题
Widget _titleWidget(){
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.fromLTRB(10.0, 2.0, 0, 5.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(width: 0.5,color: Colors.black12)
)
),
child: Text(
'商品推荐',
style: TextStyle(color: Colors.pink),
),
);
}
//商品列表
Widget _reccomendList(){
return Container(
height: ScreenUtil().setHeight(330),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: recommendList.length,
itemBuilder: (context,index){
return _item(index);
},
),
);
}
//推荐item
Widget _item(index){
return InkWell(
onTap: (){
print('点击推荐商品');
},
child: Container(
height: ScreenUtil().setHeight(330),
width: ScreenUtil().setWidth(250),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color:Colors.white,
border:Border(
left: BorderSide(width:0.5,color:Colors.black12)
)
),
child: Column(
children: <Widget>[
Image.network(recommendList[index]['image']),
Text('￥${recommendList[index]['mallPrice']}'),
Text(
'￥${recommendList[index]['price']}',
style: TextStyle(
decoration: TextDecoration.lineThrough,
color: Colors.grey
),
),
],
),
),
);
}
}
网友评论