我有这样的图像
我需要在此图像上添加小部件。看起来内容只是在移动屏幕上。我试图寻找一种方法,但我没有得到任何帮助。我尝试使用这样的堆栈:
Container(
child: Stack(
children: <Widget>[
Positioned(
child: Container(
padding: EdgeInsets.fromLTRB(60, 110, 60, 90),
//body
),
),
Container(width: 1000,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/transparentMobile.png'),
fit: BoxFit.fill)),
),
],
),
),
它在我的手机上正常工作:但在其他手机上,看起来却大不相同。如何为多个屏幕编写单个代码?
最佳答案
终于我有了办法。我没有认真研究代码,而是将图像分为三部分:
顶部:
正文:
底部:
并将它们添加到这样的列中:
AspectRatio(
aspectRatio: 1/2,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileTop.png'),
fit: BoxFit.fill
)
),
),
),
Expanded(
flex: 7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBody.png',),
fit: BoxFit.fill
)
),
height: 100,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
automaticallyImplyLeading: false,
title: Text('My Application'),
),
body: Center(
child: Text(
'Hello World!',
style: TextStyle(color: Colors.black),
),
),
backgroundColor: Colors.white,
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBottom.png'),
fit: BoxFit.fill
)
),
),
),
],
),
),
),
现在该图像在大多数设备上看起来都非常相似:谢谢你的帮助!
关于flutter - 在图像上添加小部件- flutter , Dart ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63343229/