Question

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

Answer 1

您可以使用 SizeBox.expand 小部件使您的小部件扩展以占用可用空间，而不考虑大小documentation

SizedBox.expand(

  child:MyButton(),
),

如果无论屏幕大小如何都希望保持宽高比，可以使用 AspectRatio 小部件documentation

AspectRatio(

 aspectRatio: 3/2,

  child:MyButton(),
),

如果您的窗口小部件仅位于行或列中，并且您想在其中添加权重以填充空格，则可以使用 Expanded 窗口小部件

  Expanded(
            flex: 1,//weight for the widget
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          )

，

Answer 2

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

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

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

Answer 3

我以这种方式应用：

 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

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

3 个答案: