56 lines
1.8 KiB
Dart
56 lines
1.8 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
|
|||
|
|
/// 响应式断点工具：用 [Size.shortestSide] 而非 width 判定窗口尺寸，
|
|||
|
|
/// 使手机横屏（1600×900 → shortSide=900）正确落入 medium 档。
|
|||
|
|
///
|
|||
|
|
/// 详见 docs/手机端UI优化方案-v2.md §7.4。
|
|||
|
|
enum AppWindowSize { compact, medium, expanded }
|
|||
|
|
|
|||
|
|
class AppResponsive {
|
|||
|
|
AppResponsive(this.size, this.orientation);
|
|||
|
|
|
|||
|
|
final Size size;
|
|||
|
|
final Orientation orientation;
|
|||
|
|
|
|||
|
|
factory AppResponsive.of(BuildContext context) => AppResponsive(
|
|||
|
|
MediaQuery.sizeOf(context),
|
|||
|
|
MediaQuery.orientationOf(context),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
bool get isLandscape => orientation == Orientation.landscape;
|
|||
|
|
|
|||
|
|
AppWindowSize get windowSize => switch (size.shortestSide) {
|
|||
|
|
< 600 => AppWindowSize.compact,
|
|||
|
|
< 840 => AppWindowSize.medium, // ★ 手机横屏 900 落这里
|
|||
|
|
_ => AppWindowSize.expanded,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/// 横屏且宽度够时启用主从（双栏）布局。
|
|||
|
|
bool get useMasterDetail => size.width >= 840 && isLandscape;
|
|||
|
|
|
|||
|
|
/// 自适应网格列数（列表 / 卡片网格）。
|
|||
|
|
int gridCount({double minTileWidth = 320}) =>
|
|||
|
|
(size.width / minTileWidth).floor().clamp(2, 6);
|
|||
|
|
|
|||
|
|
/// 内容最大宽度（限宽居中，避免横屏拉爆）。
|
|||
|
|
double get contentMaxWidth => switch (windowSize) {
|
|||
|
|
AppWindowSize.compact => double.infinity,
|
|||
|
|
AppWindowSize.medium => 560,
|
|||
|
|
AppWindowSize.expanded => 720,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/// 栅格间距。
|
|||
|
|
double get gutter => switch (windowSize) {
|
|||
|
|
AppWindowSize.compact => 12,
|
|||
|
|
AppWindowSize.medium => 24,
|
|||
|
|
_ => 32,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/// 卡片内边距（横屏更宽松）。
|
|||
|
|
double get cardPadding => windowSize == AppWindowSize.compact ? 16 : 20;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
extension AppResponsiveX on BuildContext {
|
|||
|
|
AppResponsive get responsive => AppResponsive.of(this);
|
|||
|
|
}
|