如何使颤动窗口小部件适应不同的屏幕尺寸

Question

I`m使用Container的宽度和高度参数来确定小部件的大小。但如果在其他设备上进行了测试，则该窗口小部件将无法自适应。我来自本地android，曾经使用密度独立的pixel（dp）来适应任何屏幕尺寸。什么是dp in flutter？我不想每次都使用MediaQuery来计算屏幕的宽度和高度。

Answer 1

您可以通过以下方式设置UI小部件的大小：

 width: 100.0 * MediaQuery.of(context).devicPixelRatio ,

函数MediaQuery.of(context).devicPixelRatio将返回每个逻辑像素中的实际像素数，因此，您将确保测试设备上相同的100.0像素对于用户而言无论具有何种屏幕密度都是典型的。

Answer 2

我以这种方式应用：

 class SizeConfig {
          static MediaQueryData _mediaQueryData;
          static double screenWidth;
          static double screenHeight;
          static double blockSizeHorizontal;
          static double blockSizeVertical;

          void init(BuildContext context) {
           _mediaQueryData = MediaQuery.of(context);
           screenWidth = _mediaQueryData.size.width;
           screenHeight = _mediaQueryData.size.height;
           blockSizeHorizontal = screenWidth / 100;
           blockSizeVertical = screenHeight / 100;
          }
         } 

  class HomeScreen extends StatelessWidget {  @override  Widget
 build(BuildContext context) {  SizeConfig().init(context);  …  } }
     @override
     Widget build(BuildContext context) {
      return Center(
       child: Container(
        height: SizeConfig.blockSizeVertical * 20,
        width: SizeConfig.blockSizeHorizontal * 50,
        color: Colors.orange,
       ),
      );
     }

https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a