TmOct5/gl_dao
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

首页页面搭建完成

Browse Source
This commit is contained in:
张冬雪
2022-05-30 16:15:54 +08:00
parent c343dbbe83
commit 97f5525aa7
78 changed files with 1114 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/main.dart
View File

@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'pages/tabs/tabs.dart';
// import 'pages/auth/auth.dart';
// import 'pages/auth/auth.dart';
void main() {
runApp(
const MyApp(),

18
lib/main_color.dart
View File

@@ -1,6 +1,22 @@
/*
* @Author: zhangdongxue zhangdongxue@uz.cn
* @Date: 2022-05-26 13:16:03
* @LastEditors: zhangdongxue zhangdongxue@uz.cn
* @LastEditTime: 2022-05-27 14:30:37
* @FilePath: /gl_dao/lib/main_color.dart
* @Description: 封装色值
*/
import 'package:flutter/material.dart';
const tMainColor = Color(0xfffdbb03);
const tTextColor = Color(0xff333333);
const tMainRedColor = Color(0xffc70909);
const tMainBg = Color(0xfff9f9f9);
const tTextColor333 = Color(0xff333333);
const tTextColor666 = Color(0xff666666);
const tTextColor999 = Color(0xff999999);

621
lib/pages/store/store.dart
View File

@@ -2,15 +2,19 @@
* @Author: zhangdongxue zhangdongxue@uz.cn
* @Date: 2022-05-26 13:16:03
* @LastEditors: zhangdongxue zhangdongxue@uz.cn
* @LastEditTime: 2022-05-26 17:32:19
* @LastEditTime: 2022-05-30 16:14:21
* @FilePath: /gl_dao/lib/pages/store/store.dart
* @Description: 商城首页
* @Description: 商城首页
* // width: MediaQuery.of(context).size.width,
* // height: MediaQuery.of(context).size.height,
*/
// import 'dart:html';
import 'package:flutter/material.dart';
import 'package:gl_dao/main_color.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:gl_dao/pages/store/widget/offline_title.dart';
import '../../https/auth_api.dart';
import 'widget/offline_bussiness.dart';
class StorePages extends StatefulWidget {
const StorePages({Key? key}) : super(key: key);
@@ -19,131 +23,564 @@ class StorePages extends StatefulWidget {
State<StorePages> createState() => _StorePagesState();
}
class _StorePagesState extends State<StorePages> {
class _StorePagesState extends State<StorePages> with TickerProviderStateMixin {
// 声明滚动事件
final ScrollController scrollController = ScrollController();
// 顶部自定义导航透明度
double topBarOpacity = 0.0;
// 自定义置顶分类透明度
double topCategrayOpacity = 0.0;
int _current = 0;
List categoryList = [
{
"name": "推荐",
"id": 1,
},
{
"name": "檀香",
"id": 2,
},
{
"name": "蜜蜡饰品",
"id": 3,
},
{
"name": "字画",
"id": 4,
},
{
"name": "琉璃摆件",
"id": 5,
},
];
@override
void initState() {
HttpApi().apiPost(
'user/auth/sms',
body: {
'mobileNo': '18245180131',
'code': '0000',
},
);
super.initState();
// 页面滚动触发改变顶部自定义导航样式透明度
scrollController.addListener(() {
if (scrollController.offset >= 128) {
if (topBarOpacity != 1.0) {
setState(() {
topBarOpacity = 1.0;
});
}
} else if (scrollController.offset <= 128 &&
scrollController.offset >= 0) {
if (topBarOpacity != scrollController.offset / 128) {
setState(() {
topBarOpacity = scrollController.offset / 128;
});
}
} else if (scrollController.offset <= 0) {
if (topBarOpacity != 0.0) {
setState(() {
topBarOpacity = 0.0;
});
}
}
// 监听滚动是否展示顶部分类
if (scrollController.offset > 560) {
setState(() {
topCategrayOpacity = 1.0;
});
} else {
setState(() {
topCategrayOpacity = 0.0;
});
}
});
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
backgroundColor: tMainBg,
body: Stack(
children: [
navWidget(), // 自定义顶部导航样式
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 300,
color: Colors.grey.shade100,
),
],
),
);
}
// 首页自定义顶部导航
Widget navWidget() {
return Container(
height: 200,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/banner.png'),
fit: BoxFit.cover,
opacity: 1,
),
),
padding: const EdgeInsets.fromLTRB(16, 54, 16, 16),
child: Column(
children: [
Row(
ListView(
controller: scrollController,
padding: const EdgeInsets.all(0),
children: [
GestureDetector(
onTap: selectCity,
child: Row(
// *******banner*******
Image.asset('assets/images/banner.png'),
// *******电子商城*******
Padding(
padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
child: Column(
children: [
Image.asset(
'assets/images/location.png',
width: 16.0,
),
const SizedBox(width: 6),
const Text(
'全国',
style: TextStyle(
const OfflineTitleWidget("电子商城", '精选商家推荐'),
Container(
width: MediaQuery.of(context).size.width,
height: 116,
margin: const EdgeInsets.only(top: 16),
padding: const EdgeInsets.only(left: 14),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
color: Colors.white,
fontSize: 16,
),
),
child: mySwiperWidget(),
)
],
),
),
const SizedBox(width: 16),
Expanded(
flex: 1,
child: GestureDetector(
onTap: search,
child: Container(
padding: const EdgeInsets.only(left: 16),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(36.0),
),
color: Colors.white,
),
height: 32,
child: Row(
children: [
Image.asset(
'assets/images/search.png',
width: 16.0,
),
const SizedBox(width: 10),
const Text(
'请搜索商家或商品',
style: TextStyle(
color: Colors.grey,
fontSize: 14,
),
),
// *******线下商城*******
Padding(
padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
child: Column(
children: [
const OfflineTitleWidget("线下商城", '您身边的线下体验店'),
Row(
children: const [
//首页线下商家列表item组件
OfflineBussinessWidget(),
SizedBox(width: 12),
//首页线下商家列表item组件
OfflineBussinessWidget(),
],
),
),
Row(
children: const [
//首页线下商家列表item组件
OfflineBussinessWidget(),
SizedBox(width: 12),
//首页线下商家列表item组件
OfflineBussinessWidget(),
],
)
],
),
),
const SizedBox(width: 10),
GestureDetector(
onTap: add,
child: const Icon(
Icons.add,
size: 30,
color: Colors.white,
// *******分类组件*******
Padding(
padding: const EdgeInsets.only(bottom: 6.0),
child: categoryWidget(),
),
// *******商品列表*******
Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(
left: 10,
right: 10,
),
child: Wrap(
spacing: 10,
runSpacing: 6,
children: _goodWidget(),
),
),
],
),
// *******是否显示顶部分类组件*******
topCategrayOpacity > 0
? Positioned(
top: 90,
width: MediaQuery.of(context).size.width,
child: Container(
padding: const EdgeInsets.only(bottom: 6),
color: Colors.white,
child: categoryWidget(),
),
)
: const Text(''),
// *******顶部导航*******
navWidget(),
// *******原来设计*******
// demo(0.8),
],
),
);
}
// 选择城市
// 把自定义商品列表组件
List<Widget> _goodWidget() {
return categoryList.map((val) {
return Card(
// margin: const EdgeInsets.all(10.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
shadowColor: Colors.black12,
child: SizedBox(
width: MediaQuery.of(context).size.width / 2 - 25,
child: Column(
children: [
AspectRatio(
aspectRatio: 9.0 / 9.2,
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
child: Image.network(
'https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover,
),
),
),
Container(
padding: const EdgeInsets.only(
left: 10,
right: 6,
top: 6,
bottom: 6,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 38,
width: double.infinity,
child: Text(
val["id"] == 1
? '雄风 - 人呀年瞎猜书迷功能与成语人呀年瞎猜书迷功能与成语人呀年瞎猜书迷功能与成语人呀年瞎猜书迷功能与成语'
: '富贵花开',
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
color: tTextColor333,
fontWeight: FontWeight.w600,
),
strutStyle: const StrutStyle(
forceStrutHeight: true,
height: 1,
leading: 0.3, //行距（0.5即行高的一半）
),
maxLines: 2,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: const [
Text(
'1999',
style: TextStyle(
fontSize: 18,
color: tMainRedColor,
fontWeight: FontWeight.w600,
),
),
SizedBox(width: 2),
Text(
'DT积分',
style: TextStyle(
fontSize: 12,
color: tMainRedColor,
),
),
],
),
const Text(
'月销量10',
style: TextStyle(
fontSize: 12,
color: tTextColor666,
),
)
],
)
],
),
)
],
),
),
);
}).toList();
}
// 分类组件
Widget categoryWidget() {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
// padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: categoryList.asMap().keys.map((index) {
return GestureDetector(
onTap: () {
setState(() {
_current = index;
});
},
child: Column(
children: [
Container(
padding: const EdgeInsets.only(
top: 20, left: 17, right: 17, bottom: 4),
child: Text(
categoryList[index]["name"],
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color:
_current == index ? tMainRedColor : tTextColor333),
),
),
_current == index
? Image.asset(
'assets/images/select_1.png',
width: 14,
height: 6,
)
: const SizedBox(
width: 14,
height: 6,
),
],
),
);
}).toList(),
),
);
}
// 电子商城 轮播图
Widget mySwiperWidget() {
List<List> imgList = [
[
{
"title": '1名创优品',
"url":
"http://img5.mtime.cn/mg/2021/08/24/141454.81651527_285X160X4.jpg",
},
{
"title": '1耐克',
"url":
"http://img5.mtime.cn/mg/2021/08/24/134535.67957178_285X160X4.jpg"
},
{
"title": '1百草味',
"url":
"http://img5.mtime.cn/mg/2021/08/24/112722.60735295_285X160X4.jpg"
},
{
"title": '1MLB',
"url":
"http://img5.mtime.cn/mg/2021/08/24/110937.63038065_285X160X4.jpg"
},
],
[
{
"title": '名创优品',
"url":
"http://img5.mtime.cn/mg/2021/08/24/141454.81651527_285X160X4.jpg",
},
{
"title": '耐克',
"url":
"http://img5.mtime.cn/mg/2021/08/24/134535.67957178_285X160X4.jpg"
},
{
"title": '百草味',
"url":
"http://img5.mtime.cn/mg/2021/08/24/112722.60735295_285X160X4.jpg"
},
{
"title": 'MLB',
"url":
"http://img5.mtime.cn/mg/2021/08/24/110937.63038065_285X160X4.jpg"
},
]
];
return Padding(
padding: const EdgeInsets.only(top: 14, right: 10),
child: Swiper(
itemBuilder: (BuildContext context, int index) {
//每次循环遍历时，将i赋值给index imgList[index]['title'],
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: imgList[index].map((it) {
return SizedBox(
width: (MediaQuery.of(context).size.width - 60) / 4,
child: Column(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
border: Border.all(
color: tTextColor999.withOpacity(.2),
width: 1,
),
),
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
child: Image.network(
it['url'],
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 8),
Text(
it['title'],
style: const TextStyle(
color: Colors.black,
fontSize: 13,
),
)
],
),
);
}).toList(),
);
},
itemCount: imgList.length,
//指示器
pagination: SwiperPagination(
builder: DotSwiperPaginationBuilder(
size: 6,
color: tTextColor999.withOpacity(.4),
activeSize: 6,
activeColor: tMainRedColor,
),
),
),
);
}
// 自定义顶部导航
Widget navWidget() {
return Positioned(
top: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 90,
color: tMainRedColor.withOpacity(topBarOpacity),
padding: const EdgeInsets.only(
top: 40,
left: 15,
right: 15,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: selectCity,
child: Row(
children: [
Image.asset(
'assets/images/location.png',
width: 16.0,
),
const SizedBox(width: 6),
const Text(
'全国',
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
],
),
),
const SizedBox(width: 14),
Expanded(
flex: 1,
child: GestureDetector(
onTap: search,
child: Container(
padding: const EdgeInsets.only(left: 10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(36.0),
),
color: Colors.white,
),
height: 32,
child: Row(
children: [
Image.asset(
'assets/images/search.png',
width: 14.0,
),
const SizedBox(width: 10),
const Text(
'请搜索商家或商品',
style: TextStyle(
color: Colors.grey,
fontSize: 13,
),
),
],
),
),
),
),
const SizedBox(width: 10),
GestureDetector(
onTap: add,
child: const Icon(
Icons.add,
size: 22,
color: Colors.white,
),
),
],
),
),
);
}
// 自定义顶部导航-选择城市
selectCity() {
// ignore: avoid_print
print('selectCity');
}
// 搜索按钮
// 自定义顶部导航-搜索按钮
search() {
// ignore: avoid_print
print('search');
}
// 添加按钮
// 自定义顶部导航-添加按钮
add() {
print('addadd');
// ignore: avoid_print
print('add');
}
Widget demo(double opci) {
return ListView(
children: [
SizedBox(
width: 750,
child: Opacity(
opacity: opci,
child: Image.asset(
'assets/images/top.png',
width: 750,
fit: BoxFit.cover,
alignment: Alignment.bottomCenter,
),
),
)
],
);
}
}

135
lib/pages/store/store_copy.dart
View File

@@ -1,135 +0,0 @@
/*
* @Author: zhangdongxue zhangdongxue@uz.cn
* @Date: 2022-05-26 13:16:03
* @LastEditors: zhangdongxue zhangdongxue@uz.cn
* @LastEditTime: 2022-05-26 17:06:33
* @FilePath: /gl_dao/lib/pages/store/store.dart
* @Description: 商城首页
*/
import 'package:flutter/material.dart';
// import '../auth/auth.dart';
import '../../https/auth_api.dart';
class StorePages extends StatefulWidget {
const StorePages({Key? key}) : super(key: key);
@override
State<StorePages> createState() => _StorePagesState();
}
class _StorePagesState extends State<StorePages> {
@override
void initState() {
HttpApi().apiPost(
'user/auth/sms',
body: {
'mobileNo': '18245180131',
'code': '0000',
},
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
shadowColor: Colors.white.withOpacity(0),
backgroundColor: Colors.red.withOpacity(.9),
leadingWidth: 0,
leading: IconButton(
tooltip: 'hello',
icon: const Icon(
Icons.location_on_outlined,
size: 20,
),
onPressed: () {
print('menu Pressed');
},
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: selectCity,
child: const Text(
'全国',
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
),
const SizedBox(width: 14),
Expanded(
flex: 1,
child: GestureDetector(
onTap: search,
child: Container(
padding: const EdgeInsets.only(left: 16),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(36.0),
),
color: Colors.white,
),
height: 34,
child: Row(
children: [
Image.asset(
'assets/images/search.png',
width: 16.0,
),
const SizedBox(width: 6),
const Text(
'请搜索商家或商品',
style: TextStyle(
color: Colors.grey,
fontSize: 14,
),
),
],
),
),
),
),
],
),
centerTitle: true, // 是否居中显示
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add),
tooltip: "more_horiz",
onPressed: () {
print('点击了加号');
},
)
],
),
body: Column(
children: [
Row(
children: [
// 按钮前面加上icon
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.search),
label: Text('图标按钮'),
),
],
)
],
),
);
}
selectCity() {
print('selectCity');
}
search() {
print('search');
}
}

115
lib/pages/store/widget/offline_bussiness.dart Normal file
View File

@@ -0,0 +1,115 @@
/*
* @Author: zhangdongxue zhangdongxue@uz.cn
* @Date: 2022-05-27 15:10:21
* @LastEditors: zhangdongxue zhangdongxue@uz.cn
* @LastEditTime: 2022-05-27 15:51:10
* @FilePath: /gl_dao/lib/pages/store/widget/offline_bussiness.dart
* @Description: 线下商家首页展示样式
*/
import 'package:flutter/material.dart';
import '../../../main_color.dart';
class OfflineBussinessWidget extends StatefulWidget {
const OfflineBussinessWidget({Key? key}) : super(key: key);
@override
State<OfflineBussinessWidget> createState() => _OfflineBussinessWidgetState();
}
class _OfflineBussinessWidgetState extends State<OfflineBussinessWidget> {
@override
Widget build(BuildContext context) {
return Container(
width: ((MediaQuery.of(context).size.width / 2) - 22),
height: 104,
margin: const EdgeInsets.only(top: 10),
padding: const EdgeInsets.only(left: 10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.only(
top: 16,
left: 0,
right: 10,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'吉屋居酒屋',
style: TextStyle(
fontSize: 14,
color: tTextColor333,
overflow: TextOverflow.ellipsis,
),
),
const Text(
'距离1.5KM',
style: TextStyle(
fontSize: 12,
color: tTextColor999,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(height: 10),
Container(
padding: const EdgeInsets.only(
left: 10,
right: 10,
top: 1,
bottom: 1,
),
decoration: BoxDecoration(
border: Border.all(
color: tMainRedColor.withOpacity(0.7),
width: 1,
),
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
),
child: const Text(
'前往体验',
style: TextStyle(
color: tMainRedColor,
fontSize: 12,
),
),
)
],
),
),
Container(
height: double.infinity,
margin: const EdgeInsets.only(top: 10),
child: Column(
children: [
SizedBox(
child: ClipOval(
child: Image.network(
'http://img5.mtime.cn/mg/2021/08/24/141454.81651527_285X160X4.jpg',
width: 54,
height: 54,
fit: BoxFit.cover,
),
),
),
],
),
),
],
),
),
);
}
}

51
lib/pages/store/widget/offline_title.dart Normal file
View File

@@ -0,0 +1,51 @@
/*
* @Author: zhangdongxue zhangdongxue@uz.cn
* @Date: 2022-05-27 15:24:22
* @LastEditors: zhangdongxue zhangdongxue@uz.cn
* @LastEditTime: 2022-05-27 15:29:11
* @FilePath: /gl_dao/lib/pages/store/widget/offline_title.dart
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import 'package:flutter/material.dart';
import '../../../main_color.dart';
class OfflineTitleWidget extends StatelessWidget {
final String title;
final String des;
const OfflineTitleWidget(this.title, this.des, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
color: tTextColor333,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: 14),
const Text(
'|',
style: TextStyle(
color: tTextColor999,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
const SizedBox(width: 6),
Text(
des,
style: const TextStyle(
color: tTextColor999,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
],
);
}
}

8
lib/pages/tabs/tabs.dart
View File

@@ -1,3 +1,11 @@
/*
* @Author: zhangdongxue zhangdongxue@uz.cn
* @Date: 2022-05-26 13:16:03
* @LastEditors: zhangdongxue zhangdongxue@uz.cn
* @LastEditTime: 2022-05-27 18:04:21
* @FilePath: /gl_dao/lib/pages/tabs/tabs.dart
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import 'package:flutter/material.dart';
import '../../main_color.dart';