您应该能够在没有不同项目的情况下转发大部分代码。
这就是 widgets 和 MediaQuery 的美妙之处。
在小部件中创建所有主要组件,您的项目列表可以是 ItemList();,主菜单可以是 MainDrawer(); 等
对于用于不同屏幕尺寸的小部件,您可以在布局构建器中返回 LargeScreenWidget() 或 SmallScreenWidget()。
使用 LayoutBuilder 或 OrientationBuilder,并编写代码以响应屏幕大小、宽度和方向的变化。这样它就可以共享大部分相同的代码。
当您返回布局构建器时,请遵循一般伪代码:
isLargeScreen
? return Row(children[LeftWidget(), RightWidget()])
: return SingleChildScrollView(child: MobileWidget());
如果有人在桌面上有一个非常小的 Chrome 窗口,它可以通过这种方式切换到移动布局。
顺便说一句,我几乎总是用以下代码开始我的代码,这样我就可以调整布局。
var size = MediaQuery.of(context).size;
var isLargeScreen = false;
if (MediaQuery.of(context).size.width > 900) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}
这样,当我构建一个小部件时,我可以执行以下操作:
Container(
constraints: BoxConstraints(maxWidth: (isLargeScreen ? 700 : size.width * 0.9)),
),
您还可以通过 Platform.isIOS/isWindows/isAndroid 询问用户他们使用的操作系统。
前:
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return Platform.isIOS ? AndroidPage() : iOSPage();
},
)); // MaterialPageRoute
},
或者在使用 FutureBuilder 时
return Platform.isIOS ? CupertinoLoading() : CircularProgressIndicator();
除此之外,您还可以使用带有 OrientationBuilder 的 VoidCallbackMethod 来更改应用程序的运行方式。
在我分享的文章中,如果屏幕小,则打开一个Navigation route,否则将数据传递给右侧的一个widget。例如,这适用于消息传递应用程序。
这里有一些文章可以帮助你。
Develop A Responsive Layout Of Mobile App With Flutter
Developing for Multiple Screen Sizes and Orientations in Flutter
当然,最终取决于您的项目、您和/或您的团队想要什么,以及您对文件大小/额外 if 语句一直运行的舒适程度。 p>
不过我要补充一点,至少对于移动应用,我通常只使用一个项目。 Web/桌面可能是不同的项目。
快乐飘飘!