|
@@ -1,9 +1,20 @@
|
|
|
-import 'package:flutter/cupertino.dart';
|
|
|
|
|
|
|
+import 'package:collection/collection.dart';
|
|
|
|
|
+import 'package:flutter/Material.dart';
|
|
|
|
|
+import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
import 'package:get/get.dart';
|
|
import 'package:get/get.dart';
|
|
|
import 'package:keyboard/base/base_page.dart';
|
|
import 'package:keyboard/base/base_page.dart';
|
|
|
|
|
+import 'package:keyboard/module/zodiac_love_intimacy/tody/zodiac_love_today_view.dart';
|
|
|
import 'package:keyboard/module/zodiac_love_intimacy/zodiac_love_intimacy_controller.dart';
|
|
import 'package:keyboard/module/zodiac_love_intimacy/zodiac_love_intimacy_controller.dart';
|
|
|
|
|
+import 'package:keyboard/resource/colors.gen.dart';
|
|
|
|
|
+import 'package:nested_scroll_views/material.dart';
|
|
|
|
|
|
|
|
|
|
+import '../../resource/assets.gen.dart';
|
|
|
|
|
+import '../../resource/string.gen.dart';
|
|
|
import '../../router/app_pages.dart';
|
|
import '../../router/app_pages.dart';
|
|
|
|
|
+import '../../widget/status_bar_placeholder_widget.dart';
|
|
|
|
|
+import '../../widget/top_bar.dart';
|
|
|
|
|
+import 'enums/zodiac_love_intimacy_tab.dart';
|
|
|
|
|
+import 'future_week/zodiac_love_future_week_view.dart';
|
|
|
|
|
|
|
|
/// 星座恋爱分析Tab页
|
|
/// 星座恋爱分析Tab页
|
|
|
class ZodiacLoveIntimacyPage extends BasePage<ZodiacLoveIntimacyController> {
|
|
class ZodiacLoveIntimacyPage extends BasePage<ZodiacLoveIntimacyController> {
|
|
@@ -14,7 +25,221 @@ class ZodiacLoveIntimacyPage extends BasePage<ZodiacLoveIntimacyController> {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
@override
|
|
|
|
|
+ bool immersive() {
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @override
|
|
|
|
|
+ bool statusBarDarkFont() {
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @override
|
|
|
|
|
+ backgroundColor() {
|
|
|
|
|
+ return Colors.transparent;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @override
|
|
|
Widget buildBody(BuildContext context) {
|
|
Widget buildBody(BuildContext context) {
|
|
|
- return Center();
|
|
|
|
|
|
|
+ return Scaffold(
|
|
|
|
|
+ backgroundColor: backgroundColor(),
|
|
|
|
|
+ body: Stack(
|
|
|
|
|
+ children: [
|
|
|
|
|
+ // 背景图
|
|
|
|
|
+ Positioned.fill(child: _buildBackgroundImage()),
|
|
|
|
|
+ // 内容,填充剩余部分
|
|
|
|
|
+ Positioned.fill(
|
|
|
|
|
+ top: 0,
|
|
|
|
|
+ left: 0,
|
|
|
|
|
+ right: 0,
|
|
|
|
|
+ bottom: 0,
|
|
|
|
|
+ child: _buildContent(context),
|
|
|
|
|
+ ),
|
|
|
|
|
+ // 状态栏和标题栏
|
|
|
|
|
+ Positioned(
|
|
|
|
|
+ left: 0,
|
|
|
|
|
+ top: 0,
|
|
|
|
|
+ right: 0,
|
|
|
|
|
+ child: Column(
|
|
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
|
|
+ children: [StatusBarPlaceholderWidget(), _buildTopBar()],
|
|
|
|
|
+ ),
|
|
|
|
|
+ ),
|
|
|
|
|
+ ],
|
|
|
|
|
+ ),
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// 背景图
|
|
|
|
|
+ Widget _buildBackgroundImage() {
|
|
|
|
|
+ return Container(
|
|
|
|
|
+ child: Assets.images.bgZodiacLoveIntimacy.image(
|
|
|
|
|
+ fit: BoxFit.cover,
|
|
|
|
|
+ width: double.infinity,
|
|
|
|
|
+ height: double.infinity,
|
|
|
|
|
+ ),
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// 顶部栏
|
|
|
|
|
+ Widget _buildTopBar() {
|
|
|
|
|
+ return TopBar(
|
|
|
|
|
+ leftWidget: GestureDetector(
|
|
|
|
|
+ onTap: controller.clickBack,
|
|
|
|
|
+ child: Assets.images.iconWhiteBackArrow.image(
|
|
|
|
|
+ width: 24.w,
|
|
|
|
|
+ height: 24.h,
|
|
|
|
|
+ ),
|
|
|
|
|
+ ),
|
|
|
|
|
+ centerWidget: Text(
|
|
|
|
|
+ StringName.zodiacLoveIntimacy,
|
|
|
|
|
+ style: TextStyle(
|
|
|
|
|
+ color: ColorName.white,
|
|
|
|
|
+ fontSize: 17.sp,
|
|
|
|
|
+ fontWeight: FontWeight.w500,
|
|
|
|
|
+ ),
|
|
|
|
|
+ ),
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// 指示器
|
|
|
|
|
+ Widget _buildTabBar() {
|
|
|
|
|
+ return Obx(() {
|
|
|
|
|
+ return PreferredSize(
|
|
|
|
|
+ preferredSize: Size.fromHeight(45.h),
|
|
|
|
|
+ child: Stack(
|
|
|
|
|
+ children: [
|
|
|
|
|
+ Container(
|
|
|
|
|
+ height: 41.h,
|
|
|
|
|
+ margin: EdgeInsets.only(top: 6.h),
|
|
|
|
|
+ // 顶部2边圆角
|
|
|
|
|
+ decoration: BoxDecoration(
|
|
|
|
|
+ color: Color(0xFFEBE7FD),
|
|
|
|
|
+ borderRadius: BorderRadius.only(
|
|
|
|
|
+ topLeft: Radius.circular(45.r),
|
|
|
|
|
+ topRight: Radius.circular(45.r),
|
|
|
|
|
+ ),
|
|
|
|
|
+ ),
|
|
|
|
|
+ ),
|
|
|
|
|
+ // Tab
|
|
|
|
|
+ TabBar(
|
|
|
|
|
+ // 只有2个Tab,均分宽度,所以不可以滚动
|
|
|
|
|
+ isScrollable: false,
|
|
|
|
|
+ // 去除底部的黑线
|
|
|
|
|
+ dividerHeight: 0,
|
|
|
|
|
+ // 去掉自带的指示器
|
|
|
|
|
+ indicator: BoxDecoration(),
|
|
|
|
|
+ // 对齐方式,填充式对齐
|
|
|
|
|
+ tabAlignment: TabAlignment.fill,
|
|
|
|
|
+ // 指示器的高度设置为0,才能完全隐藏,否则还是会有一条线的高度
|
|
|
|
|
+ indicatorWeight: 0,
|
|
|
|
|
+ // 移除左右边距
|
|
|
|
|
+ padding: EdgeInsets.zero,
|
|
|
|
|
+ // 移除指示器与标签的间距
|
|
|
|
|
+ indicatorPadding: EdgeInsets.zero,
|
|
|
|
|
+ // 移除标签内部边距
|
|
|
|
|
+ labelPadding: EdgeInsets.zero,
|
|
|
|
|
+ // 配置Tab数据
|
|
|
|
|
+ tabs:
|
|
|
|
|
+ controller.tabBarList.mapIndexed((
|
|
|
|
|
+ int index,
|
|
|
|
|
+ ZodiacLoveIntimacyTab tab,
|
|
|
|
|
+ ) {
|
|
|
|
|
+ bool isSelected = controller.currentTabIndex.value == index;
|
|
|
|
|
+ return _buildTab(tab, isSelected);
|
|
|
|
|
+ }).toList(),
|
|
|
|
|
+ controller: controller.tabController,
|
|
|
|
|
+ onTap: (index) {
|
|
|
|
|
+ controller.handleTabChange(index);
|
|
|
|
|
+ },
|
|
|
|
|
+ ),
|
|
|
|
|
+ ],
|
|
|
|
|
+ ),
|
|
|
|
|
+ );
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// 每个Tab
|
|
|
|
|
+ Tab _buildTab(ZodiacLoveIntimacyTab tab, bool isSelected) {
|
|
|
|
|
+ String tabName = tab.getTabName();
|
|
|
|
|
+ TextStyle tabTextStyle;
|
|
|
|
|
+ if (isSelected) {
|
|
|
|
|
+ // 选中时的颜色
|
|
|
|
|
+ tabTextStyle = TextStyle(
|
|
|
|
|
+ fontSize: 14.sp,
|
|
|
|
|
+ fontWeight: FontWeight.w700,
|
|
|
|
|
+ color: ColorName.black80,
|
|
|
|
|
+ );
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 未选中时的颜色
|
|
|
|
|
+ tabTextStyle = TextStyle(
|
|
|
|
|
+ fontSize: 14.sp,
|
|
|
|
|
+ fontWeight: FontWeight.w500,
|
|
|
|
|
+ color: ColorName.black60,
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+ return Tab(
|
|
|
|
|
+ child: Container(
|
|
|
|
|
+ width: double.infinity,
|
|
|
|
|
+ height: double.infinity,
|
|
|
|
|
+ // 未选中时,距离顶部有一定距离,选中时则撑满TabBar
|
|
|
|
|
+ margin: EdgeInsets.only(top: isSelected ? 0 : 6.h),
|
|
|
|
|
+ decoration: BoxDecoration(
|
|
|
|
|
+ image:
|
|
|
|
|
+ // 选中时,才有背景图
|
|
|
|
|
+ isSelected
|
|
|
|
|
+ ? DecorationImage(
|
|
|
|
|
+ image: tab.getTabSelectedBg(),
|
|
|
|
|
+ fit: BoxFit.fill,
|
|
|
|
|
+ )
|
|
|
|
|
+ : null,
|
|
|
|
|
+ ),
|
|
|
|
|
+ child: Center(child: Text(tabName, style: tabTextStyle)),
|
|
|
|
|
+ ),
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// 内容
|
|
|
|
|
+ Widget _buildContent(BuildContext context) {
|
|
|
|
|
+ return Column(
|
|
|
|
|
+ children: [
|
|
|
|
|
+ // 顶部概览
|
|
|
|
|
+ _buildOverviewHeader(),
|
|
|
|
|
+ // TabBar
|
|
|
|
|
+ _buildTabBar(),
|
|
|
|
|
+ // PageView
|
|
|
|
|
+ Expanded(child: _buildPage()),
|
|
|
|
|
+ ],
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// 顶部概览视图
|
|
|
|
|
+ Widget _buildOverviewHeader() {
|
|
|
|
|
+ return Container(height: 270.h);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /// PageView
|
|
|
|
|
+ Widget _buildPage() {
|
|
|
|
|
+ return Obx(() {
|
|
|
|
|
+ return NestedPageView(
|
|
|
|
|
+ controller: controller.pageController,
|
|
|
|
|
+ // 保持页面缓存
|
|
|
|
|
+ wantKeepAlive: true,
|
|
|
|
|
+ // 是否禁止滑动切换
|
|
|
|
|
+ physics:
|
|
|
|
|
+ controller.isPageViewSwipeEnabled.value
|
|
|
|
|
+ ? ScrollPhysics()
|
|
|
|
|
+ : NeverScrollableScrollPhysics(),
|
|
|
|
|
+ onPageChanged: (index) {
|
|
|
|
|
+ controller.handlePageChange(index);
|
|
|
|
|
+ },
|
|
|
|
|
+ children: [
|
|
|
|
|
+ // 今日Tab
|
|
|
|
|
+ ZodiacLoveTodayView(),
|
|
|
|
|
+ // 未来一周Tab
|
|
|
|
|
+ ZodiacLoveFutureWeekView(),
|
|
|
|
|
+ ],
|
|
|
|
|
+ );
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|