如何在颤动中固定背景图像的大小和位置？

Posted 2023-02-23

【中文标题】如何在颤动中固定背景图像的大小和位置？

【英文标题】：How to fix size and position of background image in flutter?

【发布时间】：2021-12-11 16:40:45

【问题描述】：

Widget build(BuildContext context)
    var height2 = AppBar().preferredSize.height;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: <Widget>[
          Image(
              image: AssetImage("assets/oral_structure.png"),
              fit: BoxFit.fill
          ),
          Padding(
          padding: EdgeInsets.only(top:100, left: 100),
          child: Container(
              height: 60,
              width: 60,
              child: FlatButton(
                child: Text('ㅂ', style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold)),

                onPressed: ()
                  Navigator.push(context, MaterialPageRoute(builder: (context) => B()),);
                ,
              )
          ),
          ),

以上是我的代码的一部分。我正在制作的应用程序是将适当的按钮放置在背景图像顶部的位置。但是，如果您进行上述代码，则按钮的位置和图像的位置会根据智能手机的屏幕尺寸而有所不同。固定高度和宽度也是如此。怎么没有办法？

【参考方案1】：

@override
Widget build(BuildContext context) 
    
    return Scaffold(
        key: v.scaffoldKey,
        body: Stack(
            children: [
            getBackgroundLight(),
            ],
        ),
    );
 

Widget getBackgroundLight() 
    return Stack(
        children: [
        Image.asset('assets/background.jpg', width: double.infinity),
        Transform.rotate(
            angle: -SizeConfig.calculateBlockVertical(180) *
              (math.pi / SizeConfig.calculateBlockVertical(180)),
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.center,
                    end: Alignment.bottomCenter,
                    colors: [
                    Get.theme.scaffoldBackgroundColor,
                    Get.theme.scaffoldBackgroundColor.withOpacity(0.5),
                    ],
                  ),
                ),
              ),
            ),
        ],
    );

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。