dart 其他Android手机的屏幕、设计和小部件大小也各不相同

pokxtpni  于 2023-07-31  发布在  其他
关注(0)|答案(3)|浏览(107)

我设计了简单的Flutter Android应用程序。在构建APK后,我在其他Android手机上安装了该APK进行测试,但我面临着问题。屏幕大小不同,小部件的位置,按钮内的文字,对齐也改变了其他手机屏幕,但pn我移动的显示正确。我试了两个手机。第一个移动的屏幕尺寸比我的手机尺寸大。第二个移动的屏幕比我的手机屏幕小。如何解决此问题?我想应用程序的所有屏幕看起来在所有类型的移动的屏幕相同。

tkqqtvp1

tkqqtvp11#

您可以使用flutter_screenutil(一个适应屏幕和字体大小的flutter插件。让您的UI在不同的屏幕尺寸下显示合理的布局)

bzzcjhmw

bzzcjhmw2#

你可以安装这个软件包并在你的应用程序中使用它,它非常受欢迎,许多开发人员都在使用它,这是软件包的链接:https://pub.dev/packages/flutter_screenutil
1_在依赖项中的pubspec.yaml中安装软件包

dependencies:
  flutter:
    sdk: flutter
  # add flutter_screenutil
  flutter_screenutil: ^{latest version}

字符串
2_导入main.dart中的包

import 'package:flutter_screenutil/flutter_screenutil.dart';


3_使用screen_util Package 材质应用程序,并定义要使用的大小:

Widget build(BuildContext context) {
    //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }


4_最后,你可以在你的应用程序的任何屏幕上使用它,通过添加.h到高度,.w到宽度,.sp到字体大小,.r到raduis来使它响应:

Container(
          width: 200.w,
          height: 200.h,
          color: Colors.blue,
          child: Center(
            child: Text(
              'My Container',
              style: TextStyle(fontSize: 24.sp),
            ),
          ),


现在你可以使你的应用程序响应和改变任何屏幕或小部件或文本大小的基础上,你使用的设备的屏幕大小.

ctehm74n

ctehm74n3#

您可以根据最大屏幕大小使用相对大小,而不是使用固定大小。
也有这样的包:https://pub.dev/packages/sizer
因为每个默认的固定大小的小部件,例如Container(width: 100, height: 100),当然会根据屏幕的大小占用总可用屏幕空间的不同百分比。
但是像Column内部的Expanded这样的灵活小部件已经将其子部件的大小调整为可用空间的一小部分。
还有一些小部件,比如Text("Some long text..."),在大型设备上可能只占用一行,但在较小的设备上则将其内容 Package 成两行或更多行。

相关问题