Flutter的自由学习之路-Flutte任何想应用的场景中r进阶篇
在Flutter中,你可以使用Stack
控件来实现图片的叠加。以下是一个简单的例子,展示如何在一个图片上叠加另一个小图片:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Stack(
children: <Widget>[
Image.network('https://example.com/background.jpg', fit: BoxFit.cover, height: 300.0, width: 400.0,),
Positioned(
top: 50.0,
left: 75.0,
child: Image.network('https://example.com/overlay.png', height: 100.0, width: 100.0,),
),
],
),
),
),
);
}
}
在这个例子中,Stack
控件包含了两个子控件:一个是背景图片,另一个是通过Positioned
控件指定位置的叠加图片。通过调整Positioned
控件的top
和left
属性,你可以控制叠加图片的位置。
请确保替换图片的URL为你的实际图片地址。
评论已关闭