我是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(),
),
),
],
),
);
}
}
当前状态:
我想要的是:
您可能想同时使用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(),
),
),
],
),
);
}
}
Ofc您需要使用offset
玩。