在模拟器中或根据不同的屏幕尺寸将小部件定位在堆栈中的位置变化。扑

Posted 2023-02-23

【中文标题】在模拟器中或根据不同的屏幕尺寸将小部件定位在堆栈中的位置变化。扑

【英文标题】：Positioned widget in a Stack changing position in emulator or according to different screen sizes. Flutter

【发布时间】：2021-06-18 19:22:15

【问题描述】：

我一直在尝试像这样将堆栈中的每一朵云放在这张图片上。

当我在我的一加 6 手机中检查我的应用程序时，云的位置发生了一些变化。

这是我的代码：-

Cloud(
              bottom: 355 ,
              left: 135,
              videoLink: 'https://giant.gfycat.com/WetDifficultHornbill.webm',
              lineUpLink:
                  'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/photo_2021-03-21_23-33-04.jpg?alt=media&token=e903e0c8-9bd5-4587-bb31-acf1c0ab4ba8',
            ),

class Cloud extends StatelessWidget 
  Cloud(this.width,this.height,this.bottom,this.left,this.lineUpLink,this.right,this.top,this.videoLink);
  final String videoLink;
  final String lineUpLink;
  final double bottom;
  final double left;
  final double right;
  final double top;
  final double height;
  final double width;
  @override
  Widget build(BuildContext context) 

    return Positioned(

      bottom: bottom,
      left: left,
      width: width,
      height: height,
      top: top,
      right: right,
      child: IconButton(
        icon: Image.asset('images/cloud30.png'),
        onPressed: () 
          final getLink = GetLink(
            link: videoLink,

            lineLink: lineUpLink,

          );

          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => VideoApp(link: getLink.link,lineupLink: getLink.lineLink,)),
          );
        ,
      ),
    );
  

那我现在该怎么办？？请帮忙

【参考方案1】：

您可以尝试使用MediaQuery 使用与屏幕大小相关的值，而不是硬编码bottom 和left 参数值。例如，

Cloud(
  bottom: MediaQuery.of(context).size.height / 3,
  left: MediaQuery.of(context).size.width / 2,
  // other parameters
),

【讨论】：

你能再解决一个我的问题吗？ ***.com/questions/66675436/…

当然，我会看看这个问题。另外，如果此答案对您有所帮助，请考虑将其标记为答案。