时间戳

首页 > 解决方案 > 如何添加根据屏幕保持平台响应的填充？

android - 如何添加根据屏幕保持平台响应的填充？

问题描述

媒体查询在这种情况下没有帮助，EdgeInsets.only()或者可能是我不理解的情况。我使用了 padding: EdgeInsets.all(MediaQuery.of(context).size.width/10)，但它在“仅”情况下没有帮助。

    Padding(
    padding: const EdgeInsets.only(top: 160, left: 90, bottom: 20),
    child: Row(
      children: <Widget>[
        Image.asset(
          'assets/logo.png',
          height: 70,
          width: 70,
        ),
        Text(
          '  Whatsapp',
          style: TextStyle(
            fontSize: 26,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  ),

标签： androidflutterdart

解决方案

这是一个你可以使用的包

https://pub.dev/packages/flutter_screenutil

将依赖项添加到您的 pubspec.yaml 文件中：

flutter_screenutil: <latest version>

用屏幕高度和宽度在 build 方法中初始化包。您可以从 MediaQuery 获得。

final Size size = MediaQuery.of(context).size;
ScreenUtil.init(context,
              width: size.width,
              height: size.height,
              allowFontScaling: false);

现在您可以继续将 .w 和 .h 附加到填充值。“.w”返回相对于屏幕宽度附加的值的一小部分。“.h” 做同样的事情，但屏幕的高度。

Padding(
        padding: const EdgeInsets.only(top: 160.h, left: 90.w, bottom: 20.h),
        child: Row(
          children: <Widget>[
            Image.asset(
              'assets/logo.png',
              height: 70,
              width: 70,
            ),
            Text(
              '  Whatsapp',
              style: TextStyle(
                fontSize: 26,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),

推荐阅读