提交 a2543a67 authored 作者: yueweilu's avatar yueweilu

1、书籍评分界面

2、积分界面 3、书籍目录界面 4、书籍信息界面
上级 94a69405
library book_category;
import 'package:flutter/material.dart';
import 'package:flutter_book/utils/index.dart';
part 'view.dart';
\ No newline at end of file
part 'view.dart';
part 'widgets/item.dart';
\ No newline at end of file
......@@ -11,10 +11,17 @@ class BookCategoryPage extends StatefulWidget {
class _BookCategoryPageState extends State<BookCategoryPage> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.cyan,
height: double.infinity,
// height: 100,
return Column(
children: [
Expanded(
child: ListView.builder(
itemBuilder:(BuildContext context, int index){
return BuildItem();
},
itemCount: 6,
),
),
],
);
}
}
part of book_category;
class BuildItem extends StatefulWidget {
const BuildItem({Key? key}) : super(key: key);
@override
State<BuildItem> createState() => _BuildItemState();
}
class _BuildItemState extends State<BuildItem> {
@override
Widget build(BuildContext context) {
return Column(
children: [
/// 章节名称容器
Container(
margin: EdgeInsets.symmetric(horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('第二章,你好好啊哈',style: TextStyle(fontSize: 14,color: Colours.c3,fontWeight: Fonts.medium,height: 1.6),),
Container(
width: 14,
height: 4,
color: Colors.cyan,
)
],
)
),
/// 节的名称容器
Visibility(
visible: true,
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index){
return _buildSection();
},
itemCount: 5,
)
)
],
);
}
Widget _buildSection(){
return Container(
margin: EdgeInsets.only(left: 60),
child: Text('第一节 加入权利游侠',style: TextStyle(fontSize: 12,color: Colours.c3,height: 1.6),),
);
}
}
......@@ -13,6 +13,7 @@ import 'package:ionicons/ionicons.dart';
import '../../routes/index.dart';
import '../book_category/index.dart';
import '../book_info/index.dart';
import '../book_shop/index.dart';
......
......@@ -35,44 +35,95 @@ class _BookDetailPageState extends State<BookDetailPage> with SingleTickerProvid
),
],
),
body: test()
// Column(
// children: [
// const BuildBook(),
// Container(
// height: 10,
// color: const Color(0xFFF9F9F9),
// ),
// const BuildStudy(),
// Container(
// height: 2,
// color: const Color(0xFFF9F9F9),
// ),
// TabBar(
// labelColor: AppTheme.primary,
// // isScrollable: true,
// labelStyle: const TextStyle(fontSize: 15,height: 1.4,fontWeight: Fonts.medium),
// unselectedLabelColor: Colours.c9,
// unselectedLabelStyle: const TextStyle(fontSize: 15,height: 1.4),
// indicatorSize: TabBarIndicatorSize.label,
// indicatorColor: AppTheme.primary,
// tabs:controller.tabs,
// physics: const NeverScrollableScrollPhysics(),
// controller: controller.tabController,
// ),
// Expanded(
// child: TabBarView(
// controller: controller.tabController,
// children: [
// BookCategoryPage(),
// BookCategoryPage(),
// BookCategoryPage(),
// ],
// ),
// ),
//
// ],
// ),
body:
Column(
children: [
const BuildBook(),
Container(
height: 10,
color: const Color(0xFFF9F9F9),
),
const BuildStudy(),
Container(
height: 2,
color: const Color(0xFFF9F9F9),
),
TabBar(
labelColor: AppTheme.primary,
// isScrollable: true,
labelStyle: const TextStyle(fontSize: 15,height: 1.4,fontWeight: Fonts.medium),
unselectedLabelColor: Colours.c9,
unselectedLabelStyle: const TextStyle(fontSize: 15,height: 1.4),
indicatorSize: TabBarIndicatorSize.label,
indicatorColor: AppTheme.primary,
tabs:controller.tabs,
physics: const NeverScrollableScrollPhysics(),
controller: controller.tabController,
),
Expanded(
child: TabBarView(
controller: controller.tabController,
children: [
BookCategoryPage(),
Container(
color: Colors.lightBlue,
),
BookInfoPage()
],
),
),
],
),
bottomNavigationBar: SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: GestureDetector(
onTap: (){
context.pushNamed(Routes.studyReport);
},
child: Container(
alignment: Alignment.center,
height: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.5),
border:Border.all(
width: 0.5,
color: Colours.c9
),
// color: Colours.cE0.withOpacity(0.5),
),
// padding: EdgeInsets.symmetric(vertical: 8),
child: const Text('学习报告',style: TextStyle(fontSize: 13,color: Colours.c9,height: 1.5),),
),
),
),
Gaps.hGaps10,
Expanded(
child: GestureDetector(
onTap: (){
context.pushNamed(Routes.creditPoints);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.5),
color: AppTheme.primary.withOpacity(0.1)
),
height: 35,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(vertical: 8),
child: Text('阅读',style: TextStyle(fontSize: 13,color: AppTheme.primary,height: 1.5),),
),
),
)
],
),
),
),
),
);
......
library book_info;
import 'package:flutter/material.dart';
import 'package:flutter_book/utils/index.dart';
import 'package:flutter_star/star.dart';
import 'package:flutter_star/star_score.dart';
import 'package:go_router/go_router.dart';
import '../../routes/index.dart';
import '../../theme.dart';
part 'view.dart';
\ No newline at end of file
part of book_info;
class BookInfoPage extends StatefulWidget {
const BookInfoPage({Key? key}) : super(key: key);
@override
State<BookInfoPage> createState() => _BookInfoPageState();
}
class _BookInfoPageState extends State<BookInfoPage> {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 18),
child: Column(
children: [
// 评分容器
Column(
children: [
Container(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('评分及书评',style: TextStyle(fontSize: 14,color: Colours.c3,height: 1.6,fontWeight: Fonts.medium),),
Container(
child: Row(
children: [
GestureDetector(
child: const Text('查看全部',style: TextStyle(fontSize: 11,color: Colours.c9),),
onTap: (){
context.pushNamed(Routes.bookScore);
},
),
Gaps.hGaps5,
Container(
width: 5,
height: 8,
// color: Colors.cyan,
child: Image.asset(
'assets/images/right_arrow.png',
),
)
]
),
)
],
),
),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Row(
children: [
const Column(
mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('4.8',style: TextStyle(fontSize: 35,height: 1.5,fontWeight: Fonts.boldSemi,color: AppTheme.primary),),
StarScore(
score: 4.5,
star: Star(
fillColor: AppTheme.primary,
size: 12,
emptyColor: Color(0xFFEBEBEB)),
),
],
),
Expanded(
child: Container(
height: 90,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_buildProgrss(5, 0.2),
_buildProgrss(4, 0.5),
_buildProgrss(3, 0.8),
_buildProgrss(2, 0.2),
_buildProgrss(1, 0.1),
],
),
),
)
],
),
)
],
),
Container(height: 1,width: double.infinity,color: Colours.cF2,),
Gaps.vGaps15,
// 书籍信息
Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: ['书名','作者','分类','出品方','出版社','上架时间'].map((item){
return Row(
// mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.cyan,
alignment: Alignment.centerRight,
child: Text(item,style: TextStyle(fontSize: 11,height: 2.1,color: Colours.c3),),
),
Gaps.hGaps20,
Container(
alignment: Alignment.centerLeft,
child: Text(item,style: TextStyle(fontSize: 11,height: 2.1,color: Colours.c9),textAlign: TextAlign.end,),
),
],
);
}).toList(),
),
)
],
),
);
}
Widget _buildProgrss(double num, double value) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
StarScore(
score: num,
star: Star(
fillColor: Colours.cE2,
size: 12,
emptyColor: Colours.cE2,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(2.5),
child: SizedBox(
width: 100,
height: 5,
child: LinearProgressIndicator(
value: value, // 设置进度值(0.0 到 1.0)
color: AppTheme.primary, // 设置进度条颜色
backgroundColor: Colours.cE2, // 设置背景颜色
),
),
),
]
);
}
}
library book_score;
import 'package:flutter/material.dart';
import 'package:flutter_book/theme.dart';
import 'package:flutter_book/utils/index.dart';
import 'package:flutter_star/flutter_star.dart';
import 'package:get/get.dart';
part 'view.dart';
part 'widgets/item.dart';
\ No newline at end of file
part of book_score;
class BookScorePage extends StatefulWidget {
const BookScorePage({Key? key}) : super(key: key);
@override
State<BookScorePage> createState() => _BookScorePageState();
}
class _BookScorePageState extends State<BookScorePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('评分及书评'),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index){
return BuildItem();
},
itemCount: 5,
),
);
}
}
part of book_score;
class BuildItem extends StatelessWidget {
const BuildItem({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(left: 10, top: 10, right: 10),
child: Container(
padding: const EdgeInsets.only(left: 15, top: 15,right: 10,bottom: 15),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colours.cC7,
offset: Offset(0, 3),
blurRadius: 4,
spreadRadius: 0,
),
],
borderRadius: BorderRadius.circular(8)
),
child: Column(
children: [
Row(
children: [
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.circular(17.5)
),
),
Gaps.hGaps10,
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('张三',style: TextStyle(fontSize: 12,height: 1.3,color: Colours.c9),),
// Spacer(),
Text('2023-12-07',style: TextStyle(fontSize: 12,height: 1.3,color: Colours.c9),)
],
),
AbsorbPointer(
absorbing: true,
child: CustomRating(
max: 5,
score: 4.5,
star: const Star(
progress: 4,
fillColor: AppTheme.primary,
size: 12,
emptyColor: Colours.cE2,
), onRating: (double ) {},
),
),
],
),
)
],
),
Gaps.vGaps15,
const Text('这本书里有很多我比较喜欢的内容,总体来说真的很不错,很喜欢。',style: TextStyle(fontSize: 14,height: 1.5,color: Colours.c3),)
],
),
),
);
}
}
/// 可用积分界面
library credit_points;
import 'package:flutter/material.dart';
import 'package:flutter_book/theme.dart';
import 'package:flutter_book/utils/index.dart';
part 'view.dart';
\ No newline at end of file
part of credit_points;
class CreditPointsPage extends StatelessWidget {
const CreditPointsPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('积分'),
),
body: Column(
children: [
// 积分卡片
Container(
color: AppTheme.primary.withOpacity(0.02),
padding: EdgeInsets.all(10),
child: Container(
padding: const EdgeInsets.only(left: 17,top: 18,bottom: 24,right: 17),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: const Offset(0, 3),
blurRadius: 4,
spreadRadius: 0,
),
],
borderRadius: BorderRadius.circular(8)
),
height: 175,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('可用积分',style: TextStyle(fontSize: 16,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
Gaps.vGaps13,
Text('999',style: TextStyle(fontSize: 25,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
],
),
Row(
children: [
Expanded(
child: Container(
height: 0.5,
color: Colours.cE7,
),
),
Gaps.hGaps15,
const Text('积分支付不能超过每笔订单的20%',style: TextStyle(fontSize: 12,height: 1.4,color: Colours.c9),),
Gaps.hGaps15,
Expanded(
child: Container(
height: 0.5,
color: Colours.cE7,
),
),
],
)
],
),
),
),
// 使用积分
Container(
// height: 105,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: const Offset(0, 3),
blurRadius: 4,
spreadRadius: 0,
),
],
borderRadius: BorderRadius.circular(8)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('可用积分',style: TextStyle(fontSize: 16,height: 1.4,fontWeight: Fonts.medium,color: Colours.c3),),
Gaps.vGaps10,
Container(
height: 0.5,
color: Colours.cE7,
// color: Colors.red,
),
Gaps.vGaps15,
Row(
children: [
RichText(text: TextSpan(
children: [
TextSpan(text: '抵扣',style: TextStyle(color: Colours.c9,fontSize: 13,height: 1.4)),
TextSpan(text: '¥9.90',style: TextStyle(color: AppTheme.primary,fontSize: 13,height: 1.4,fontWeight: Fonts.medium)),
TextSpan(text: '使用9900积分',style: TextStyle(color: Colours.c9,fontSize: 13,height: 1.4)),
]
))
],
)
],
),
)
],
),
);
}
}
library study_report;
import 'package:flutter/material.dart';
import 'package:flutter_book/utils/index.dart';
part 'view.dart';
part 'widgets/card.dart';
\ No newline at end of file
part of study_report;
class StudyReportPage extends StatefulWidget {
const StudyReportPage({Key? key}) : super(key: key);
@override
State<StudyReportPage> createState() => _StudyReportPageState();
}
class _StudyReportPageState extends State<StudyReportPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('学习报告'),
),
body: Container(
margin: EdgeInsets.only(left: 10,top: 10,bottom: 10,right: 10),
child: SingleChildScrollView(
child: Column(
children: [
BuildCard(),
// Container(
// // height: 210,
// // width: 355,
// // color: Colors.cyan,
// child: Image.asset(
// 'assets/images/report_bg.png',
// ),
// ),
Gaps.vGaps10,
Row(
children: [
Expanded(
child: Column(
children: [
Container(
padding: EdgeInsets.only(left: 15,top: 15,bottom: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.yellow,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: const Offset(1, 3),
blurRadius: 10,
spreadRadius: 0,
),
],
),
height: 220,
child: Column(
children: [
Row(
children: [
Container(
width: 26,
height: 26,
color: Colors.cyan,
),
Gaps.hGaps10,
Text('笔记',style: TextStyle(fontSize: 16,height: 1.3,color: Colours.c3,fontWeight: Fonts.medium),)
],
)
],
),
),
Gaps.vGaps10,
Container(
padding: EdgeInsets.only(left: 15,top: 15,bottom: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: const Offset(1, 3),
blurRadius: 10,
spreadRadius: 0,
),
],
),
height: 110,
child: Column(
children: [
Row(
children: [
Container(
width: 26,
height: 26,
color: Colors.cyan,
),
Gaps.hGaps10,
Text('距离连续学习',style: TextStyle(fontSize: 16,height: 1.3,color: Colours.c3,fontWeight: Fonts.medium),)
],
)
],
),
)
],
),
),
Gaps.hGaps10,
Expanded(
child: Container(// color: Colors.limeAccent,
child: Column(
children: [
Container(
padding: EdgeInsets.only(left: 15,top: 15,bottom: 15),
height: 165,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.cyan,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: const Offset(1, 3),
blurRadius: 10,
spreadRadius: 0,
),
],
),
child: Column(
children: [
Row(
children: [
Container(
width: 26,
height: 26,
color: Colors.cyan,
),
Gaps.hGaps10,
Text('知识测评',style: TextStyle(fontSize: 16,height: 1.3,color: Colours.c3,fontWeight: Fonts.medium),)
],
)
],
),
),
Gaps.vGaps10,
Container(
padding: EdgeInsets.only(left: 15,top: 15,bottom: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colours.cC7.withOpacity(0.5),
offset: const Offset(1, 3),
blurRadius: 10,
spreadRadius: 0,
),
],
),
height: 165,
child: Column(
children: [
Row(
children: [
Container(
width: 26,
height: 26,
color: Colors.cyan,
),
Gaps.hGaps10,
Text('讨论',style: TextStyle(fontSize: 16,height: 1.3,color: Colours.c3,fontWeight: Fonts.medium),)
],
)
],
),
)
],
),
),
)
]
)
],
),
),
),
);
}
}
part of study_report;
class BuildCard extends StatelessWidget {
const BuildCard({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
child: Image.asset(
'assets/images/report_bg.png',
),
),
Positioned(
left: 0,
top: 0,
right: 0,
child: Container(
padding: const EdgeInsets.only(left: 17.5,top:25,right: 20,bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: const Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('恰如其分的孤独',style: TextStyle(fontSize: 20,height: 1.4,color: Colors.white,fontWeight: Fonts.medium),),
Gaps.vGaps15,
Row(
children: [
Text('学习总进度',style: TextStyle(fontSize: 13,height: 1.4,color: Colors.white),),
Gaps.hGaps15,
Text('4.98%',style: TextStyle(fontSize: 16,height: 1.4,color: Colors.white,fontWeight: Fonts.medium),),
]
),
Gaps.vGaps10,
Row(
children: [
Text('学习总时长',style: TextStyle(fontSize: 13,height: 1.4,color: Colors.white),),
Gaps.hGaps15,
Text('30分钟',style: TextStyle(fontSize: 16,height: 1.4,color: Colors.white,fontWeight: Fonts.medium),),
]
),
Gaps.vGaps10,
Text('上次读到',style: TextStyle(fontSize: 13,height: 1.4,color: Colors.white),),
Gaps.vGaps5,
Text('第3章 情节…情节…情节情节情节情节',style: TextStyle(fontSize: 16,height: 1.4,color: Colors.white,fontWeight: Fonts.medium),maxLines: 1,overflow: TextOverflow.ellipsis,),
]
),
),
Container(
height: 120,
width: 100,
color: Colors.lime,
)
],
),
)
)
],
);
}
}
......@@ -6,11 +6,14 @@ import 'package:flutter_book/pages/about/index.dart';
import 'package:flutter_book/pages/ad/index.dart';
import 'package:flutter_book/pages/book_detail/index.dart';
import 'package:flutter_book/pages/book_pay/index.dart';
import 'package:flutter_book/pages/book_score/index.dart';
import 'package:flutter_book/pages/credit_points/index.dart';
import 'package:flutter_book/pages/forget_pwd/index.dart';
import 'package:flutter_book/pages/login/index.dart';
import 'package:flutter_book/pages/main/index.dart';
import 'package:flutter_book/pages/reset_pwd/index.dart';
import 'package:flutter_book/pages/splash/index.dart';
import 'package:flutter_book/pages/study_report/index.dart';
import 'package:flutter_book/pages/user_coin/index.dart';
import 'package:flutter_book/pages/user_info/index.dart';
import 'package:flutter_book/pages/user_msg/index.dart';
......
......@@ -49,6 +49,13 @@ abstract class Routes {
/// 课程模块
// 详情
static const bookDetail = 'book_detail';
// 评分及书评
static const bookScore = 'book_score';
// 学习报告
static const studyReport = 'study_report';
/// 书架模块
static const creditPoints = 'credit_points';
static final GoRouter config = GoRouter(
......@@ -192,6 +199,33 @@ abstract class Routes {
child: const BookDetailPage()
)
),
GoRoute(
path: '/$bookScore',
name: bookScore,
pageBuilder: (context, state) =>CupertinoPage(
name: state.uri.toString(),
key: state.pageKey,
child: const BookScorePage()
)
),
GoRoute(
path: '/$studyReport',
name: studyReport,
pageBuilder: (context, state) =>CupertinoPage(
name: state.uri.toString(),
key: state.pageKey,
child: const StudyReportPage()
)
),
GoRoute(
path: '/$creditPoints',
name: creditPoints,
pageBuilder: (context, state) =>CupertinoPage(
name: state.uri.toString(),
key: state.pageKey,
child: const CreditPointsPage()
)
),
]
);
......
......@@ -23,6 +23,11 @@ class Colours {
static const c6 = Color(0xFF666666);
static const cLine = Color(0xFFF0F0F0);
static const cBlue = Color(0xFF2A82D9);
static const cE2 = Color(0xFFE2E2E2);
static const cF2 = Color(0xFFF2F2F2);
static const cC7 = Color(0xFFC7C7C7);
static const cE0 = Color(0xFFE0E0E0);
static const cE7 = Color(0xFFE7E7E7);
}
class Gaps {
......@@ -47,6 +52,7 @@ class Gaps {
class Fonts {
static const medium = FontWeight.w500;
static const bold = FontWeight.bold;
static const boldSemi = FontWeight.w600;
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论