如何在 Flutter 中更改背景图像的位置和旋转

Question

我是 Flutter 的新手，我想知道如何在 Flutter 中更改背景图片的位置。由于 ovelflow，我想在页面的一角显示背景图像并将其位置更改为图像的隐藏部分。

作为前端开发人员实现此目的，我考虑将图像的位置更改为绝对位置并将底部和右侧设置为负值，但在 Flutter 中以不同的方式执行这些操作。

我如何在 Flutter 中实现这一点？

class _WaterIntakeState extends State<WaterIntake> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: <Widget>[
          Container(
            color: Colors.white,
          ),
          Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.dstATop),
                  image: AssetImage("assets/images/drink-water.png"),
                  fit: BoxFit.fitWidth,
            )),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              title: Text('Water Intake'),
            ),
            body: Container(
//              child: const ButtonsWidget(),
            ),
          ),
        ],
      ),
    );
  }
}

当前状态：

我想要什么：

Answer 1

您可能希望同时使用 Transform.translate 和 Transform.rotate 来实现此目的。

class _WaterIntakeState extends State<WaterIntake>
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: <Widget>[
          Container(
            color: Colors.white,
          ),
          Transform.translate(
            offset: Offset(-100.0, 200.0),
            child: Transform.rotate(
              angle: pi / 4,
              child: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                  colorFilter: ColorFilter.mode(
                      Colors.white.withOpacity(0.5), BlendMode.dstATop),
                  image: AssetImage("assets/images/drink-water.png"),
                  fit: BoxFit.fitWidth,
                )),
              ),
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              title: Text('Water Intake'),
            ),
            body: Container(
//              child: const ButtonsWidget(),
                ),
          ),
        ],
      ),
    );
  }
}

当然你需要玩 offset。

Answer 2

只需用这个 Transform.translate 小部件替换您的第二个容器

Transform.translate(
            offset: Offset(-100.0, 200.0),
            child: Transform.rotate(
              angle: pi / 4,
              child: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                  colorFilter: ColorFilter.mode(
                      Colors.white.withOpacity(0.5), BlendMode.dstATop),
                  image: AssetImage("assets/images/drink-water.png"),
                  fit: BoxFit.fitWidth,
                )),
              ),
            ),
          ),

您也可以通过更新角度和偏移来根据您的需要更改图像位置

如何在 Flutter 中更改背景图像的位置和旋转

How to change background image position and rotation in Flutter

background-image

image-rotation

flutter

flutter-layout