Question

我想要达到的目标

我使用 Flutter Web 编写了一个 Web 应用程序。在手机上/在具有手机分辨率的浏览器中使用它时，它工作正常，例如通过 Chrome 中的设备工具栏。

现在我想为它添加桌面支持，我认为现在最简单的方法就是将整个 MaterialApp 包装在一个看起来像手机的容器中，然后将所有东西都放入“手机模型”中，所以人们的高清屏幕上有一个电话显示屏。（当然，从长远来看，我想增加真正的响应能力，但就目前而言，这是快速实现的完美解决方案）。

我已经尝试过的

我的第一次尝试是修改我的 MaterialApp 的 builder 方法，所以我不必修改每个屏幕。

main.dart:

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
              title: 'Beautiful app',
              builder: (context, child) {
                  if (!ResponsiveSize.isPhone(context)) return NotResponsiveScreen(child);
                  return child;
               },
              initialRoute: '/start',
              onGenerateRoute: RouteGenerator.generateRoute,
            );
      }
    }

在这种情况下，ResponsiveSize.isPhone 检查分辨率。如果是手机，则整个素材应用程序只是按其应有的方式显示。否则，将显示以下 NotResponsiveScreen：

import 'package:flutter/material.dart';

///Screen for PC users to indicate that they can only use the application on their phones.
class NotResponsiveScreen extends StatelessWidget {
  final Widget screenContent;
  
  const NotResponsiveScreen(this.screenContent);

  static const double kScreenHeight = 500;
  static const double kScreenWidth = 250;
  static const kScreenBorderRadius = const BorderRadius.all(Radius.circular(25));
  static const kScreenConstraints = BoxConstraints(
      maxHeight: kScreenHeight, minHeight: kScreenHeight, maxWidth: kScreenWidth, minWidth: kScreenWidth);

  @override
  Widget build(BuildContext context) {
    return Center(child: _buildScreenInAScreen());
  }

  Widget _buildScreenInAScreen() {
    return Container(
      height: kScreenHeight,
      width: kScreenWidth,
      child: _buildMobileContent(),
    );
  }

  Widget _buildMobileContent() {
    return Container(
      constraints: kScreenConstraints,
      decoration: BoxDecoration(
          borderRadius: kScreenBorderRadius,
          border: Border.all(width: 4, color: Colors.black),
          shape: BoxShape.rectangle),
      child: SizedBox(
        height: kScreenHeight,
        width: kScreenWidth,
        child: ClipRRect(borderRadius: kScreenBorderRadius, child: screenContent
      ),
    );
  }
}

挑战不幸的是，该网站仍然尝试像使用全分辨率一样进行缩放。我认为这与 child（= 完整应用程序）在传递到屏幕之前已经在 main.dart 中呈现的事实有关。

查看下面的搜索栏时，您会发现这非常好（第一张图片使用 NotResponsiveScreen，第二张图片使用 Chrome 中的设备工具栏模拟）：

目前在 PC 上的样子

手机上的样子

有谁知道如何将整个应用程序放入更小的屏幕中？我知道这通常是可能的，我只是在寻找一种方法来做到这一点，而无需重构我之前编写的每个（移动响应）屏幕。

感谢每一个提示！谢谢你帮助我:)

干杯

-大卫

如何在颤振中制作“屏幕中的屏幕”？

0 个答案: