接着上次的来:我准备了一个数据库:先来2个表,数据你可以自己添加一些。然后你需要自己写一个接口:由于是虚拟机网卡不在本机,所以你这里设置的地址应该是虚拟机访问的地址,最好是在网络上。
CREATE TABLE `faqiniu_app_category` (
`Id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
`category` varchar(30) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '分类名称',
`iconimage` varchar(255) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '图片',
`createtime` int(10) NOT NULL DEFAULT '0' COMMENT '创建时间',
`updatetime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
`weigh` int(10) NOT NULL DEFAULT '0' COMMENT '权重',
`status` varchar(30) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '状态',
PRIMARY KEY (`Id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COMMENT='APP分类表';
#
# Data for table "faqiniu_app_category"
#
/*!40000 ALTER TABLE `faqiniu_app_category` DISABLE KEYS */;
INSERT INTO `faqiniu_app_category` VALUES (1,'小猪','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621575672&di=c790d749b8416026851289b40b95a26e&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1132408539%2C295489701%26fm%3D214%26gp%3D0.jpg',1573611521,1573611521,1,'1'),(2,'奶牛','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573838&di=98c74b1adb216143593e3d7cdab16cdb&imgtype=0&src=http%3A%2F%2Fwww.96weixin.com%2Fupload%2F20181128%2F1543377987753618.jpg',1573611564,1573611564,2,'1'),(3,'兔兔','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573835&di=1518cdb62d5f8c3cf3ec9e6ac7d29bcf&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-3%2F2016031409495466836.jpg',1573611592,1573611592,3,'1'),(4,'海豚','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573871&di=5bb26f2b426eb9e8a312d935a9d8888e&imgtype=0&src=http%3A%2F%2Fimg26.nipic.com%2F20110815%2F3674499_163211079375_1.jpg',1573611619,1573611619,4,'1'),(5,'女生','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573870&di=9e128c472b6a519d47799eda90b64387&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_ls%2F0%2F4543723534_200200%2F0.jpg',1573611644,1573611644,5,'1'),(6,'麻雀','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750163&di=e8202bd02da38214212bab495bcf34a4&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_ls%2F0%2F5813383339_200200%2F0.jpg',1573611694,1573611694,6,'1'),(7,'久妮','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750161&di=132561324273ad20124a10994461197a&imgtype=0&src=http%3A%2F%2Ftx.haiqq.com%2Fuploads%2Fallimg%2F170426%2F0922045M9-8.jpg',1573611725,1573611725,7,'1'),(8,'动物','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750161&di=ebc2735c9992be3f3a34de5764e77294&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_ls%2F0%2F8477897421_200200%2F0.jpg',1573611741,1573611741,8,'1'),(9,'皮卡丘','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750160&di=ab92d5382050e77fe287227a9806f337&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Fface%2Fd4f96bf5a5c907d5a6db4344184efc0266205c9f.gif',1573611773,1573611773,9,'1'),(10,'小绿','/uploads/20191113/6aba40b393179cecde4fe0f0f1bfb61fMax.png',1573611800,1573611800,10,'1');
#
# Structure for table "faqiniu_app_lunbo"
#
CREATE TABLE `faqiniu_app_lunbo` (
`Id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
`urlimage` varchar(255) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '下载地址',
`goodsid` int(11) NOT NULL DEFAULT '0' COMMENT '商品ID',
`createtime` int(10) NOT NULL DEFAULT '0' COMMENT '创建时间',
`updatetime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
`weigh` int(10) NOT NULL DEFAULT '0' COMMENT '权重',
`status` varchar(30) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '状态',
PRIMARY KEY (`Id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COMMENT='APP轮播图';
#
# Data for table "faqiniu_app_lunbo"
#
INSERT INTO `faqiniu_app_lunbo` VALUES (1,'http: 0a3b31Max.jpg',1,1573608905,1573608905,1,'1'),(2,'/uplo 1Max.png',2,1573608966,1573608966,2,'1');
最后让你的输出类似这样。
数据准备好了,然后修改我们上次的代码:
确认你添加了相关的依赖:
lib/main.dart:
import 'package:flutter/material.dart';
import './pages/index_page.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
title:'百姓生活+',
debugShowCheckedModeBanner: false, //Flutter去除右上角Debug标签
theme: ThemeData(
primaryColor:Colors.pink
),
home:IndexPage()
),
);
}
}
lib/pages/index_page.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';
class IndexPage extends StatefulWidget {
@override
_IndexPageState createState() => _IndexPageState();
}
class _IndexPageState extends State<IndexPage> {
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.search), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.shopping_cart), title: Text('购物车')),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled), title: Text('会员中心'))
];
final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];
int currentIndex = 0;
var currentPage;
@override
void initState() {
super.initState();
currentPage = tabBodies[currentIndex];
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items: bottomTabs,
onTap: (index) {
setState(() {
currentIndex = index;
currentPage = tabBodies[currentIndex];
});
},
),
body: currentPage,
);
}
}
同级目录下四个分页:
homexxxxx
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 './TopNavigator.dart';
import './ad_banner.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("百姓生活+"),
),
body: FutureBuilder(
future: getHomePageContent(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var e = json.encode(snapshot.data);
var data = json.decode(e.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']; //广告图片
// print(swiperDataList);
return Column(
children: <Widget>[
SwiperDiy(swiperDataList: swiperDataList),
TopNavigator(navigatorList: navigatorList), //导航组件
AdBanner(advertesPicture: advertesPicture), //广告组件
],
);
} else {
return Center(
child: Text('Loading....'),
);
}
},
));
}
}
// 首页轮播组件编写
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(
itemBuilder: (BuildContext context, int index) {
return Image.network("${swiperDataList[index]['urlimage']}",
fit: BoxFit.fill);
},
itemCount: swiperDataList.length,
pagination: new SwiperPagination(),
autoplay: true,
),
);
}
}
service
.
import 'package:dio/dio.dart';
import 'dart:async';
// import 'dart:io';
import '../config/service_url.dart';
Future getHomePageContent() async {
try {
print('start get HomePage data.....');
Response response;
Dio dio = new Dio();
// dio.options.contentType("application/x-www-form-urlencoded") ;
var fromData = {'Sokey': ''};
response = await dio.post(servicePath['homePageContext'], data: fromData);
if (response.statusCode == 200) {
return response.data;
} else {
throw Exception('后端接口异常!');
}
} catch (e) {
return print('ERROR:======>' + e);
}
}
serviceurl.dart
const serviceUrl= 'http://www. com/index/ajax/';//此端口 自行fiddle获取。
const servicePath={
'homePageContext': serviceUrl+'homePageContent', // 商家首页信息
};
下面我增加一个插件:可以用来拨打电话
https://github.com/flutter/plugins/tree/master/packages/url_launcher