YYHome/packages/cs_widgets/lib/responsive_widget.dart

import 'package:flutter/material.dart';
import 'package:shared/utils/log_utils.dart';

/// 响应式的布局，根据不同的尺寸展示不同的布局
/// 桌面 - 平板 - 手机的布局判断，手机内部分为全面屏与非全面屏
class ResponsiveWidget extends StatelessWidget {
  final Widget? largeScreen; // 大屏幕布局
  final Widget? mediumScreen; // 中等屏幕布局
  final Widget smallScreen; // 默认手机屏
  final Widget? smallFullScreen; // 手机的全面屏手机布局

  const ResponsiveWidget({
    super.key,
    this.largeScreen,
    this.mediumScreen,
    this.smallFullScreen,
    required this.smallScreen,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 大屏幕
        if (constraints.maxWidth > 1200) {
          return largeScreen ?? smallScreen;
        }
        // 中等屏幕
        else if (constraints.maxWidth <= 1200 && constraints.maxWidth >= 800) {
          return mediumScreen ?? largeScreen ?? smallScreen;
        }
        // 小屏幕
        else {
          // 获取屏幕的高度和宽度
          final double height = constraints.maxHeight;
          final double width = constraints.maxWidth;
          final radio = height / width;
          final isFullScreen = radio > 1.88;
          // 判断是否为全面屏
          if (isFullScreen) {
            return smallFullScreen ?? smallScreen; // 如果是全面屏，使用全面屏布局
          } else {
            return smallScreen; // 否则使用默认手机布局
          }
        }
      },
    );
  }
}