让应用程序在所有移动设备上响应的方法有哪些？

Question

我打算制作一个应能响应所有移动设备的应用程序。推荐一些方法。

Answer 1

避免使用固定的高度和宽度值。更喜欢在列、行或堆栈中使用 Expanded、Flexible、SizedBox.expand()。如果可能，还可以使用 flutter web 进行开发和测试。在那里您可以轻松检查响应能力。

Answer 2

除了来自 jannik 的：

您可能还想查看以下资源：

auto_size_text => 自动放大或缩小字体大小
this medium article 为您的问题提供了一个很好的方法

Answer 3

为了使应用程序响应，您需要使用 MediaQuery.of(context).size 来获取应用程序所在设备的尺寸运行，因此您可以做出一些事情您希望根据大小和内容获得不同视图的点。

Answer 4

我已经使用本教程构建了响应式 Flutter 应用程序：https://www.filledstacks.com/post/building-a-responsive-ui-architecture-in-flutter/

其背后的想法是创建一个 Widget，它可以容纳 3 个不同的 Widget，适用于手机、平板电脑和桌面。

我也在使用 responsive_framework 包 https://pub.dev/packages/responsive_framework

使用该包，您可以定义不同的断点：

import 'package:responsive_framework/responsive_framework.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveWrapper.builder(
          child,
          maxWidth: 1200,
          minWidth: 480,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(480, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.resize(1000, name: DESKTOP),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
      initialRoute: "/",
    );
  }
}

然后你可以使用这个断点来决定应该显示哪个布局：

class ScreenTypeFrame extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;
  final Widget? desktop;
  
  ScreenTypeFrame({
    Key? key,
    required this.mobile,
    this.tablet,
    this.desktop,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (desktop != null && _isDesktop(context)) {
      return desktop!;
    } else if (tablet != null && _isTablet(context)) {
      return tablet!;
    } else {
      return mobile;
    }
  }

  bool _isDesktop(BuildContext context) {
    return ResponsiveWrapper.of(context).isLargerThan(TABLET);
  }

  bool _isTablet(BuildContext context) {
    return ResponsiveWrapper.of(context).isLargerThan(MOBILE);
  }
}


class ResponsivePage extends StatelessWidget {
  const ResponsivePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScreenTypeFrame(
      mobile: Text("Mobil"),
      tablet: Text("Tablet"),
      desktop: Text("Desktop"),
    );
  }
}

这不是完整的代码。还有helper layout可以为手机、平板、桌面创建不同的脚手架，有不同的菜单等等。

ScreenTypeFrame 小部件可以像这样增强：

@override
  Widget build(BuildContext context) {
    Widget bodyWidget = _getBodyWidget(context);

    if (_isDesktop(context)) {
      return DesktopScaffold(
        body: bodyWidget,
        title: title,
      );
    } else if (_isTablet(context)) {
      return TabletScaffold(
        body: bodyWidget,
        title: title,
      );
    }
    return MobileScaffold(
      body: bodyWidget,
      title: title,
    );
  }
  
  Widget _getBodyWidget(BuildContext context) {
    if (desktop != null && _isDesktop(context)) {
      return desktop!;
    } else if (tablet != null && _isTablet(context)) {
      return tablet!;
    } else {
      return mobile;
    }

}

让应用程序在所有移动设备上响应的方法有哪些？

What are the ways to make an application responsive in all mobile devices?

dart

flutter

flutter-animation