main.dart
import 'package:flutter/material.dart';
import 'routes/router.dart';
void main() => runApp(MyApp()); class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key); _MyAppState createState() => _MyAppState();
} class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs() ,
debugShowCheckedModeBanner: false,
initialRoute: '/search',
onGenerateRoute:onGenerateRoute,
theme: ThemeData(
primaryColor: Colors.white
),
);
}
}
Tabs.dart
import 'package:flutter/material.dart';
import '../../services/ScreenAdaper.dart'; import 'Home.dart';
import 'Cart.dart';
import 'Category.dart';
import 'User.dart'; class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState();
} class _TabsState extends State<Tabs> {
int _currentIndex = ;
PageController _pageController;
void initState() {
super.initState();
this._pageController = new PageController(initialPage: this._currentIndex);
} List<Widget> _pageList = [HomePage(), CategoryPage(), CartPage(), UserPage()];
@override
Widget build(BuildContext context) {
ScreenAdaper.init(context); return Container(
child: Scaffold(
appBar:_currentIndex!=?AppBar(
leading: IconButton(
icon:
Icon(Icons.center_focus_weak, size: , color: Colors.black87),
onPressed: null,
),
title:InkWell(
child: Container(
height: ScreenAdaper.height(),
decoration: BoxDecoration(
color: Color.fromRGBO(,,, 0.8),
borderRadius: BorderRadius.circular()
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.search),
Text('笔记本',style:TextStyle(
fontSize: ScreenAdaper.size()
))
],
),
),
onTap: (){
Navigator.pushNamed(context,'/search');
},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.message,
size: , color: Colors.black87),
onPressed: null,
)
],
):AppBar(
title: Text('用户中心'),
),
//页面状态保持第一种方法：
//保持所有的页面状态，使用indexedStack
// body:IndexedStack(
// index: this._currentIndex,
// children:_pageList
// ),
//保持部分页面的状态：
// body: PageView(
//修改的部分：
controller: this._pageController,
children: this._pageList,
onPageChanged:(index){
setState(() {
this._currentIndex=index;
});
},
// physics: NeverScrollableScrollPhysics(), //禁止pageView滑动
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (index) {
this.setState(() {
this._currentIndex = index;
this._pageController.jumpToPage(this._currentIndex);
});
},
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), title: Text('购物车')),
BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的'))
],
),
),
);
}
}
Home.dart
import 'package:flutter/material.dart'; //热门推荐：
import '../../model/ProductModel.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
// import 'dart:convert';
import '../../services/ScreenAdaper.dart';
import '../../config/Config.dart';
import 'package:dio/dio.dart';
//轮播图类模型：
import '../../model/FocusModel.dart'; class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
//轮播图：
//flutter run -d all 链接多个设备的命令：
List _focusData = [];
List _hotProductList=[];
List _bestProductList=[];
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
void initState() {
super.initState();
_getFocusData();
_getHotProductData();
_getBestProductData();
}
//获取轮播图数据：
_getFocusData() async {
var api = '${Config.domain}api/focus';
var result = await Dio().get(api);
var focusList = FocusModel.fromJson(result.data);
focusList.result.forEach((value) {
print(value.title);
print(value.pic);
});
setState(() {
this._focusData = focusList.result;
});
}
//获取猜你喜欢的数据：
_getHotProductData() async{
var api='${Config.domain}api/plist?is_hot=1';
var result=await Dio().get(api);
var hotProductList=ProductModel.fromJson(result.data);
setState(() {
this._hotProductList= hotProductList.result;
});
}
//获取热门推荐的数据：
_getBestProductData() async{
var api='${Config.domain}api/plist?is_best=1';
var result=await Dio().get(api);
var bestProductList=ProductModel.fromJson(result.data);
setState(() {
this._bestProductList= bestProductList.result;
});
} Widget _swiperWidget() {
// List<Map> imgList = [
// {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
// {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
// {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
// ];
if (this._focusData.length > ) {
return Container(
child: AspectRatio(
aspectRatio: / ,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
String pic=this._focusData[index].pic;
pic=Config.domain+pic.replaceAll('\\', '/');
return new Image.network(
"${pic}",
fit: BoxFit.fill,
);
},
itemCount: this._focusData.length,
pagination: new SwiperPagination(),
control: new SwiperControl(),
autoplay: true,
),
),
);
} else {
return Text('加载中~');
}
} //标题：
Widget _titleWidget(value) {
return Container(
height: ScreenAdaper.height(),
margin: EdgeInsets.only(left: ScreenAdaper.width()),
padding: EdgeInsets.only(left: ScreenAdaper.width()),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.red, width: ScreenAdaper.width()))),
child: Text(value, style: TextStyle(color: Colors.black54)),
);
} //热门商品：
Widget _hotProductListWidget() {
if(this._hotProductList.length>){
return Container(
height: ScreenAdaper.height(),
padding: EdgeInsets.all(ScreenAdaper.width()),
// width: double.infinity, //寬度自適應
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (contxt, index) { String sPic=this._hotProductList[index].sPic;
sPic=Config.domain+sPic.replaceAll('\\', '/');
return Column(
children: <Widget>[
Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
margin: EdgeInsets.only(right: ScreenAdaper.width()),
child: Image.network(
"${sPic}",
fit: BoxFit.cover),
),
Container(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
height: ScreenAdaper.height(),
child: Text(
"￥${this._hotProductList[index].price}",
style: TextStyle(color: Colors.red),
),
)
],
);
},
itemCount: this._hotProductList.length,
),
); }else{
return Text('暂无热门推荐数据');
} } Widget _recProductListWidget() { var itemWidth = (ScreenAdaper.getScreenWidth() - ) / ;
return Container(
padding: EdgeInsets.all(),
child: Wrap(
runSpacing: ,
spacing: ,
children:this._bestProductList.map((value){
//图片：
var sPic=value.sPic;
sPic=Config.domain+sPic.replaceAll('\\','/'); return Container(
padding: EdgeInsets.all(ScreenAdaper.width()),
width: itemWidth,
decoration:
BoxDecoration(border: Border.all(color: Colors.black12, width: )),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
child: AspectRatio(
aspectRatio: / ,
child: Image.network(
"${sPic}",
fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
child: Text(
"${value.title}",
maxLines: ,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black54),
),
),
Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"${value.price}",
style: TextStyle(color: Colors.red, fontSize: ),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
"￥${value.oldPrice}",
style: TextStyle(
color: Colors.black54,
fontSize: ,
decoration: TextDecoration.lineThrough),
),
)
],
),
)
],
),
); }).toList(),
),
); } @override
Widget build(BuildContext context) {
ScreenAdaper.init(context);
return ListView(
children: <Widget>[
_swiperWidget(),
SizedBox(height: ScreenAdaper.height()),
_titleWidget("猜你喜欢"),
_hotProductListWidget(),
SizedBox(height: ScreenAdaper.height()),
_titleWidget("热门推荐"),
_recProductListWidget()
],
);
}
}
ScreenAdaper.dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
class ScreenAdaper {
//
static init(context) {
ScreenUtil.instance = ScreenUtil(width: , height: )..init(context);
}
static height(double value) {
return ScreenUtil.getInstance().setHeight(value);
}
static width(double value) {
return ScreenUtil.getInstance().setWidth(value);
}
static getScreenHeight() {
return ScreenUtil.screenHeightDp;
}
static getScreenWidth() {
return ScreenUtil.screenWidthDp;
}
static size(double size) { //适配字体
return ScreenUtil.getInstance().setSp(size);
}
}
/* */Search.dart
import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdaper.dart';
class SearchPage extends StatefulWidget {
SearchPage({Key key}) : super(key: key); _SearchPageState createState() => _SearchPageState();
} class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Container(
child: TextField(
autofocus: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(),
borderSide: BorderSide.none
)
),
),
height: ScreenAdaper.height(),
decoration: BoxDecoration(
color: Color.fromRGBO(,,,0.8),
borderRadius: BorderRadius.circular()
),
),
actions: <Widget>[
InkWell(
child: Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
child: Row(
children: <Widget>[
Text('搜索')
],
),
),
onTap: (){ },
)
],
),
body: Text('搜索')
);
}
}