Flutter 响应 class

Question

我有两个设计，第一个用于移动设备，第二个用于 iPad。我为此构建了一个 class。

我的问题是：这个class到底有没有用，还是需要修改？ iPad 大小是否从768开始？

注意：我不想使用外部包

import 'package:flutter/material.dart';

class ResponsiveBuilder extends StatelessWidget {
  final Widget mobileWidget;
  final Widget? iPadWidget;

  const ResponsiveBuilder({super.key, required this.mobileWidget, this.iPadWidget});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth >= 768) {
          return iPadWidget ?? mobileWidget;
        } else {
          return mobileWidget;
        }
      },
    );
  }
}

Answer 1

这是一个没有正确答案的一般性问题 - 这取决于您的业务需求和用例。 通过进行最少的研究，我注意到了一些不同的值：

来源 1 :

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV

来源 2 ：

iPad 1 and 2 - width: 768px, height: 1024px
iPad Air, iPad Mini, iPad Pro 9" - width: 768px, height: 1024px
iPad 3 and 4 - width: 768px, height: 1024px
iPad Air, iPad Mini, iPad Pro 9" - width: 768px, height: 1024px
iPad Pro 10" - width: 834px, height: 1112px
iPad Pro 12" - width: 1024px, height: 1366px

来源 3 ：

768px   iPad Air, iPad Mini, iPad Pro 9"
834px   iPad Pro 10"

根据消息来源，提供的768px值似乎还可以，但我建议您尝试使用不同的值和您的 UI，以查看哪个特定值对您的布局更新（“中断”）更有意义。

Answer 2

我更喜欢你使用这个 class 让你的应用程序响应移动，Ipad

  class SizeConfig {
      static MediaQueryData? _mediaQueryData;
      static double? screenWidth;
      static double? screenHeight;
      static double? defaultSize;
      static Orientation? orientation;
      void init(BuildContext context) {
        _mediaQueryData = MediaQuery.of(context);
        screenWidth = _mediaQueryData?.size.width;
        screenHeight = _mediaQueryData?.size.height;
        orientation = _mediaQueryData?.orientation;
        defaultSize = orientation == Orientation.landscape
            ? screenHeight! * 0.024
            : screenWidth! * 0.024;
      }
    }

这是如何在另一个 class 上调用此 class 的方法：

class MyClass extends StatefulWidget {
  const MyClass({Key? key}) : super(key: key);

  @override
  State<MyClass> createState() => _MyClassState();
}

class _MyClassState extends State<MyClass> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);//Configure this class inside Build method
    return Scaffold(
      body: Container(
          height: SizeConfig.screenHeight! * 0.05,
          width: SizeConfig.screenWidth! * 0.042,

      ),
    );
  }
}