mirror of
https://github.com/HChaZZY/PiliPlus.git
synced 2025-12-06 09:13:48 +08:00
mod: 不使用FixedCrossAxisCount,改为MaxCrossAxisExtent
This commit is contained in:
@@ -17,14 +17,12 @@ import 'video_popup_menu.dart';
|
||||
// 视频卡片 - 垂直布局
|
||||
class VideoCardV extends StatelessWidget {
|
||||
final dynamic videoItem;
|
||||
final int crossAxisCount;
|
||||
final Function()? longPress;
|
||||
final Function()? longPressEnd;
|
||||
|
||||
const VideoCardV({
|
||||
Key? key,
|
||||
required this.videoItem,
|
||||
required this.crossAxisCount,
|
||||
this.longPress,
|
||||
this.longPressEnd,
|
||||
}) : super(key: key);
|
||||
@@ -161,13 +159,6 @@ class VideoCardV extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
if (videoItem.duration > 0)
|
||||
if (crossAxisCount == 1) ...[
|
||||
PBadge(
|
||||
bottom: 10,
|
||||
right: 10,
|
||||
text: Utils.timeFormat(videoItem.duration),
|
||||
)
|
||||
] else ...[
|
||||
PBadge(
|
||||
bottom: 6,
|
||||
right: 7,
|
||||
@@ -175,12 +166,11 @@ class VideoCardV extends StatelessWidget {
|
||||
type: 'gray',
|
||||
text: Utils.timeFormat(videoItem.duration),
|
||||
)
|
||||
],
|
||||
],
|
||||
);
|
||||
}),
|
||||
),
|
||||
VideoContent(videoItem: videoItem, crossAxisCount: crossAxisCount)
|
||||
VideoContent(videoItem: videoItem)
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -191,18 +181,14 @@ class VideoCardV extends StatelessWidget {
|
||||
|
||||
class VideoContent extends StatelessWidget {
|
||||
final dynamic videoItem;
|
||||
final int crossAxisCount;
|
||||
const VideoContent(
|
||||
{Key? key, required this.videoItem, required this.crossAxisCount})
|
||||
{Key? key, required this.videoItem})
|
||||
: super(key: key);
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
flex: crossAxisCount == 1 ? 0 : 1,
|
||||
child: Padding(
|
||||
padding: crossAxisCount == 1
|
||||
? const EdgeInsets.fromLTRB(9, 9, 9, 4)
|
||||
: const EdgeInsets.fromLTRB(5, 8, 5, 4),
|
||||
padding: const EdgeInsets.fromLTRB(5, 8, 5, 4),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
@@ -216,23 +202,12 @@ class VideoContent extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (videoItem.goto == 'av' && crossAxisCount == 1) ...[
|
||||
const SizedBox(width: 10),
|
||||
VideoPopupMenu(
|
||||
size: 32,
|
||||
iconSize: 18,
|
||||
videoItem: videoItem,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
if (crossAxisCount > 1) ...[
|
||||
const SizedBox(height: 2),
|
||||
VideoStat(
|
||||
videoItem: videoItem,
|
||||
),
|
||||
],
|
||||
if (crossAxisCount == 1) const SizedBox(height: 4),
|
||||
Row(
|
||||
children: [
|
||||
if (videoItem.goto == 'bangumi') ...[
|
||||
@@ -271,7 +246,7 @@ class VideoContent extends StatelessWidget {
|
||||
)
|
||||
],
|
||||
Expanded(
|
||||
flex: crossAxisCount == 1 ? 0 : 1,
|
||||
flex: 1,
|
||||
child: Text(
|
||||
videoItem.owner.name,
|
||||
maxLines: 1,
|
||||
@@ -282,21 +257,7 @@ class VideoContent extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
if (crossAxisCount == 1) ...[
|
||||
Text(
|
||||
' • ',
|
||||
style: TextStyle(
|
||||
fontSize:
|
||||
Theme.of(context).textTheme.labelMedium!.fontSize,
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
),
|
||||
),
|
||||
VideoStat(
|
||||
videoItem: videoItem,
|
||||
),
|
||||
const Spacer(),
|
||||
],
|
||||
if (videoItem.goto == 'av' && crossAxisCount != 1) ...[
|
||||
if (videoItem.goto == 'av') ...[
|
||||
VideoPopupMenu(
|
||||
size: 24,
|
||||
iconSize: 14,
|
||||
|
||||
@@ -11,6 +11,7 @@ import 'package:pilipala/pages/home/index.dart';
|
||||
import 'package:pilipala/pages/main/index.dart';
|
||||
import 'package:pilipala/pages/rcmd/view.dart';
|
||||
|
||||
import '../../utils/grid.dart';
|
||||
import 'controller.dart';
|
||||
import 'widgets/bangumu_card_v.dart';
|
||||
|
||||
@@ -215,16 +216,17 @@ class _BangumiPageState extends State<BangumiPage>
|
||||
}
|
||||
|
||||
Widget contentGrid(ctr, bangumiList) {
|
||||
|
||||
return SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
// 行间距
|
||||
mainAxisSpacing: StyleString.cardSpace - 2,
|
||||
// 列间距
|
||||
crossAxisSpacing: StyleString.cardSpace,
|
||||
// 列数
|
||||
crossAxisCount: 3,
|
||||
mainAxisExtent: Get.size.width / 3 / 0.65 +
|
||||
MediaQuery.textScalerOf(context).scale(32.0),
|
||||
mainAxisSpacing: StyleString.cardSpace - 2,
|
||||
// 列间距
|
||||
crossAxisSpacing: StyleString.cardSpace,
|
||||
// 最大宽度
|
||||
maxCrossAxisExtent: Grid.maxRowWidth / 3 * 2,
|
||||
mainAxisExtent: Grid.calculateActualWidth(context, Grid.maxRowWidth / 3 * 2, StyleString.safeSpace) / 0.65+
|
||||
MediaQuery.textScalerOf(context).scale(60),
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
|
||||
@@ -13,6 +13,8 @@ import 'package:pilipala/pages/home/index.dart';
|
||||
import 'package:pilipala/pages/hot/controller.dart';
|
||||
import 'package:pilipala/pages/main/index.dart';
|
||||
|
||||
import '../../utils/grid.dart';
|
||||
|
||||
class HotPage extends StatefulWidget {
|
||||
const HotPage({Key? key}) : super(key: key);
|
||||
|
||||
@@ -88,7 +90,16 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
|
||||
Map data = snapshot.data as Map;
|
||||
if (data['status']) {
|
||||
return Obx(
|
||||
() => SliverList(
|
||||
() => SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
// 行间距
|
||||
mainAxisSpacing: StyleString.safeSpace,
|
||||
// 列间距
|
||||
crossAxisSpacing: StyleString.safeSpace,
|
||||
// 最大宽度
|
||||
maxCrossAxisExtent: Grid.maxRowWidth * 2,
|
||||
mainAxisExtent: Grid.calculateActualWidth(context, Grid.maxRowWidth * 2, StyleString.safeSpace) / 1.9 / StyleString.aspectRatio
|
||||
),
|
||||
delegate:
|
||||
SliverChildBuilderDelegate((context, index) {
|
||||
return VideoCardH(
|
||||
|
||||
@@ -19,8 +19,6 @@ class LiveController extends GetxController {
|
||||
@override
|
||||
void onInit() {
|
||||
super.onInit();
|
||||
crossAxisCount.value =
|
||||
setting.get(SettingBoxKey.customRows, defaultValue: 2);
|
||||
}
|
||||
|
||||
// 获取推荐
|
||||
|
||||
@@ -13,6 +13,7 @@ import 'package:pilipala/pages/home/index.dart';
|
||||
import 'package:pilipala/pages/main/index.dart';
|
||||
import 'package:pilipala/pages/rcmd/index.dart';
|
||||
|
||||
import '../../utils/grid.dart';
|
||||
import 'controller.dart';
|
||||
import 'widgets/live_item.dart';
|
||||
|
||||
@@ -143,35 +144,22 @@ class _LivePageState extends State<LivePage>
|
||||
}
|
||||
|
||||
Widget contentGrid(ctr, liveList) {
|
||||
// double maxWidth = Get.size.width;
|
||||
// int baseWidth = 500;
|
||||
// int step = 300;
|
||||
// int crossAxisCount =
|
||||
// maxWidth > baseWidth ? 2 + ((maxWidth - baseWidth) / step).ceil() : 2;
|
||||
// if (maxWidth < 300) {
|
||||
// crossAxisCount = 1;
|
||||
// }
|
||||
int crossAxisCount = ctr.crossAxisCount.value;
|
||||
return SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
// 行间距
|
||||
mainAxisSpacing: StyleString.safeSpace,
|
||||
// 列间距
|
||||
crossAxisSpacing: StyleString.safeSpace,
|
||||
// 列数
|
||||
crossAxisCount: crossAxisCount,
|
||||
mainAxisExtent:
|
||||
Get.size.width / crossAxisCount / StyleString.aspectRatio +
|
||||
MediaQuery.textScalerOf(context).scale(
|
||||
(crossAxisCount == 1 ? 48 : 68),
|
||||
),
|
||||
// 最大宽度
|
||||
maxCrossAxisExtent: Grid.maxRowWidth,
|
||||
mainAxisExtent: Grid.calculateActualWidth(context, Grid.maxRowWidth, StyleString.safeSpace) / StyleString.aspectRatio+
|
||||
MediaQuery.textScalerOf(context).scale(80),
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
return liveList!.isNotEmpty
|
||||
? LiveCardV(
|
||||
liveItem: liveList[index],
|
||||
crossAxisCount: crossAxisCount,
|
||||
longPress: () {
|
||||
_liveController.popupDialog =
|
||||
_createPopupDialog(liveList[index]);
|
||||
|
||||
@@ -8,14 +8,12 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
|
||||
// 视频卡片 - 垂直布局
|
||||
class LiveCardV extends StatelessWidget {
|
||||
final LiveItemModel liveItem;
|
||||
final int crossAxisCount;
|
||||
final Function()? longPress;
|
||||
final Function()? longPressEnd;
|
||||
|
||||
const LiveCardV({
|
||||
Key? key,
|
||||
required this.liveItem,
|
||||
required this.crossAxisCount,
|
||||
this.longPress,
|
||||
this.longPressEnd,
|
||||
}) : super(key: key);
|
||||
@@ -62,7 +60,6 @@ class LiveCardV extends StatelessWidget {
|
||||
height: maxHeight,
|
||||
),
|
||||
),
|
||||
if (crossAxisCount != 1)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
@@ -80,7 +77,7 @@ class LiveCardV extends StatelessWidget {
|
||||
}),
|
||||
),
|
||||
),
|
||||
LiveContent(liveItem: liveItem, crossAxisCount: crossAxisCount)
|
||||
LiveContent(liveItem: liveItem)
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -91,18 +88,15 @@ class LiveCardV extends StatelessWidget {
|
||||
|
||||
class LiveContent extends StatelessWidget {
|
||||
final dynamic liveItem;
|
||||
final int crossAxisCount;
|
||||
const LiveContent(
|
||||
{Key? key, required this.liveItem, required this.crossAxisCount})
|
||||
{Key? key, required this.liveItem})
|
||||
: super(key: key);
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
flex: crossAxisCount == 1 ? 0 : 1,
|
||||
flex: 1,
|
||||
child: Padding(
|
||||
padding: crossAxisCount == 1
|
||||
? const EdgeInsets.fromLTRB(9, 9, 9, 4)
|
||||
: const EdgeInsets.fromLTRB(5, 8, 5, 4),
|
||||
padding: const EdgeInsets.fromLTRB(5, 8, 5, 4),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
@@ -114,10 +108,9 @@ class LiveContent extends StatelessWidget {
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
maxLines: crossAxisCount == 1 ? 1 : 2,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (crossAxisCount == 1) const SizedBox(height: 4),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
@@ -133,24 +126,6 @@ class LiveContent extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (crossAxisCount == 1) ...[
|
||||
Text(
|
||||
' • ${liveItem!.areaName!}',
|
||||
style: TextStyle(
|
||||
fontSize:
|
||||
Theme.of(context).textTheme.labelMedium!.fontSize,
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
' • ${liveItem!.watchedShow!['text_small']}人观看',
|
||||
style: TextStyle(
|
||||
fontSize:
|
||||
Theme.of(context).textTheme.labelMedium!.fontSize,
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
),
|
||||
),
|
||||
]
|
||||
],
|
||||
),
|
||||
],
|
||||
|
||||
@@ -23,8 +23,6 @@ class RcmdController extends GetxController {
|
||||
@override
|
||||
void onInit() {
|
||||
super.onInit();
|
||||
crossAxisCount.value =
|
||||
setting.get(SettingBoxKey.customRows, defaultValue: 2);
|
||||
// 读取app端缓存内容
|
||||
// if (recVideo.get('cacheList') != null &&
|
||||
// recVideo.get('cacheList').isNotEmpty) {
|
||||
|
||||
@@ -13,6 +13,7 @@ import 'package:pilipala/common/widgets/video_card_v.dart';
|
||||
import 'package:pilipala/pages/home/index.dart';
|
||||
import 'package:pilipala/pages/main/index.dart';
|
||||
|
||||
import '../../utils/grid.dart';
|
||||
import 'controller.dart';
|
||||
|
||||
class RcmdPage extends StatefulWidget {
|
||||
@@ -88,9 +89,11 @@ class _RcmdPageState extends State<RcmdPage>
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding:
|
||||
const EdgeInsets.fromLTRB(0, StyleString.safeSpace, 0, 0),
|
||||
sliver: Obx(() { // 使用Obx来监听数据的变化
|
||||
if (_rcmdController.isLoadingMore && _rcmdController.videoList.isEmpty) {
|
||||
const EdgeInsets.fromLTRB(0, StyleString.safeSpace, 0, 0),
|
||||
sliver: Obx(() {
|
||||
// 使用Obx来监听数据的变化
|
||||
if (_rcmdController.isLoadingMore &&
|
||||
_rcmdController.videoList.isEmpty) {
|
||||
return contentGrid(_rcmdController, []);
|
||||
// 如果正在加载并且列表为空,则显示加载指示器
|
||||
// return const SliverToBoxAdapter(
|
||||
@@ -98,7 +101,8 @@ class _RcmdPageState extends State<RcmdPage>
|
||||
// );
|
||||
} else {
|
||||
// 显示视频列表
|
||||
return contentGrid(_rcmdController, _rcmdController.videoList);
|
||||
return contentGrid(
|
||||
_rcmdController, _rcmdController.videoList);
|
||||
}
|
||||
}),
|
||||
),
|
||||
@@ -120,35 +124,23 @@ class _RcmdPageState extends State<RcmdPage>
|
||||
}
|
||||
|
||||
Widget contentGrid(ctr, videoList) {
|
||||
// double maxWidth = Get.size.width;
|
||||
// int baseWidth = 500;
|
||||
// int step = 300;
|
||||
// int crossAxisCount =
|
||||
// maxWidth > baseWidth ? 2 + ((maxWidth - baseWidth) / step).ceil() : 2;
|
||||
// if (maxWidth < 300) {
|
||||
// crossAxisCount = 1;
|
||||
// }
|
||||
int crossAxisCount = ctr.crossAxisCount.value;
|
||||
double mainAxisExtent = (Get.size.width /
|
||||
crossAxisCount /
|
||||
StyleString.aspectRatio) +
|
||||
(crossAxisCount == 1 ? 68 : MediaQuery.textScalerOf(context).scale(86));
|
||||
|
||||
return SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
// 行间距
|
||||
mainAxisSpacing: StyleString.safeSpace,
|
||||
// 列间距
|
||||
crossAxisSpacing: StyleString.safeSpace,
|
||||
// 列数
|
||||
crossAxisCount: crossAxisCount,
|
||||
mainAxisExtent: mainAxisExtent,
|
||||
// 最大宽度
|
||||
maxCrossAxisExtent: Grid.maxRowWidth,
|
||||
mainAxisExtent: Grid.calculateActualWidth(context, Grid.maxRowWidth, StyleString.safeSpace) / StyleString.aspectRatio+
|
||||
MediaQuery.textScalerOf(context).scale(96),
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
return videoList!.isNotEmpty
|
||||
? VideoCardV(
|
||||
videoItem: videoList[index],
|
||||
crossAxisCount: crossAxisCount,
|
||||
longPress: () {
|
||||
_rcmdController.popupDialog =
|
||||
_createPopupDialog(videoList[index]);
|
||||
|
||||
@@ -29,7 +29,7 @@ class _StyleSettingState extends State<StyleSetting> {
|
||||
late int picQuality;
|
||||
late double toastOpacity;
|
||||
late ThemeType _tempThemeValue;
|
||||
late dynamic defaultCustomRows;
|
||||
late double maxRowWidth;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
@@ -37,7 +37,7 @@ class _StyleSettingState extends State<StyleSetting> {
|
||||
picQuality = setting.get(SettingBoxKey.defaultPicQa, defaultValue: 10);
|
||||
toastOpacity = setting.get(SettingBoxKey.defaultToastOp, defaultValue: 1.0);
|
||||
_tempThemeValue = settingController.themeType.value;
|
||||
defaultCustomRows = setting.get(SettingBoxKey.customRows, defaultValue: 2);
|
||||
maxRowWidth = setting.get(SettingBoxKey.maxRowWidth, defaultValue: 240.0) as double;
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -83,7 +83,7 @@ class _StyleSettingState extends State<StyleSetting> {
|
||||
),
|
||||
const SetSwitchItem(
|
||||
title: 'MD3样式底栏',
|
||||
subTitle: '符合Material You设计规范的底栏',
|
||||
subTitle: '符合Material You设计规范的底栏,关闭可使底栏变窄',
|
||||
setKey: SettingBoxKey.enableMYBar,
|
||||
defaultVal: true,
|
||||
),
|
||||
@@ -103,27 +103,30 @@ class _StyleSettingState extends State<StyleSetting> {
|
||||
),
|
||||
ListTile(
|
||||
onTap: () async {
|
||||
int? result = await showDialog(
|
||||
double? result = await showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return SelectDialog<int>(
|
||||
title: '自定义列数',
|
||||
value: defaultCustomRows,
|
||||
values: [1, 2, 3, 4, 5].map((e) {
|
||||
return {'title': '$e 列', 'value': e};
|
||||
}).toList());
|
||||
},
|
||||
return SlideDialog<double>(
|
||||
title: '最大列宽度(默认240dp)',
|
||||
value: maxRowWidth,
|
||||
min: 150.0,
|
||||
max: 500.0,
|
||||
divisions: 35,
|
||||
suffix: 'dp',
|
||||
);
|
||||
}
|
||||
);
|
||||
if (result != null) {
|
||||
defaultCustomRows = result;
|
||||
setting.put(SettingBoxKey.customRows, result);
|
||||
maxRowWidth = result;
|
||||
setting.put(SettingBoxKey.maxRowWidth, result);
|
||||
SmartDialog.showToast('重启生效');
|
||||
setState(() {});
|
||||
}
|
||||
},
|
||||
dense: false,
|
||||
title: Text('自定义列数', style: titleStyle),
|
||||
title: Text('最大列宽度(dp)', style: titleStyle),
|
||||
subtitle: Text(
|
||||
'当前列数 $defaultCustomRows 列',
|
||||
'当前最大列宽度:${maxRowWidth.toInt()}dp,屏幕宽度:${MediaQuery.of(context).size.width.toPrecision(2)}dp,',
|
||||
style: subTitleStyle,
|
||||
),
|
||||
),
|
||||
|
||||
12
lib/utils/grid.dart
Normal file
12
lib/utils/grid.dart
Normal file
@@ -0,0 +1,12 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'storage.dart';
|
||||
class Grid {
|
||||
static double maxRowWidth = GStrorage.setting.get(SettingBoxKey.maxRowWidth, defaultValue: 240.0) as double;
|
||||
|
||||
static double calculateActualWidth(BuildContext context, double maxCrossAxisExtent, double crossAxisSpacing) {
|
||||
double screenWidth = MediaQuery.of(context).size.width;
|
||||
int columnCount = ((screenWidth - crossAxisSpacing) / (maxCrossAxisExtent + crossAxisSpacing)).ceil();
|
||||
double columnWidth = (screenWidth - crossAxisSpacing) ~/ columnCount - crossAxisSpacing;
|
||||
return columnWidth;
|
||||
}
|
||||
}
|
||||
@@ -149,7 +149,7 @@ class SettingBoxKey {
|
||||
customColor = 'customColor', // 自定义主题色
|
||||
enableSingleRow = 'enableSingleRow', // 首页单列
|
||||
displayMode = 'displayMode',
|
||||
customRows = 'customRows', // 自定义列
|
||||
maxRowWidth = 'maxRowWidth', // 首页列最大宽度(dp)
|
||||
enableMYBar = 'enableMYBar',
|
||||
hideSearchBar = 'hideSearchBar', // 收起顶栏
|
||||
hideTabBar = 'hideTabBar', // 收起底栏
|
||||
|
||||
Reference in New Issue
Block a user