Skip to content

B
book-app
提交 9731fd18 authored 作者: yueweilu's avatar yueweilu
浏览文件
操作

筛选 初步布局

上级 b83edf38
隐藏空白字符变更
内嵌 并排
正在显示 包含 303 行增加 和 86 行删除
lib/models/library.dart
浏览文件 @ 9731fd18
......@@ -342,6 +342,21 @@ class BookDetailModel {
return map;
}
}
class FilterModel {
FilterModel({
required this.id,
required this.name,
this.selected = false
});
String id;
String name;
late bool selected = false;
}
lib/pages/library/controller.dart
浏览文件 @ 9731fd18
......@@ -24,10 +24,35 @@ class LibraryController extends GetxController with GetTickerProviderStateMixin{
int _page = 1;
bool _noMore = false;
late AnimationController _controller;
bool _show = false;
bool get show => _show;
void setShow(bool value) {
_show = !value;
if (_show) {
/// 开启动画
_controller.forward();
}
else {
/// 收回动画
_controller.reverse();
}
update();
}
AnimationController get controller => _controller;
@override
void onInit() {
// 获取分类数据
_getTabs();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 100),
);
super.onInit();
}
......
lib/pages/library/index.dart
浏览文件 @ 9731fd18
......@@ -23,4 +23,5 @@ part 'view.dart';
part 'controller.dart';
part 'widgets/cell.dart';
part 'widgets/content.dart';
part 'widgets/subject.dart';
\ No newline at end of file
part 'widgets/subject.dart';
part 'widgets/filter.dart';
\ No newline at end of file
lib/pages/library/view.dart
浏览文件 @ 9731fd18
......@@ -26,98 +26,126 @@ class _LibraryPageState extends State<LibraryPage> with AutomaticKeepAliveClient
},
),
],
bottom: PreferredSize(
preferredSize: const Size.fromHeight(38),
child: Container(
color: Colors.white,
width: double.infinity,
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 0.5,color: Colours.cE5)
),
child: Row(
children: [
Expanded(
child: TabBar(
indicator: BoxDecoration(
border: const Border(bottom: BorderSide(color: Colors.transparent, width: 0.0)), // 将指示器的底边框颜色设置为透明
color: const Color(0xFFC02D55).withOpacity(0.08)
),
labelStyle: const TextStyle(color: AppTheme.primary,fontSize: 14,height: 1.5,fontWeight: Fonts.medium),
unselectedLabelColor: Colours.c9,
unselectedLabelStyle: const TextStyle(color: Colours.c9,fontSize: 14,height: 1.5),
controller: controller.tabController,
isScrollable: true,
tabs: controller.categories.map((model){
return Tab(text: model.name);
}).toList(),
),
),
body: Stack(
children: [
Column(
children: [
Container(
color: Colors.white,
width: double.infinity,
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 0.5,color: Colours.cE5)
),
GestureDetector(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
// color: Colors.cyan,
height: 38,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
// color: Colors.red,
alignment: Alignment.center,
child: Image.asset(
'assets/images/filter.png',
),
child: Row(
children: [
Expanded(
child: TabBar(
indicator: BoxDecoration(
border: const Border(bottom: BorderSide(color: Colors.transparent, width: 0.0)), // 将指示器的底边框颜色设置为透明
color: const Color(0xFFC02D55).withOpacity(0.08)
),
Gaps.hGaps5,
const Text('筛选',style: TextStyle(color: Colours.c9,fontSize: 14,height: 1.5),)
],
labelStyle: const TextStyle(color: AppTheme.primary,fontSize: 14,height: 1.5,fontWeight: Fonts.medium),
unselectedLabelColor: Colours.c9,
unselectedLabelStyle: const TextStyle(color: Colours.c9,fontSize: 14,height: 1.5),
controller: controller.tabController,
isScrollable: true,
tabs: controller.categories.map((model){
return Tab(text: model.name);
}).toList(),
),
),
// width: 75,
),
)
],
GestureDetector(
onTap: (){
controller.setShow(controller.show);
// showModalBottomSheet(
// context: context,
// isScrollControlled: true, // 设置为 true
// builder: (BuildContext context) {
// return Container(
// height: MediaQuery.of(context).size.height * 0.9, // 设置高度
// decoration: BoxDecoration(
// color: Colors.white, // 替换为你的背景颜色
// ),
// child: FilterPage(),
// );
// },
// );
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
// color: Colors.cyan,
height: 38,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
// color: Colors.red,
alignment: Alignment.center,
child: Image.asset(
'assets/images/filter.png',
),
),
Gaps.hGaps5,
const Text('筛选',style: TextStyle(color: Colours.c9,fontSize: 14,height: 1.5),)
],
),
// width: 75,
),
)
],
),
),
),
),
),
),
),
body: Column(
children: [
Container(
height: 43,
color: Colours.cF9,
child: ListView.builder(
scrollDirection:Axis.horizontal ,
itemBuilder: (BuildContext context, int index){
return GestureDetector(
child: BuildLabelWidget(model: controller.labels[index],),
onTap: (){
controller.selectLabel( controller.labels[index]);
Container(
height: 43,
color: Colours.cF9,
child: ListView.builder(
scrollDirection:Axis.horizontal ,
itemBuilder: (BuildContext context, int index){
return GestureDetector(
child: BuildLabelWidget(model: controller.labels[index],),
onTap: (){
controller.selectLabel( controller.labels[index]);
},
);
},
);
},
itemCount: controller.labels.length,
),
),
Container(
color: Colors.transparent,
padding: const EdgeInsets.symmetric(horizontal: 10),
child: BuildBanner(items: controller.ads,),
itemCount: controller.labels.length,
),
),
Container(
color: Colors.transparent,
padding: const EdgeInsets.symmetric(horizontal: 10),
child: BuildBanner(items: controller.ads,),
),
Expanded(
child: TabBarView(
controller: controller.tabController,
children: List.generate(controller.categories.length, (index){
print('=======================================$index');
return LibraryContentPage(controller: controller,);
})
),
),
],
),
Expanded(
child: TabBarView(
controller: controller.tabController,
children: List.generate(controller.categories.length, (index){
print('=======================================$index');
return LibraryContentPage(controller: controller,);
})
),
Visibility(
visible: controller.show,
child: FilterPage(
controller: controller,
sureTap: (){
controller.setShow(controller.show);
},
resetTap: (){
},),
),
],
),
)
),
);
}
......
lib/pages/library/widgets/filter.dart 0 → 100644
浏览文件 @ 9731fd18
part of library;
class FilterPage extends StatefulWidget {
final LibraryController controller;
final void Function() sureTap;
final void Function() resetTap;
const FilterPage({
Key? key,
required this.sureTap,
required this.resetTap,
required this.controller
}) : super(key: key);
@override
State<FilterPage> createState() => _FilterPageState();
}
class _FilterPageState extends State<FilterPage> {
@override
Widget build(BuildContext context) {
List<FilterModel> categories = widget.controller.categories.map((model) {
return FilterModel(id: model.categoryId.toString(), name: model.name??'');
}).toList();
List<FilterModel> labels = widget.controller.labels.map((model) {
return FilterModel(id: model.labelId.toString(), name: model.name??'');
}).toList();
return Container(
color: const Color(0xFF000000).withOpacity(0.5),
child: Column(
children: [
Container(
color: Colors.white,
width: double.infinity,
padding: EdgeInsets.only(bottom: 10),
child: Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildWrapWidget('分类', categories),
_buildWrapWidget('标签', labels),
_buildWrapWidget('是否收费', [FilterModel(id: '0', name: '收费'),FilterModel(id: '1', name: '免费')]),
_buildWrapWidget('排序', [FilterModel(id: '0', name: '读过'),FilterModel(id: '1', name: '评分')]),
],
)
],
),
),
Container(
padding: EdgeInsets.only(left:10,right:10,top:30,bottom:10),
color: Colors.white,
// margin: const EdgeInsets.symmetric(horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: GestureDetector(
onTap: widget.resetTap,
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: widget.sureTap,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.5),
color: AppTheme.primary.withOpacity(0.1)
),
height: 35,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 8),
child: const Text('确定',style: TextStyle(fontSize: 13,color: AppTheme.primary,height: 1.5),),
),
),
)
],
),
)
],
),
);
}
Widget _buildWrapWidget(String title,List<FilterModel> data){
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 10,bottom: 10,top: 10),
child: Text(title,style: TextStyle(fontSize: 15,height:1.6,color: Colours.c3,fontWeight: Fonts.medium),)
),
Wrap(
spacing: 10,
runSpacing: 10,
alignment: WrapAlignment.start,
runAlignment: WrapAlignment.start,
children: data.map((model){
return GestureDetector(
onTap: (){
print('================================');
setState(() {
print('--------------------------------${model.selected}');
model.selected = !model.selected;
});
},
child: Container(
height: 27,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(13.5),
color: model.selected?AppTheme.primary: Colours.cF4
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal:15,vertical: 5),
child: model.name == '读过' || model.name == '评分'?Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(model.name,style: TextStyle(fontSize: 13,height: 1.4,color: model.selected?AppTheme.primary: Colours.c3),textAlign: TextAlign.center,),
Image.asset('assets/images/down.png'),
],
):Text(model.name,style: TextStyle(fontSize: 13,height: 1.4,color: model.selected?AppTheme.primary: Colours.c3),textAlign: TextAlign.center,),
),
),
);
}).toList(),
)
],
);
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论