时间戳

首页 > 解决方案 > 如何使 adobe XD 生成的代码到颤振插件，根据屏幕尺寸实际可用和响应？

flutter - 如何使 adobe XD 生成的代码到颤振插件，根据屏幕尺寸实际可用和响应？

问题描述

最近 adobe XD 发布了支持 Flutter 的新插件。基本上，它采用设计并将其转换为实际的颤振代码。

设计师在iphoneX尺寸上设计的，代码根据它使用绝对定位。问题是它还不支持布局/响应，所以如果我尝试在 android 设备或平板电脑或任何其他具有不同屏幕尺寸的设备上查看它，它不适合它应该......（这里有一些图片图片来说明iphonex、android、ipadair2 )

我可以看到他们主要使用 Stack & Transform.translate（使用偏移量），如下所示。您能否建议如何更改代码以使 UI 适合屏幕，无论大小以及他们使用的小部件/功能有什么不必要的？

谢谢各位！

return Scaffold(
  backgroundColor: const Color(0xffffffff),
  body: Stack(
    children: <Widget>[
      Transform.translate(
        offset: Offset(-153.0, -65.0),
        child:
            // Adobe XD layer: 'jed-villejo-xkeLHL5…' (shape)
            Container(
          width: 672.5,
          height: 877.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: const AssetImage('assets/images/background.jpg'),
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),
      Container(
        width: 375.0,
        height: 812.0,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(0.18, 1.0),
            end: Alignment(0.18, -1.0),
            colors: [const Color(0x66000000), const Color(0x1a545454)],
            stops: [0.0, 1.0],
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(0.0, -40.0),
        child: Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(30.0, 614.0),
              child: Container(
                width: 315.0,
                height: 51.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40.0),
                  color: const Color(0xff4b77d9),
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(47.0, 632.0),
              child: SizedBox(
                width: 282.0,
                child: Text(
                  'LOG IN WITH PHONE NUMBER',
                  style: TextStyle(
                    fontFamily: 'Helvetica Neue',
                    fontSize: 16,
                    color: const Color(0xffffffff),
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      ),
      Transform.translate(
        offset: Offset(30.0, 645.0),
        child: Container(
          width: 315.0,
          height: 51.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40.0),
            color: const Color(0xffffffff),
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(0.0, 16.0),
        child: Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(149.0, 64.0),
              child: Container(
                width: 77.0,
                height: 77.0,
                decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.all(Radius.elliptical(38.5, 38.5)),
                  color: const Color(0xffffffff),
                  border: Border.all(
                      width: 8.0, color: const Color(0xff4b77d9)),
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(0.0, -1.0),
              child: Stack(
                children: <Widget>[
                  Transform.translate(
                    offset: Offset(138.0, 3.54),
                    child: Stack(
                      children: <Widget>[
                        Transform.translate(
                          offset: Offset(28.0, 85.46),
                          child: Container(
                            width: 42.0,
                            height: 36.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                  Radius.elliptical(21.0, 18.0)),
                              color: const Color(0xffffffff),
                              border: Border.all(
                                  width: 2.0,
                                  color: const Color(0xff4b77d9)),
                            ),
                          ),
                        ),
                        Transform.translate(
                          offset: Offset(24.0, 83.46),
                          child: Container(
                            width: 51.0,
                            height: 23.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: const Color(0xffffffff),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(162.0, 87.0),
                    child: SizedBox(
                      width: 52.0,
                      child: Text(
                        'Yalla!',
                        style: TextStyle(
                          fontFamily: 'Helvetica Neue',
                          fontSize: 18,
                          color: const Color(0xff4b77d9),
                          fontWeight: FontWeight.w700,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Transform.translate(
        offset: Offset(17.0, 172.0),
        child: SizedBox(
          width: 342.0,
          child: Text(
            'GET STARTED!',
            style: TextStyle(
              fontFamily: 'Helvetica Neue',
              fontSize: 40,
              color: const Color(0xffffffff),
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(30.0, 406.0),
        child: Text(
          'VIDEO\nWITH FRIENDS',
          style: TextStyle(
            fontFamily: 'Helvetica Neue',
            fontSize: 40,
            color: const Color(0xffffffff),
            fontWeight: FontWeight.w700,
          ),
          textAlign: TextAlign.left,
        ),
      ),
      Transform.translate(
        offset: Offset(-3.0, 511.0),
        child: SizedBox(
          width: 386.0,
          child: Text(
            'By tapping Log In, you agree with our\nTerms of Service and Privacy Police',
            style: TextStyle(
              fontFamily: 'Helvetica Neue',
              fontSize: 18,
              color: const Color(0xffffffff),
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(7.0, 708.0),
        child: SizedBox(
          width: 266.0,
          child: Text(
            'Your’e new? Sign Up here',
            style: TextStyle(
              fontFamily: 'Helvetica Neue',
              fontSize: 18,
              color: const Color(0x99ffffff),
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(14.0, 0.0),
        child: Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(83.0, 663.0),
              child: SizedBox(
                width: 210.0,
                child: Text(
                  'LOG IN WITH GOOGLE',
                  style: TextStyle(
                    fontFamily: 'Helvetica Neue',
                    fontSize: 16,
                    color: const Color(0xff4b77d9),
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(68.0, 658.0),
              child:
                  // Adobe XD layer: 'brands-and-logotypes' (group)
                  SvgPicture.string(
                _shapeSVG_0773c290a8144975aedeed43cd17edef,
                allowDrawingOutsideViewBox: true,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

} }

常量字符串 _shapeSVG_0773c290a8144975aedeed43cd17edef = '';

标签： flutterpluginsresponsiveadobe-xd

解决方案

只需从您创建的设备计算媒体查询比率，并使用它们代替实际的偏移尺寸。

例如，如果您的手机尺寸有x宽度和y高度：

     Transform.translate(
        offset: Offset(-153.0, -65.0),
        child:
            // Adobe XD layer: 'jed-villejo-xkeLHL5…' (shape)
            Container(
          width:MediaQuery.of(context).size.width* 672.5/x,
          height: MediaQuery.of(context).size.height* 672.5/y,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: const AssetImage('assets/images/background.jpg'),
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),

推荐阅读